/* ---------------------------------------------------------------
   The desk: the moderation side's work-tool style.
   Deliberately NOT the public style guide (recorded exemption,
   DESIGN-LOG 2026-08-30): system font, 16px base, dense tables,
   light and dark mode, no themes. Consolidated from the approved
   drawings moderation-desk.html and moderation-screens.html.
   --------------------------------------------------------------- */
:root{
  --bg:#ffffff; --panel:#f6f7f8; --line:#dfe3e6; --ink:#16191c;
  --dim:#59636b; --accent:#175d73; --alert:#a3271f; --warn:#7d5200;
  --rowhover:#eef4f6; --chip:#e7edf0; --mine:#175d73; --ok:#1d6b4f;
}
html[data-mode="dark"]{
  --bg:#15181b; --panel:#1d2226; --line:#2f363c; --ink:#e8ecef;
  --dim:#9daab3; --accent:#63b6cf; --alert:#e8776b; --warn:#dfa945;
  --rowhover:#222a2f; --chip:#283137; --mine:#63b6cf; --ok:#5fc39b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1560px;margin:0 auto;padding:0 24px}

/* chrome */
.top{display:flex;align-items:center;gap:20px;padding:13px 24px;border-bottom:1px solid var(--line);
     position:sticky;top:0;background:var(--bg);z-index:5}
.brand{font-weight:700;letter-spacing:.02em;font-size:17px}
.brand a{color:var(--ink)}
.brand span{color:var(--dim);font-weight:500;margin-left:8px}
.spacer{flex:1}
.who{color:var(--dim);font-size:14.5px}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);
     border-radius:5px;padding:6px 13px;font:inherit;font-size:14.5px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.danger{color:var(--alert);border-color:var(--line)}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* Deny (problem #9, 2026-09-07): a button that opens the reason box below
   it; the refusal itself needs the second button inside that box. */
summary.btn{display:inline-block;list-style:none;cursor:pointer}
summary.btn::-webkit-details-marker{display:none}
.denyform{display:none;margin-top:15px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--alert)}
.card:has(details.deny[open]) .denyform{display:block}

/* layout */
.cols{display:flex;gap:0;align-items:flex-start}
.side{width:248px;flex:0 0 248px;padding:18px 18px 40px 0;border-right:1px solid var(--line);min-height:80vh}
.main{flex:1 1 auto;min-width:0;padding:18px 0 60px 24px}
.sidehead{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
          font-weight:700;margin:20px 0 6px 0}
.q{display:flex;justify-content:space-between;padding:4px 8px;border-radius:5px;cursor:pointer;font-size:15.5px;color:var(--ink)}
.q:hover{background:var(--rowhover);text-decoration:none}
.q.on{background:var(--chip);font-weight:600}
.q .n{color:var(--dim);font-variant-numeric:tabular-nums}
.two{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.cola{flex:1 1 560px;min-width:0}
.colb{flex:1 1 320px;max-width:380px}

/* headings and tables */
h1{font-size:24px;margin:0 0 3px 0}
.sub{color:var(--dim);font-size:15px;margin-bottom:16px}
table{border-collapse:collapse;width:100%;font-size:15.5px;table-layout:fixed}
th{text-align:left;font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
   color:var(--dim);padding:0 10px 8px 10px;border-bottom:1px solid var(--line);
   white-space:nowrap;user-select:none}
th a{color:inherit;display:inline-block}
th a:hover{color:var(--ink);text-decoration:none}
th.sortable a::after{content:"\2195";opacity:0;margin-left:5px;font-size:11px}   /* every column sorts */
th.sortable a:hover::after{opacity:.45}
th.sorted a{color:var(--ink)} th.sorted a::after{content:"\25BE";opacity:1}
th.sorted.rev a::after{content:"\25B4";opacity:1}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;overflow:hidden}
tr:hover td{background:var(--rowhover)}
.ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--dim);white-space:nowrap}
a.ref{color:var(--accent)}
.type{white-space:nowrap;font-weight:600;font-size:14.5px}
.subject .ex{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subject .where{display:block;color:var(--dim);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.due.over{color:var(--alert);font-weight:600}
.due.soon{color:var(--warn)}
.due.held{color:var(--dim);font-style:italic}
.status{font-size:14px;border:1px solid var(--line);background:var(--panel);
        border-radius:11px;padding:1px 10px;white-space:nowrap;display:inline-block}
.status.esc{border-color:var(--warn);color:var(--warn)}
.status.app{border-color:var(--accent);color:var(--accent)}
.status.pend{border-color:var(--dim);color:var(--dim)}
.status.new{font-weight:600}
.status.bad{border-color:var(--alert);color:var(--alert)}
.status.warn{border-color:var(--warn);color:var(--warn)}
.status.ok{border-color:var(--ok);color:var(--ok)}
.dim{color:var(--dim)}
.me{color:var(--mine);font-weight:600}
.unassigned{color:var(--dim);font-style:italic}

/* cards and detail */
.card{border:1px solid var(--line);border-radius:7px;padding:17px 19px;margin-bottom:16px;background:var(--bg)}
.card h2{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 11px 0}
.card h2 .lite{text-transform:none;letter-spacing:0;font-weight:400}
.quote{background:var(--panel);border-left:3px solid var(--line);padding:13px 15px;border-radius:0 5px 5px 0;
       font-size:16.5px;line-height:1.62;white-space:pre-wrap;overflow-wrap:break-word}
.facts{display:grid;grid-template-columns:150px 1fr;row-gap:8px;column-gap:14px;font-size:15.5px}
.facts .k{color:var(--dim)}
.note{border-bottom:1px solid var(--line);padding:12px 0}
.note:last-of-type{border-bottom:none}
.note .meta{color:var(--dim);font-size:14px;margin-bottom:3px}
.note .body{white-space:pre-wrap;overflow-wrap:break-word}
textarea,input[type=text],input[type=password],input[type=number],select{
    width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);
    border-radius:5px;padding:10px 12px;font:inherit;font-size:15.5px}
textarea{resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
select{padding:5px 9px;font-size:14.5px}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.actions form{display:contents}
.hint{color:var(--dim);font-size:14px;margin-top:7px}
.banner{border:1px solid var(--warn);border-left-width:4px;background:var(--panel);
        border-radius:5px;padding:11px 15px;font-size:15px;margin-bottom:16px}
.banner.bad{border-color:var(--alert)}
.banner.ok{border-color:var(--ok)}
.label{font-size:14.5px;color:var(--dim);margin:0 0 5px 0}
.fieldrow{margin-bottom:15px}
.signin{max-width:400px;margin:70px auto}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.35em;
     font-size:24px;text-align:center}
.pagehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}