/* Dialogs and forms: project, column, CSV fallback, device assignment. Toast message. */

/* dialogs */
dialog{border:1px solid var(--line2);background:var(--panel);color:var(--ink);padding:0;width:min(460px,calc(100% - 32px));border-radius:4px}
dialog.wide{width:min(760px,calc(100% - 32px))}
dialog::backdrop{background:var(--scrim)}
.form{display:flex;flex-direction:column;gap:8px;padding:22px 24px 20px}
.form h2{margin:0 0 8px;font-family:var(--cond);font-weight:600;font-size:26px;line-height:1;text-transform:uppercase}
.form label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.form label i{font-style:normal;color:var(--ink3);letter-spacing:.06em;text-transform:none;margin-left:6px}
.form input,.form textarea,.form select{background:var(--ground);border:1px solid var(--line2);border-radius:2px;padding:8px 10px;font-size:14px;width:100%;resize:none}
.form [aria-invalid="true"]{border-color:var(--err)}
.form .err{margin:0;font-size:12.5px;color:var(--err)}
.form .note{margin:0;font-size:13px;color:var(--ink2)}
.form .fa{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.form .fa button{border:1px solid var(--line2);background:transparent;padding:8px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:2px}
.form .fa button:hover{background:var(--panel-hi)}
.form .fa button.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}
.form .fa button.go:hover{opacity:.88}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}
.btn.pri:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);opacity:.88}
.devb{all:unset;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.devb:hover{color:var(--ink);text-decoration-color:var(--ink3)}
.devb:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.na{color:var(--ink3)}
.noparts .btn{margin-top:14px}
.form h3{margin:12px 0 0;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;border-left:2px solid var(--accent);padding-left:9px;line-height:1.2}
.form .hint{margin:0;font-size:12px;color:var(--ink3)}
.form .fcol{display:flex;flex-direction:column;gap:8px}
.frow{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.frow>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.form .warn{border-left:2px solid var(--accent);background:var(--panel-hi);padding:9px 12px;font-size:13px}
.form .warn p{margin:0}.form .warn p+p{margin-top:6px}
.ht{overflow-x:auto;border:1px solid var(--line)}
.ht th{height:30px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ht td{height:44px;font-size:13px}
.form .ht .hd{width:auto;padding:5px 7px;font-size:13px}
.ht .lk{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink3)}
.ht .acts2{display:flex;gap:8px;align-items:center}
@media (max-width:640px){.frow{grid-template-columns:1fr}}
#toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--ground);font-family:var(--mono);font-size:11.5px;padding:9px 14px;border-radius:2px;max-width:calc(100% - 32px)}

/* CSV export dialog: level tabs, participants on the left, columns on the right */
dialog.xl{width:min(1000px,calc(100% - 32px))}
.form.ex{gap:10px}
.form.ex h2{margin:0}
.ex-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line2);margin-top:4px}
.ex-tabs button{all:unset;cursor:pointer;padding:8px 0 7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px}
.ex-tabs button:hover{color:var(--ink)}
.ex-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.ex-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ex-body{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;min-height:0}
.ex-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.ex-h{display:flex;align-items:center;gap:8px}
.ex-h .ex-n{font-family:var(--mono);font-size:11px;color:var(--ink2);margin-right:auto;white-space:nowrap}
.btn.sm{padding:3px 9px;font-size:9.5px}
.ex-list{border:1px solid var(--line);overflow-y:auto;height:min(46vh,420px);padding:6px 10px}
.ex-p{display:flex !important;align-items:center;gap:9px;margin:0 !important;padding:4px 0;font-family:var(--sans) !important;font-size:13px !important;letter-spacing:0 !important;text-transform:none !important;color:var(--ink) !important;cursor:pointer}
.ex-p em{font-style:normal;margin-left:auto;font-size:11.5px;color:var(--ink3)}
.ex-g{padding:6px 0 8px;border-bottom:1px solid var(--line)}
.ex-g:last-child{border-bottom:0}
.form .ex-gh{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 0 0 24px}
.form .chip{display:inline-flex;align-items:center;gap:6px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:0;text-transform:none;color:var(--ink);cursor:pointer;white-space:nowrap}
.form .chip.lock{color:var(--ink3);cursor:default}
.ex input[type="checkbox"]{width:15px;height:15px;margin:0;flex:none;accent-color:var(--accent);padding:0}
.ex-stats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:8px 10px;background:var(--panel-hi)}
.ex-stats .cl{margin-right:4px}
.form.ex .fa{align-items:center}
.ex-sum{margin-right:auto;font-family:var(--mono);font-size:11px;color:var(--ink2)}
@media (max-width:719px){.ex-body{grid-template-columns:1fr}.ex-list{height:auto;max-height:40vh}}