/* the app's own rules: form controls that the mockups drew as spans and anchors */
:where(button.btn,button.o,button.lnk){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;letter-spacing:inherit;text-transform:inherit}
form.mod,form.poll,form.cf,form.rbox,form.cmp,form.inl{display:block}
.poll button.o{display:block;width:100%}
.field:focus{outline:none}
.btn.off{opacity:.45;pointer-events:none}
.cm .rbox{display:none;margin-top:14px}.cm.open .rbox{display:block}.cm .rbox .acts{margin-top:8px}.cm .rbox .field{min-height:90px}

/* delete with confirm in place, lifted from admin-25 */
.del{display:inline-flex;align-items:center;gap:10px} .del .cf{display:none;align-items:center;gap:10px} .del.open .dl{display:none} .del.open .cf{display:inline-flex} .del .q{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--new);white-space:nowrap} .col.c .pan .del .lnk,.col.c .pan .del .btn{padding:6px 10px 5px;font-size:10px;height:auto;line-height:1} .col.c .pan .del .dl,.col.c .pan .del .dl:before{color:var(--new)} .col.c .pan .del .dl:hover{background:var(--new);color:var(--ink)} .col.c .pan .del .dl:hover:before{color:var(--ink)} .col.c .pan .del .btn.rm{background:var(--new);color:var(--ink)} .col.c .pan .del .btn.rm:hover{background:#ff7a6d;box-shadow:0 0 0 1px #ffb3aa,0 0 22px rgba(255,74,58,.5)} .cm .ops .del,.nh .del{margin-left:10px} .nh .ed ~ .del,.cm .ops .ed ~ .del{margin-left:10px} .col.c .pan .lnk.ic,.col.c .pan .del .lnk.ic,.col.c .pan .sh .lnk.ic,.col.c .pan .sh .del .lnk.ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:21px;padding:0;font-size:0} .col.c .pan .sh .lnk.ic,.col.c .pan .sh .del .lnk.ic{width:30px;height:26px} .col.c .pan .lnk.ic:before,.col.c .pan .sh .del .lnk.ic:before{content:""} .col.c .pan .sh .del .lnk,.col.c .pan .sh .del .btn{padding:8px 12px 7px;font-size:11px} .cm .ops .ed ~ .del{margin-left:0} .lnk.ic svg{display:block}
.clist{max-height:230px;overflow-y:auto;overflow-x:hidden}
.adm .K.note{max-width:none}
/* the audit log: one colour per kind, on the filter plate and on the row mark */
:root{--f5:#5fd3e8;--f6:#e8b84a;--f7:#7ad37a;--f8:#ff4a3a;--f9:#8b9096}
.aud .lt.f5,.aud .lt.f6,.aud .lt.f7,.aud .lt.f8,.aud .lt.f9{background:var(--line)}
.aud .lt.f5{color:var(--f5)}.aud .lt.f6{color:var(--f6)}.aud .lt.f7{color:var(--f7)}.aud .lt.f8{color:var(--f8)}.aud .lt.f9{color:var(--f9)}
.aud .flt .lnk.f2{color:var(--f2)}.aud .flt .lnk.f3{color:var(--f3)}.aud .flt .lnk.f4{color:var(--f4)}.aud .flt .lnk.f5{color:var(--f5)}.aud .flt .lnk.f6{color:var(--f6)}.aud .flt .lnk.f7{color:var(--f7)}.aud .flt .lnk.f8{color:var(--f8)}.aud .flt .lnk.f9{color:var(--f9)}
/* one head in the admin's centre: admin-21 and admin-26 were drawn before the rule every other admin page carries */
.adm .col.c .pan .sh .h{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--cc)}
/* the chapter gate's Publish and Take down ask in place, as a delete does (chapter-lifecycle, 16 Sept) */
.chp .gate .ask{margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.chp .gate .ask .cf{display:none;align-items:center;gap:10px}
.chp .gate .ask.open > a{display:none}
.chp .gate .ask.open .cf{display:inline-flex}
.chp .gate .ask .btn{margin-left:0}
.chp .gate .ask .q{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--white);white-space:nowrap}
.chp .gate .ask.red .q{color:var(--new)}
/* a staged chapter's gate: Reopen beside Publish, the two at the right; the checklist's Featured artist with the
   name beside its label (admin-40) */
.chp .gate .gb{margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.chp .gate .gb .ask,.chp .gate .gb .btn{margin-left:0}
.chp .gate .lnk.off{opacity:.45;pointer-events:none}
.col.c .pan.chp .lst.one .row .s .fa{display:inline-flex;margin-left:8px;color:var(--muted)}
/* Members' find field, as Submissions has it (admin-23) */
.mem .srch{margin:0 0 6px}
.mem .srch .field{height:34px;width:100%}
/* an audit row's subject opens its page; it reads as the row does */
.aud .row a.sj{color:inherit}
/* a row with an edit pencil opens it from anywhere on the row (ui.js) */
.row:has(a.lnk.ed){cursor:pointer}

/* the empty panel, everywhere (portal_lib EMPTY_CSS and OFF_CSS; portal-62): the raster behind, one control on it, nothing said; a plate that cannot be used yet keeps its colour and loses its fill */
.mt{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:22px;background-color:rgba(0,0,0,.18);background-image:radial-gradient(#252a2f 1px,transparent 1px);background-size:12px 12px;background-position:6px 6px}
.mt .ea{position:relative;z-index:1}
.mt .ea .btn,.mt .ea .lnk{pointer-events:auto}
.mt .ea .btn{line-height:1;display:inline-flex;align-items:center}
.col.l .mt,.col.r .mt{margin-bottom:10px}
.mt .ea .btn.off{background:none;box-shadow:inset 0 0 0 1px var(--c4);color:var(--c4);opacity:.55;cursor:default;pointer-events:none}
.mt .ea .btn.off:before{color:var(--c4)}
.mt .ea .btn.off.ws{box-shadow:inset 0 0 0 1px var(--c3);color:var(--c3)}
.mt .ea .btn.off.ws:before{color:var(--c3)}
.sh .add.w.off{background:none;box-shadow:inset 0 0 0 1px var(--c4);color:var(--c4);opacity:.55;cursor:default;pointer-events:none}
.sh .add.w.off i{color:var(--c4)}

/* the bar's way between the portal and the admin: Admin for an admin in the portal (portal-70), Portal in the admin (admin-48) */
.pbar .prt .bk{display:inline-flex;align-items:center;height:26px;padding:0 12px;line-height:1;color:var(--muted)}
.pbar .prt .bk:hover{color:var(--cc-ink)}
/* the plate across in the admin's colour, the admin's action plate: Admin in the portal (portal-71; his 25 Sept: "can you give it a colour so i know its a different button?"), Portal in the admin (admin-51; his 25 Sept: "yes make portal a colour please at the top of admin") */
.pbar .prt .bk.adm{background:#8b6cff;color:#0d0e10}
.pbar .prt .bk.adm:before{color:#0d0e10}
.pbar .prt .bk.adm:hover{background:color-mix(in oklch,#8b6cff,black 12%);color:#0d0e10}
.pbar .prt .bk.adm:hover:before{transform:translateX(3px)}

/* Processing's drop as it sends (admin-49; admin_processing.php proc_js): a row per zip, how far it has come, then what it
   placed or why not, in red; the drop rests while it sends. The same row under Dropped for what did not go in. */
.col.c .pan.chp.prp .pup{margin:-24px 22px 36px}
.col.c .pan.chp.prp .pup:empty{display:none}
.col.c .pan.chp.prp .row.pr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--line)}
.col.c .pan.chp.prp .lst.prs .row.pr{padding:8px 22px}
.col.c .pan.chp.prp .row.pr .s{min-width:0;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col.c .pan.chp.prp .lst.prs .row.pr .s{color:var(--new);text-transform:none}
.col.c .pan.chp.prp .row.pr .K{margin:0;white-space:nowrap}
.col.c .pan.chp.prp .row.pr .K b{color:var(--white)}
.col.c .pan.chp.prp .row.pr .K.bad{color:var(--new)}
.col.c .pan.chp.prp .pdrop.busy{pointer-events:none;opacity:.55}

/* a code piece opened in the portal (canon U17): its frame over the still once Play is pressed (lib/code.php code_frame) */
.mplay.video .vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--black)}
.mplay.video .vframe.on{background-image:none!important}