/* ==========================================================================
   Cleverotter control panel
   Same identity as the marketing site — monochrome, hairlines, mono labels,
   tight grotesque. Adapted for a tool: denser, scannable, state visible at a
   glance rather than read.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --ink:#0B0B0C;
  --dim:#6E6E73;
  --rule:rgba(11,11,12,.14);
  --rule-mid:rgba(11,11,12,.3);
  --wash:rgba(11,11,12,.032);
  --slab:#0B0B0C;
  --slab-ink:#FFFFFF;

  /* Semantic state. Deliberately the only colour in the interface, and used
     only inside status pills and notices — never as decoration. An operator
     scanning a list of releases has to see "failed" without reading it, and
     shape alone cannot carry that at pill size. */
  --ok:#186A3B;
  --ok-bg:rgba(24,106,59,.09);
  --warn:#8A5300;
  --warn-bg:rgba(138,83,0,.09);
  --bad:#A31B12;
  --bad-bg:rgba(163,27,18,.08);

  /* Kept because a couple of templates reference it inline. In a monochrome
     interface the accent is simply the ink. */
  --accent:var(--ink);

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --grot:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --label:11px;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#0B0B0C;--ink:#F2F2F3;--dim:#8B8B92;
    --rule:rgba(242,242,243,.16);--rule-mid:rgba(242,242,243,.34);
    --wash:rgba(242,242,243,.05);
    --slab:#F2F2F3;--slab-ink:#0B0B0C;
    --ok:#5FD08D;--ok-bg:rgba(95,208,141,.12);
    --warn:#E0A53F;--warn-bg:rgba(224,165,63,.12);
    --bad:#FF7A70;--bad-bg:rgba(255,122,112,.12);
  }
}

/* ------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--grot);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-mid)}
a:hover{border-bottom-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
code,kbd{font-family:var(--mono);font-size:.88em;background:var(--wash);border:1px solid var(--rule);padding:.1em .35em}

/* ------------------------------------------------------------------- header */
header.top{
  position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:22px;
  height:56px;padding:0 clamp(16px,3.4vw,32px);
}
header.top .brand{
  font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.01em;
  border-bottom:0;white-space:nowrap;
}
header.top nav{margin-left:auto;display:flex;gap:20px;align-items:center}
header.top nav a{
  font-family:var(--mono);font-size:var(--label);letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid transparent;padding-block:5px;
}
header.top nav a:hover,header.top nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
header.top nav .who{
  font-family:var(--mono);font-size:var(--label);letter-spacing:.08em;color:var(--dim);
  max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:640px){header.top nav .who{display:none}}

/* ------------------------------------------------------------------- main */
main{max-width:1060px;margin:0 auto;padding:clamp(28px,4vw,52px) clamp(16px,3.4vw,32px) 96px}
main.main--auth{max-width:430px;padding-top:clamp(44px,9vw,110px)}

h1{font-size:clamp(28px,3.4vw,42px);font-weight:900;letter-spacing:-.035em;line-height:1;margin:0 0 10px}
h2{
  font-family:var(--mono);font-size:var(--label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:400;margin:46px 0 12px;
  padding-bottom:9px;border-bottom:1px solid var(--ink);
}
h1+p.sub{margin:0 0 30px}
p.sub{color:var(--dim);margin:0 0 26px;max-width:60ch}
.muted{color:var(--dim)}
.small{font-size:13px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------- panel */
.panel{border:1px solid var(--rule);padding:clamp(16px,2vw,22px);background:transparent}
.panel.muted{color:var(--dim)}
.stack{display:grid;gap:14px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row>h1,.row>div:first-child{flex:1;min-width:0}
.inline{display:inline}

/* ------------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse;margin:0 0 4px;font-size:14px}
thead th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);font-weight:400;text-align:left;
  padding:0 14px 9px 0;border-bottom:1px solid var(--ink);white-space:nowrap;
}
thead th:last-child{padding-right:0}
tbody td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
tbody td:last-child{padding-right:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--wash)}
td.mono,.mono{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------- admin */
.nav-admin{position:relative}
/* A hairline before the admin links, so it reads as a separate area of the
   product rather than another page everyone has. */
.nav-admin:first-of-type::before{
  content:"";position:absolute;left:-11px;top:2px;bottom:2px;width:1px;background:var(--rule);
}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px}
.filters input[type=search]{width:auto;min-width:min(300px,100%);flex:1;padding:9px 12px}
.filters select{width:auto;padding:9px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.filters__clear{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid transparent;
}
.filters__clear:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* Destructive actions stay folded away. A one-click Block sitting in every row
   of a long table is a mis-click waiting to happen, and opening the control is
   also where the reason gets typed — which the audit log requires anyway. */
details.act summary{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--ink);padding:7px 11px;cursor:pointer;
}
details.act summary::before{content:none}
details.act summary:hover{background:var(--ink);color:var(--paper)}
details.act[open] summary{background:var(--ink);color:var(--paper)}
details.act .act__form{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;
  margin-top:10px;padding:12px;border:1px solid var(--rule);background:var(--wash);
  text-align:left;
}
details.act .act__form input{min-width:min(260px,100%);flex:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------- pager */
.pager{
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
}
.pager__range,.pager__at{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);margin:0;font-variant-numeric:tabular-nums;
}
.pager__range--only{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule)}
.pager__nav{display:flex;gap:10px;align-items:center}
.pager__btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--ink);padding:7px 13px;color:var(--ink);
  transition:background .16s,color .16s;
}
.pager__btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Kept in the flow rather than hidden, so the control does not move between
   pages and the reader's pointer stays where they left it. */
.pager__btn.is-off{border-color:var(--rule);color:var(--dim);cursor:default}
.pager__btn.is-off:hover{background:transparent;color:var(--dim)}

/* ------------------------------------------------------------------- tags */
.tag{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;padding:3px 8px;border:1px solid var(--rule-mid);
  color:var(--dim);white-space:nowrap;vertical-align:.08em;
}
.tag.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.tag.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.tag.bad{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}

/* ------------------------------------------------------------------- buttons */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--mono);font-size:var(--label);letter-spacing:.12em;text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;border-bottom:1px solid var(--ink);
  transition:background .16s,color .16s;
}
button:hover,.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button.primary,.btn.primary{background:var(--ink);color:var(--paper)}
button.primary:hover,.btn.primary:hover{background:transparent;color:var(--ink)}
button.small,.btn.small{padding:7px 11px;font-size:10px}
button.danger,.btn.danger{border-color:var(--bad);color:var(--bad)}
button.danger:hover,.btn.danger:hover{background:var(--bad);color:var(--paper);border-color:var(--bad)}
button:disabled{opacity:.45;cursor:not-allowed}

/* ------------------------------------------------------------------- forms */
.field{margin-bottom:18px}
.field label{
  display:block;font-family:var(--mono);font-size:var(--label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px;
}
input[type=text],input[type=email],input[type=password],input[type=url],textarea,select{
  width:100%;font-family:var(--grot);font-size:15px;color:var(--ink);
  background:transparent;border:1px solid var(--rule-mid);padding:11px 13px;
  transition:border-color .16s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
textarea{min-height:112px;font-family:var(--mono);font-size:13px;line-height:1.6;resize:vertical}
.field .row{gap:8px;flex-wrap:nowrap}

/* ------------------------------------------------------------------- notices */
.notice{
  border:1px solid var(--ink);border-left-width:3px;padding:13px 16px;margin:0 0 26px;
  font-size:14px;
}
.notice.bad{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}
.errors{
  list-style:none;margin:0 0 4px;padding:13px 16px;
  border:1px solid var(--bad);border-left-width:3px;background:var(--bad-bg);color:var(--bad);font-size:14px;
}
.errors li{margin:0}
.errors li+li{margin-top:6px}

/* ------------------------------------------------------------------- command blocks */
pre.cmd{
  font-family:var(--mono);font-size:13px;line-height:1.65;
  background:var(--wash);border:1px solid var(--rule);
  padding:14px 16px;margin:0;overflow-x:auto;white-space:pre;color:var(--ink);
}

details summary{cursor:pointer}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+ ";font-family:var(--mono)}
details[open] summary::before{content:"\2013 "}

/* ------------------------------------------------------------------- auth pages */
.auth-mark{
  display:block;text-align:center;font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,38px);letter-spacing:-.035em;margin:0 0 34px;border-bottom:0;
}
main.main--auth h1{font-size:26px;text-align:center}
main.main--auth p.sub{text-align:center;margin-bottom:28px}
main.main--auth .panel{max-width:none!important}
main.main--auth .row{justify-content:space-between}

/* ------------------------------------------------------------------- footer */
footer.foot{
  border-top:1px solid var(--rule);padding:20px clamp(16px,3.4vw,32px) 34px;
  display:flex;flex-wrap:wrap;gap:8px 24px;
}
footer.foot span,footer.foot a{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
footer.foot a{border-bottom:1px solid transparent}
footer.foot a:hover{color:var(--ink);border-bottom-color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}