/* Pyraminx.net — OO census page styles. */

/* depth-browser solved/unsolved filter */
.filterrow{display:inline-flex;gap:6px;margin:0 0 16px}
.filterbtn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line2);
  color:var(--mut);border-radius:8px;padding:.4em 1em;font:600 13px var(--body);cursor:pointer}
.filterbtn:hover{color:var(--txt);border-color:var(--mut)}
.filterbtn.on{color:var(--actink);background:var(--act);border-color:var(--act)}
.filterbtn .fct{font:500 11px var(--mono);color:var(--dim)}
.filterbtn.on .fct{color:rgba(35,28,5,.66)}

/* rotation-view popup */
.modal-ov{position:fixed;inset:0;background:rgba(8,10,14,.55);display:flex;align-items:center;justify-content:center;z-index:48;padding:18px}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:400px;width:100%;padding:16px 18px 18px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px}
.modal-x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--mut);font-size:22px;line-height:1;cursor:pointer;padding:6px}
.modal-x:hover{color:var(--txt)}
.modal-net{display:flex;justify-content:center}
.modal-box .ghost.sm{align-self:flex-start}