/* Ban appeals, in the pcdev.info world (2026-10-07).
   Black and white on hairline rules. The world sheet (#pcd-world, last in appeal.html's
   <head>) carries tokens, base type, buttons, fields, tabs, pills and the confirm dialog;
   this file only lays out what is particular to appeals. Class names match appeal.js. */
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;display:flex;flex-direction:column}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:0 var(--gut);height:60px}
.brand img{width:26px;height:26px}
.brand b,.brand i{display:block}
.brand i{margin-top:1px}
.navright{display:flex;align-items:center;gap:12px}
.navcta,.navghost{min-height:36px !important;padding:0 14px !important;font-size:.84375rem !important}
.navghost{color:var(--ink-2) !important}

/* page */
.wrap{position:relative;width:100%;max-width:820px;margin:0 auto;padding:108px var(--gut) 88px;flex:1}
.h1,.h2{margin-bottom:12px}
.ctx{margin:-2px 0 12px;font-size:.875rem;color:var(--ink-3)}
.ctx .mono{color:var(--ink-2)}
footer{padding:24px max(var(--gut),calc((100% - 820px)/2 + var(--gut))) 32px;text-align:left}

/* signed out: the question, one sentence, one door */
.gate{padding:clamp(24px,6vh,64px) 0 24px}
.gate .h1{font-size:clamp(2.5rem,6vw,4rem);letter-spacing:-.045em;line-height:.98;max-width:16ch}
.gate .sub{margin:18px 0 30px}
.gate .btn svg:not(.arr){width:17px;height:17px;flex:none}

/* the ban on record: the one boxed thing on the page, because it is the subject */
.banbox{border:1px solid var(--rule-strong);border-radius:2px;padding:16px 18px;margin-bottom:24px}
.banbox .k{font-size:.8125rem;color:var(--ink-3);margin-bottom:6px}
.banbox .v{font-size:.96875rem;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.banbox .w{font-size:.8125rem;color:var(--ink-3);margin-top:10px}
.nob{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;margin-bottom:24px}
.nob b{font-weight:600}
.nob .sub{margin-top:6px}

/* the form */
.block{margin-top:4px}
.q{padding:20px 0;border-bottom:1px solid var(--rule-2)}
.q:first-child{padding-top:4px}
.q:last-child{border-bottom:0}
.q label{font-size:.9375rem !important;font-weight:600 !important;color:var(--ink) !important;margin-bottom:9px}
.q .n{font-size:.8125rem;color:var(--ink-3);margin-bottom:5px}
.q .req{color:var(--ink-3);margin-left:4px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.sectitle{margin:8px 0 0 !important}

/* lists: ruled rows */
.list{border-top:1px solid var(--rule);margin:20px 0 28px}
.sectitle + .list{margin-top:0;border-top:0}
.row{display:flex;align-items:center;gap:14px;padding:14px 4px 14px 0;border-bottom:1px solid var(--rule-2);cursor:pointer;
  transition:background-color var(--fast) var(--ease)}
.row:hover{background:rgba(255,255,255,.022)}
.row > img,.row > .ph{width:34px;height:34px;flex:none;border-radius:2px;object-fit:cover}
.ph{display:grid;place-items:center;min-width:34px;padding:0 4px;border:1px solid var(--rule);font:500 .78125rem/1 var(--mono);color:var(--ink-2)}
.row .meta{flex:1;min-width:0;display:grid;gap:3px;font-size:.84375rem;color:var(--ink-3)}
.row .meta b{font-size:.9375rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;overflow-wrap:anywhere}
.row .meta span{overflow-wrap:anywhere}
.cnt{margin-left:7px;font-size:.75rem;color:var(--ink-3)}
/* An appeal that is open is waiting on the team: outline, not fill. (On the apply page
   p-open means a role is hiring, which is why the shared sheet fills it.) */
.wrap .pill.p-open{background:transparent !important;color:var(--ink) !important;border:1px solid var(--rule-strong) !important}

/* one appeal */
.tab.back{display:inline-flex !important;align-items:center;gap:8px}
.tab.back svg{width:14px;height:14px}
.note-block{margin-bottom:20px}
.note-block .h3{margin-bottom:6px}
.ans{padding:16px 0;border-bottom:1px solid var(--rule-2);min-width:0}
.ans:first-child{padding-top:4px}
.ans:last-child{border-bottom:0}
.qq{font-size:.90625rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.aa{font-size:.9375rem;line-height:1.65;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.aa em{color:var(--ink-3)}
.decide{margin-top:22px}
button.ok,button.no{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:2px;
  font:500 .875rem/1 var(--sans);cursor:pointer;transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
button.ok{background:var(--ink);border:1px solid var(--ink);color:var(--bg) !important}
button.ok:hover{background:#fff;border-color:#fff}
button.no{background:transparent;border:1px dashed var(--rule-strong);color:var(--ink) !important}
button.no:hover{border-style:solid;border-color:var(--ink)}

@media (max-width:640px){
  .wrap{padding:92px var(--gut) 64px}
  .gate .btn{width:100%}
}