/* ------------------------------------------------------------
   admin.smro.bot  SMR access admin page

   Tokens from the brand book (brand/book/index.html, sheet 6) and the
   live page (site/index.html): near-black ground #0f0e0c, screen cream
   #f5f1e8 / wood #e9dcc3, amber accent #ff8a3d (Direction C's one
   accent, dark mode), rust #b1490f for the pressed state, #e2685c for
   the destructive action (the brand book's dark-mode "bad").

   Type follows Direction C and the brand book's type scale (sheet 7):
   Montserrat for the title and section labels, system mono for body
   and data. The site serves one Montserrat file,
   /assets/fonts/Montserrat-ExtraBold.woff2 (site/assets/fonts/); the
   stack below uses it and falls back to a locally installed Montserrat,
   then system sans. No other weight is served, so every display element
   on this page is weight 800.
   ------------------------------------------------------------ */

@font-face{
  font-family:"Mont XB";
  src:url("/assets/fonts/Montserrat-ExtraBold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

:root{
  --ground:#0f0e0c;
  --panel:#15130f;
  --panel-2:#1c1914;
  --text:#e9dcc3;
  --text-strong:#f5f1e8;
  --text-soft:rgba(233,220,195,.64);
  --text-faint:rgba(233,220,195,.42);
  --line:rgba(233,220,195,.14);
  --line-strong:rgba(233,220,195,.34);
  --accent:#ff8a3d;
  --accent-press:#b1490f;
  --bad:#e2685c;

  --display:"Mont XB","Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --edge:1rem;
  --tap:44px;
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100svh;
  background:var(--ground);
  color:var(--text);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:48rem){
  :root{ --edge:2rem; }
  body{ font-size:15px; }
}

h1,h2,h3,p,dl,dd,dt,figure{ margin:0; }
button,input,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--accent); color:#000; }

/* Keyboard focus: amber ring on everything interactive. */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

[hidden]{ display:none !important; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---------------- page frame ---------------- */

.page{
  max-width:76rem;
  margin:0 auto;
  padding:0 var(--edge) 4rem;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:4rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--line);
}
.ident{
  display:flex;
  align-items:center;
  gap:.8rem;
  color:var(--text-strong);
}
.ident .mark{ width:26px; height:auto; display:block; flex:none; }
.ident .mark svg{ display:block; width:100%; height:auto; fill:currentColor; }
.ident h1{
  font-family:var(--display);
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.2;
}
.ident h1 small{
  display:block;
  font-family:var(--mono);
  font-weight:400;
  font-size:.66rem;
  letter-spacing:.18em;
  color:var(--text-soft);
  margin-top:.2rem;
}

.who{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
}
.who .email{
  font-size:.8rem;
  color:var(--text-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:30rem){
  .who .email{ display:none; }
}

/* ---------------- signed-out view ---------------- */

.gate{
  min-height:calc(100svh - 8rem);
  display:grid;
  place-content:center;
  justify-items:center;
  text-align:center;
  gap:1.4rem;
  padding:3rem 0;
}
.gate .mark{ width:64px; color:var(--text-strong); }
.gate .mark svg{ display:block; width:100%; height:auto; fill:currentColor; }
.gate h2{
  font-family:var(--display);
  font-weight:800;
  font-size:1rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-strong);
}
/* The sign-in button's box (the sign-in itself happens on the pool's
   hosted UI, see admin.js). */
.gsi-slot{ min-height:44px; display:grid; place-items:center; }

/* ---------------- sections ---------------- */

.section{ padding:2rem 0 0; }
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--line-strong);
}
.section-head h2{
  font-family:var(--display);
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.section-head .count{
  font-size:.72rem;
  color:var(--text-faint);
  letter-spacing:.06em;
  margin-left:.6rem;
}

/* Private pages: links and one line. */
.pages-body{ padding:.9rem 0 0; display:grid; gap:.5rem; }
.pages-body .links{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.pages-body .links a{
  display:inline-block;
  min-height:var(--tap);
  line-height:var(--tap);
  color:var(--text-strong);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:.2em;
  overflow-wrap:anywhere;
}
.pages-body .links a:hover{ color:var(--accent); }
.pages-body .line{ color:var(--text-soft); }

/* One plain line for loading, empty and error states. An error gets a
   rule on the left; the message text is the API's own, verbatim. */
.status{
  padding:.9rem 0;
  color:var(--text-soft);
  font-size:.9em;
}
.status.is-error{
  color:var(--text-strong);
  padding-left:.9rem;
  border-left:3px solid var(--bad);
  margin-top:.9rem;
  word-break:break-word;
}
.status:empty{ display:none; }

/* ---------------- buttons ---------------- */

.btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:var(--tap);
  min-width:var(--tap);
  padding:0 1rem;
  border:1px solid var(--line-strong);
  border-radius:3px;
  background:transparent;
  color:var(--text-strong);
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.btn:hover{ border-color:var(--text); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#000;
}
.btn-primary:hover{ background:#ffa066; border-color:#ffa066; }
.btn-primary:active{ background:var(--accent-press); border-color:var(--accent-press); }

.btn-danger{ border-color:var(--bad); color:var(--bad); }
.btn-danger:hover{ background:var(--bad); color:#000; }
.btn-danger:disabled:hover{ background:transparent; color:var(--bad); }

.btn-quiet{ border-color:transparent; color:var(--text-soft); }
.btn-quiet:hover{ color:var(--text-strong); border-color:var(--line-strong); }

/* ---------------- data lists ---------------- */

.list{ list-style:none; margin:0; padding:0; }

/* Column header, desktop only. */
.cols{
  display:none;
  padding:.6rem 0 .45rem;
  border-bottom:1px solid var(--line);
  color:var(--text-faint);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.row{
  display:grid;
  gap:.35rem .9rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line);
}
.row:last-child{ border-bottom:none; }

/* Phone: each cell carries its own label. An empty note shows nothing. */
.cell{ min-width:0; overflow-wrap:anywhere; }
.cell.note:empty{ display:none; }
.cell::before{
  content:attr(data-label);
  display:block;
  color:var(--text-faint);
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:.1rem;
}
.cell.name{ color:var(--text-strong); font-weight:600; }
.cell.name::before{ display:none; }
.cell .by{ color:var(--text-soft); display:block; }
.cell.actions{ display:flex; gap:.5rem; flex-wrap:wrap; padding-top:.4rem; }
.cell.actions::before{ display:none; }
.cell.actions .btn{ flex:1 1 auto; }

/* Users: email, groups, status, note, last changed, actions. */
.row.is-disabled .cell.name{ color:var(--text-soft); text-decoration:line-through; }
@media (min-width:64rem){
  .cols{ display:grid; }
  .accounts .cols, .accounts .row{
    grid-template-columns:minmax(12rem,1.3fr) minmax(7rem,.8fr) minmax(7rem,.7fr) minmax(8rem,1fr) minmax(12rem,1fr) 12rem;
    align-items:start;
  }
  .accounts .row{ padding:.85rem 0; }
  .cell::before{ display:none; }
  .cell.note:empty{ display:block; }
  .cell.actions{ padding-top:0; justify-content:flex-end; }
  .cell.actions .btn{ flex:none; }
}

/* Audit: when, admin, action, user name, detail. */
@media (min-width:64rem){
  .audit .cols, .audit .row{
    grid-template-columns:minmax(11rem,1fr) minmax(11rem,1.1fr) minmax(7rem,.7fr) minmax(8rem,.9fr) minmax(12rem,1.8fr);
    align-items:start;
  }
  .audit .row{ padding:.7rem 0; }
}
.audit .row{ color:var(--text); }
.audit .cell.action{ color:var(--text-strong); }

/* ---------------- dialogs ---------------- */

dialog{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:4px;
  padding:0;
  width:min(100% - 2rem, 30rem);
  max-height:calc(100svh - 2rem);
  margin:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
dialog::backdrop{ background:rgba(0,0,0,.72); }
.dlg{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  padding:1.4rem var(--edge) 1.5rem;
}
@media (min-width:48rem){ .dlg{ padding:1.6rem 1.8rem 1.8rem; } }
.dlg h2{
  font-family:var(--display);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.dlg .lead{ color:var(--text-strong); }
.dlg .lead b{ color:var(--text-strong); font-weight:600; }
.dlg-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:flex-end;
  padding-top:.4rem;
}
.dlg-actions .btn{ flex:1 1 8rem; }
@media (min-width:30rem){ .dlg-actions .btn{ flex:0 0 auto; } }

/* ---------------- form fields ---------------- */

.field{ display:grid; gap:.4rem; }
.field > label, .field > .label{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.field .hint{ font-size:.82em; color:var(--text-soft); }
.field .hint.is-bad{ color:var(--bad); }
.input{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-height:var(--tap);
  padding:.55rem .8rem;
  background:var(--ground);
  color:var(--text-strong);
  border:1px solid var(--line-strong);
  border-radius:3px;
  font-family:var(--mono);
  font-size:1rem;
  line-height:1.4;
}
.input::placeholder{ color:var(--text-faint); }
.input:focus-visible{ outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
.input[aria-invalid="true"]{ border-color:var(--bad); }
textarea.input{ min-height:5.2rem; resize:vertical; }

.choice{ display:grid; gap:.4rem; }
.choice label{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:var(--tap);
  padding:0 .2rem;
  cursor:pointer;
  color:var(--text-strong);
}
.choice input[type="radio"]{
  -webkit-appearance:none;
  appearance:none;
  width:18px; height:18px;
  margin:0;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:var(--ground);
  display:grid;
  place-content:center;
  flex:none;
}
.choice input[type="radio"]::before{
  content:"";
  width:9px; height:9px;
  border-radius:50%;
  background:var(--accent);
  transform:scale(0);
  transition:transform 100ms ease;
}
.choice input[type="radio"]:checked{ border-color:var(--accent); }
.choice input[type="radio"]:checked::before{ transform:scale(1); }

/* The password, shown once. */
.secret{
  display:grid;
  gap:.6rem;
}
.secret .box{
  font-family:var(--mono);
  font-size:1.15rem;
  line-height:1.45;
  letter-spacing:.02em;
  color:var(--text-strong);
  background:var(--ground);
  border:1px solid var(--accent);
  border-radius:3px;
  padding:.9rem 1rem;
  white-space:nowrap;      /* one line, never wrapped: a break could read as part of the value */
  overflow-x:auto;
  user-select:all;
  -webkit-user-select:all;
}
.secret .note{ color:var(--text-strong); }
.secret .copied{ color:var(--text-soft); font-size:.85em; min-height:1.4em; }

/* ---------------- motion ---------------- */

.enter{ animation:enter 420ms cubic-bezier(.22,.61,.2,1) both; }
@keyframes enter{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}