/* the staff panel at /panel: words down the side, plain lit words for every press, thin lines, nothing boxed it does not need; the console is moxie's */
main:has(> .pn) { max-width: 1120px; }
.pn { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 14px; }
.pn-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.pn-side a { color: var(--dim); cursor: pointer; padding: 2px 0; transition: color .15s, text-shadow .15s; }
.pn-side a:hover, .pn-side a.on { color: var(--bright); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-accent) 60%, transparent); }
.pn-main { min-width: 0; }
.pn h1 { margin: 0 0 12px; font-size: 26px; font-weight: 300; color: var(--bright); }
.pn h1 small { font-size: 13px; color: var(--dim); margin-left: 8px; }
.pn h2 { margin: 22px 0 6px; font-size: 13px; font-weight: 400; color: var(--dim); }
.pn p { margin: 4px 0; }
.pn input { min-width: 0; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--bright); font: inherit; outline: none; transition: border-color .15s; }
.pn input:focus { border-bottom-color: var(--sy-accent); }
.pn input::placeholder { color: var(--dim); }
.pn-dim, .pn small { color: var(--dim); font-size: 12.5px; }
.pn .bad, .pn-said.bad { color: #f07a9a; }
.pn-go { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--sy-accent); cursor: pointer; transition: color .15s; }
.pn-go:hover { color: var(--bright); }
.pn-go svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
input:placeholder-shown ~ .pn-go { display: none; }
.pn-said { min-height: 1.4em; font-size: 13px; color: var(--text); }
.pn-lit { color: var(--text); cursor: pointer; transition: color .15s, text-shadow .15s; white-space: nowrap; }
.pn-lit:hover { color: var(--bright); }
.pn-lit.on { color: var(--bright); }
.pn-lit.small { font-size: 13px; color: var(--dim); }
.pn-lit.small:hover, .pn-lit.small.on { color: var(--bright); }
.pn-back { display: inline-block; margin-bottom: 6px; color: var(--dim); font-size: 13px; cursor: pointer; }
.pn-back::before { content: "< "; }
.pn-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px 22px; margin: 6px 0 18px; }
.pn-figure b { display: block; color: var(--bright); font-size: 23px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1.25; }
.pn-figure span { color: var(--dim); font-size: 12px; }
.pn-week { width: 220px; height: 54px; display: block; }
.pn-week .in { fill: var(--sy-accent); opacity: .7; }
.pn-week .no { fill: #f07a9a; opacity: .7; }
.pn-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.pn-row { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 13.5px; }
.pn-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pn-row > small { flex: none; }
a.pn-row { cursor: pointer; }
a.pn-row:hover { color: var(--bright); }
.pn-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0; }
.pn-filter > span { color: var(--dim); font-size: 12.5px; }
.pn-filter > span:not(:first-child) { margin-left: 8px; }
.pn-filter input:not(.pn-days) { flex: 1 1 180px; }
.pn-days { width: 58px; font-size: 13px; }
.pn-find { position: relative; }
.pn-find input { width: 100%; font-size: 15px; }
.pn-fill { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 300px; overflow: auto; padding: 4px; background: color-mix(in srgb, var(--sy-surface) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 6px; }
.pn-fill a { display: flex; align-items: center; gap: 8px; padding: 3px 6px; color: var(--text); cursor: pointer; border-radius: 4px; }
.pn-fill a:hover { color: var(--bright); background: var(--sy-raised); }
.pn-fill small { margin-left: auto; }
.pn-person { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.pn-person.on { background: color-mix(in srgb, var(--sy-accent) 8%, transparent); }
.pn-person > small { flex: none; width: 44px; text-align: right; }
.pn-tick { flex: none; display: inline-block; width: 13px; height: 13px; border: 1px solid var(--dim); border-radius: 3px; cursor: pointer; transition: border-color .15s, background .15s; }
.pn-tick:hover { border-color: var(--bright); }
.pn-person.on .pn-tick, .pn-tick.on { border-color: var(--sy-accent); background: var(--sy-accent); }
.pn-who { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; color: var(--text); }
.pn-who:hover > b { color: var(--bright); }
.pn-who > b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-who em, .pn-case em { font-style: normal; font-size: 12px; color: var(--dim); }
.pn-marks { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 10px; font-size: 12px; min-width: 0; }
.pn-marks i { font-style: normal; color: var(--text); white-space: nowrap; }
.pn-marks i.out { color: var(--dim); text-decoration: line-through; }
.pn-bulk { position: sticky; bottom: 10px; z-index: 15; margin-top: 12px; padding: 10px 14px; background: color-mix(in srgb, var(--sy-surface) 82%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 8px; }
.pn-bulk-head, .pn-bulk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.pn-bulk-head b { font-weight: 400; color: var(--bright); }
.pn-bulk-acts { margin-top: 4px; }
.pn-picks { margin: 6px 0; }
.pn-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-height: 26px; }
.pn-pick > .pn-lit { min-width: 84px; }
.pn-lengths { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.pn-head { display: flex; align-items: center; gap: 16px; }
.pn-head h1 { margin: 0; }
.pn-pass { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.pn-pass b { font-weight: 400; min-width: 84px; color: var(--text); }
.pn-pass > .pn-dim { min-width: 62px; }
.pn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.pn-pass .pn-acts { margin-left: auto; }
.pn-acts.wide { margin: 8px 0; gap: 4px 16px; }
.pn-acts.wide input { flex: 1 1 180px; font-size: 13px; }
.pn-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0; }
.pn-form input:not(.pn-days) { flex: 1 1 200px; font-size: 13.5px; }
.pn-form-lines { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pn-form-lines > input { font-size: 13.5px; }
.pn-key { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pn-key > div { min-width: 0; overflow-wrap: anywhere; }
.pn-key b { font-family: var(--sy-mono); font-weight: 400; color: var(--bright); }
.pn-key .pn-acts { flex: none; }
.pn-open { margin-top: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.pn-made { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.pn-made code { font: 12.5px var(--sy-mono); color: var(--bright); overflow-wrap: anywhere; min-width: 0; }
.pn-case { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pn-case a { cursor: pointer; }
.pn-watch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; font-size: 13.5px; }
.pn-watch > span:first-child { color: var(--dim); font-size: 12.5px; }
.pn-watch b { font-weight: 400; color: var(--bright); }
.pn-watch input { flex: 1 1 200px; font-size: 13px; }
.pn-table { width: 100%; font-size: 13.5px; }
.pn-table small { margin-left: 4px; }
.pn-ranks td:not(:first-child), .pn-ranks th:not(:first-child) { width: 56px; text-align: center; }
.pn-ranks td small { display: block; margin: 0; }

.c-kinds { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; align-items: baseline; }
.c-chan { padding: 1px 0; border-bottom: 1px solid transparent; color: var(--dim); font: 12.5px var(--sy-mono); cursor: pointer; }
.c-chan.on { color: var(--c, var(--bright)); border-bottom-color: var(--c, var(--bright)); }
.c-chan:hover { color: var(--bright); }
.c-term { height: min(66vh, 700px); overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #08070c; font: 12.5px/1.5 var(--sy-mono); color: #c9c9d2; scrollbar-width: thin; scrollbar-color: #2a2039 transparent; }
.c-term::-webkit-scrollbar { width: 4px; height: 4px; }
.c-term::-webkit-scrollbar-thumb { background: #2a2039; }
.c-line { padding: 1px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-line:hover { background: rgba(242, 242, 246, .03); }
.c-batch { cursor: pointer; }
.c-arrow { display: inline-block; width: 0; height: 0; margin: 0 8px 1px 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #8a8a96; vertical-align: middle; transition: transform .12s; }
.c-batch:hover .c-arrow { border-left-color: #e9e9ee; }
.c-batch.open .c-arrow { transform: rotate(90deg); }
.c-batched { margin-left: 14px; padding-left: 10px; border-left: 1px solid var(--line); }
.c-time { color: #5c5c66; margin-right: 10px; }
.c-kind { white-space: pre; margin-right: 6px; color: var(--c, #9a9aa6); }
.c-who { color: #d6c26b; margin-right: 8px; cursor: pointer; }
.c-by { color: #8fb3ff; margin-right: 8px; }
.c-what { color: #e9e9ee; margin-right: 8px; }
.c-empty { margin: 0; color: #5c5c66; }
[data-k="sign-ins"], [data-k="sign-outs"] { --c: #7fd6a2; }
[data-k="refused"], [data-k="errors"] { --c: #f07a9a; }
[data-k="passwords"], [data-k="resets used"], [data-k="names"] { --c: #e8b86b; }
[data-k="keys used"], [data-k="invites"] { --c: #c79bff; }
[data-k="passes"], [data-k="mail"] { --c: #8fb3ff; }
[data-k="activity"], [data-k="launcher"] { --c: #6fd3d6; }
[data-k="discord"] { --c: #8c9eff; }
[data-k="staff log"] { --c: #d6c26b; }

@media (max-width: 760px) {
  .pn { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pn-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .pn-cols { grid-template-columns: minmax(0, 1fr); }
  .pn-marks { display: none; }
  .c-term { height: 60vh; }
}

.pg-passes { position: relative; z-index: 7; margin-top: 8px; font-size: 13px; }
.pg-pass { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; padding: 2px 0; }
.pg-pass b { font-weight: 400; min-width: 80px; color: var(--text); }
.pg-pass > span:not(.pg-pass-acts) { min-width: 60px; }
.pg-pass-acts { display: inline-flex; flex-wrap: wrap; gap: 0 10px; }
.pg-pass-acts a { color: var(--dim); cursor: pointer; transition: color .15s; }
.pg-pass-acts a:hover { color: #f07a9a; }