/* ══════════════════════════════════════════════════════════════════
   Backstage Desk — staff feedback triage.
   Layered on styles.css: inherits :root tokens, base type, .btn, .eyebrow.
   Only admin-only components live here. No new brand colours or type
   families beyond two semantic states the public site never needed.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --go:#7d9b6a;        /* cleared / done */
  --go-fill:#4e6a42;
  --stop:#d4785c;      /* rejected / failed, text on dark */
  --stop-fill:#8e3a26;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

body.admin{
  background:var(--ink);
  color:var(--paper);
  font-size:16px;
  min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
}
.admin :focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px;border-radius:2px}
.admin ::selection{background:var(--brass-hi);color:var(--ink)}
[hidden]{display:none !important}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

/* ══ GATE ═══════════════════════════════════════════════════════════ */
.gate-wrap{min-height:100dvh;display:grid;place-items:center;padding:var(--gut)}
.gate{
  width:min(410px,100%);
  background:var(--ink-2);
  border:1px solid var(--ink-3);
  border-radius:var(--radius);
  padding:clamp(1.6rem,5vw,2.4rem);
}
.gate__mark{width:176px;height:110px;aspect-ratio:1.6/1;object-fit:contain;display:block;margin:0 auto 1.7rem}
.gate__title{
  font-family:var(--display);font-weight:600;font-size:1.6rem;
  text-align:center;color:var(--white);letter-spacing:-.015em;margin-bottom:.2rem;
}
.gate__sub{text-align:center;color:var(--muted-d);font-size:.85rem;margin-bottom:1.7rem}

.d-field{margin-bottom:1.05rem}
.d-field label{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-d);margin-bottom:.45rem;
}
.inwrap{position:relative;display:flex}
.admin input[type=text],
.admin input[type=password],
.admin input[type=email],
.admin input[type=tel],
.admin textarea{
  width:100%;min-width:0;
  font-family:var(--sans);font-size:16px;line-height:1.45;
  color:var(--paper);background:#0a0907;
  border:1px solid var(--ink-3);border-radius:var(--radius);
  padding:.8rem .9rem;
  transition:border-color .18s ease,background-color .18s ease;
}
.admin input::placeholder,.admin textarea::placeholder{color:#6f6a5e}
.admin input:hover,.admin textarea:hover{border-color:#2f2a22}
.admin input:focus,.admin textarea:focus{border-color:var(--brass-hi);background:#0d0b08;outline:none}
.admin input[aria-invalid=true]{border-color:var(--stop)}
.peek{
  position:absolute;right:4px;top:4px;bottom:4px;width:56px;
  display:grid;place-items:center;background:none;border:0;border-radius:3px;
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);
}
.peek:hover{color:var(--brass-hi)}
.err{display:block;color:var(--stop);font-size:.82rem;margin-top:.4rem}
.err:empty{display:none}
.gate__err{
  background:rgba(142,58,38,.18);border:1px solid rgba(142,58,38,.6);
  border-radius:var(--radius);padding:.65rem .8rem;margin-bottom:1rem;
  color:#eaa892;font-size:.85rem;
}
.btn--full{width:100%;justify-content:center;margin-top:.4rem;min-height:48px}
/* the site's own primary-CTA treatment (.nav__cta): ink on brass-hi.
   .btn--brass ships white-on-brass, which is under 4.5:1 at this size. */
.gate .btn--brass{background:var(--brass-hi);color:var(--ink);transition:background-color .18s ease}
.gate .btn--brass:hover{background:var(--white)}
.gate .btn--brass[disabled]{opacity:.55;cursor:progress}
.gate__foot{
  margin-top:1.4rem;text-align:center;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#6f6a5e;
}
.gate__foot a{color:#6f6a5e;border-bottom:1px solid var(--ink-3)}
.gate__foot a:hover{color:var(--muted-d)}

/* ══ TOPBAR ═════════════════════════════════════════════════════════ */
.deskbar{
  position:sticky;top:0;z-index:60;
  background:rgba(12,11,9,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-3);
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.75rem var(--gut);
}
.deskbar__brand{display:flex;align-items:center;gap:.8rem;margin-right:auto;min-width:0}
.deskbar__brand img{width:77px;height:48px;aspect-ratio:1.6/1;object-fit:contain;display:block;flex:none}
.deskbar__brand span{
  font-family:var(--display);font-size:1.05rem;font-weight:600;
  color:var(--white);letter-spacing:-.01em;white-space:nowrap;
}
.sync{font-family:var(--mono);font-size:.7rem;color:#6f6a5e;white-space:nowrap}
.sync b{color:var(--muted-d);font-weight:400}
.deskbar__tools{display:flex;gap:.5rem;flex:none}
.tool{
  background:transparent;border:1px solid var(--ink-3);border-radius:var(--radius);
  color:var(--muted-d);font-family:var(--sans);
  font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  height:38px;padding:0 .9rem;display:inline-flex;align-items:center;gap:.45rem;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.tool:hover{color:var(--white);border-color:var(--brass-lo);background:var(--ink-2)}
.tool[disabled]{opacity:.5;cursor:progress}
.tool.spin .glyph{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.desk{max-width:1480px;margin-inline:auto;padding:0 var(--gut) 4rem}

/* ══ TALLY ══════════════════════════════════════════════════════════ */
.tally{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--ink-3);border:1px solid var(--ink-3);border-radius:var(--radius);
  overflow:hidden;margin:1.5rem 0 .5rem;
}
.tally div{background:var(--ink-2);padding:.8rem .9rem}
.tally .k{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#6f6a5e}
.tally .v{
  font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4.5vw,2.6rem);
  line-height:1;margin-top:.3rem;font-variant-numeric:tabular-nums;color:var(--muted-d);
}
.tally .lead-stat .v{color:var(--brass-hi)}

/* ══ MOBILE LANE SWITCH ═════════════════════════════════════════════ */
.switch{
  display:none;gap:1px;background:var(--ink-3);
  border:1px solid var(--ink-3);border-radius:var(--radius);overflow:hidden;margin:1rem 0 .3rem;
}
.switch a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--ink-2);color:var(--muted-d);
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.85rem .3rem;min-height:46px;text-align:center;
}
.switch a[aria-current=true]{background:#1c1812;color:var(--brass-hi);box-shadow:inset 0 -2px 0 var(--brass-hi)}
.switch .n{font-family:var(--mono);font-size:.72rem;font-variant-numeric:tabular-nums;color:#6f6a5e}
.switch a[aria-current=true] .n{color:var(--brass-hi)}

/* ══ LANES ══════════════════════════════════════════════════════════ */
.lanes{display:grid;gap:1.15rem;margin-top:1.2rem;grid-template-columns:1.3fr 1fr .85fr;align-items:start}
.lane{min-width:0}
.lane__head{
  display:flex;align-items:baseline;gap:.7rem;
  padding-bottom:.55rem;margin-bottom:.9rem;border-bottom:1px solid var(--ink-3);
}
.lane__head h2{
  font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.7rem);
  color:var(--muted-d);letter-spacing:-.015em;
}
.lane__head .hint{font-size:.76rem;color:#6f6a5e}
.lane__head .n{margin-left:auto;font-family:var(--mono);font-size:.78rem;color:#6f6a5e;font-variant-numeric:tabular-nums}
#lane-pending .lane__head{border-bottom-color:var(--brass-lo)}
#lane-pending .lane__head h2{color:var(--brass-hi);font-style:italic}
.d-stack{display:flex;flex-direction:column;gap:.7rem}

/* ══ CARD ═══════════════════════════════════════════════════════════ */
.fb{
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);
  padding:.85rem .95rem .8rem;
}
/* the signature: a brass cue rule only on what still needs a decision */
#lane-pending .fb{border-left:2px solid var(--brass);background:linear-gradient(90deg,rgba(198,154,86,.055),transparent 40%),var(--ink-2)}
.fb.busy{opacity:.5;pointer-events:none}
.fb.landing{animation:land .3s cubic-bezier(.2,.7,.3,1)}
@keyframes land{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fb__top{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem}
.d-chip,.badge{
  font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.25rem .5rem;border-radius:2px;border:1px solid var(--ink-3);
  color:var(--muted-d);background:#12100c;
}
.d-chip.cat{color:var(--brass-hi);border-color:rgba(198,154,86,.4);background:rgba(198,154,86,.08)}
.b-approved,.b-claimed{color:var(--muted-d);border-color:#332d24;background:#161310}
.b-executing{color:var(--brass-hi);border-color:rgba(198,154,86,.5);background:rgba(198,154,86,.12)}
.b-done{color:var(--go);border-color:rgba(125,155,106,.42);background:rgba(125,155,106,.09)}
.b-failed{color:var(--stop);border-color:rgba(212,120,92,.45);background:rgba(142,58,38,.14)}
.b-rejected{color:#6f6a5e;border-color:var(--ink-3);background:#12100c}
.age{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:#6f6a5e;font-variant-numeric:tabular-nums;white-space:nowrap}
.fb__body{
  font-size:.95rem;line-height:1.5;color:var(--paper);
  margin-bottom:.55rem;white-space:pre-wrap;overflow-wrap:anywhere;
}
.fb.flight .fb__body,.fb.done .fb__body{font-size:.9rem;color:#d6cfc1}
.fb__who{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;color:#6f6a5e;
}
.fb__who .u{color:var(--muted-d)}
.fb__who .id{margin-left:auto}
.d-note{
  margin-top:.55rem;padding:.5rem .65rem;border-radius:2px;
  background:#12100c;border-left:2px solid var(--ink-3);
  font-size:.82rem;line-height:1.5;color:var(--muted-d);overflow-wrap:anywhere;
}
.d-note b{
  display:block;font-family:var(--sans);font-size:.6rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#6f6a5e;margin-bottom:.2rem;
}
.d-note.ok{border-left-color:var(--go)}
.d-note.bad{border-left-color:var(--stop-fill)}

/* ══ ACTIONS ════════════════════════════════════════════════════════ */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.75rem}
.act{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--radius);
  min-height:44px;padding:.6rem .5rem;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.act-yes{background:var(--brass);color:var(--ink)}
.act-yes:hover{background:var(--brass-hi)}
.act-no{background:transparent;color:var(--stop);border-color:rgba(142,58,38,.6)}
.act-no:hover{background:rgba(142,58,38,.22);color:#f0b6a2}
.act[disabled]{opacity:.5;cursor:not-allowed}

.reject-box{margin-top:.7rem;border-top:1px solid var(--ink-3);padding-top:.7rem}
.reject-box label{
  display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-d);margin-bottom:.4rem;
}
.reject-box textarea{min-height:64px;resize:vertical}
.reject-acts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.55rem}
.act-confirm{background:var(--stop-fill);color:var(--cream);border-color:var(--stop-fill)}
.act-confirm:hover{background:#a4472f}
.act-cancel{background:transparent;color:var(--muted-d);border-color:var(--ink-3)}
.act-cancel:hover{color:var(--white);border-color:#3a332a}

/* ══ STATES ═════════════════════════════════════════════════════════ */
.empty{border:1px dashed #2a251d;border-radius:var(--radius);padding:1.6rem 1rem;text-align:center}
.empty .ico{display:block;font-size:1.5rem;line-height:1;margin-bottom:.5rem;opacity:.85}
.empty .t{font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--muted-d)}
.empty .s{font-size:.8rem;color:#6f6a5e;margin-top:.25rem}
.skel{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);padding:.85rem .95rem}
.skel i{display:block;border-radius:2px;background:linear-gradient(90deg,#1c1811,#272119,#1c1811);background-size:220% 100%;animation:sheen 1.5s ease-in-out infinite}
.skel .r1{height:10px;width:36%;margin-bottom:.7rem}
.skel .r2{height:13px;width:100%;margin-bottom:.35rem}
.skel .r3{height:13px;width:74%;margin-bottom:.7rem}
.skel .r4{height:10px;width:44%}
@keyframes sheen{0%{background-position:120% 0}100%{background-position:-120% 0}}
.wire{
  border:1px solid rgba(142,58,38,.6);background:rgba(142,58,38,.14);
  border-radius:var(--radius);padding:.9rem 1rem;margin-top:1.2rem;
}
.wire .t{font-family:var(--display);font-weight:600;font-size:1.15rem;color:#eaa892}
.wire .s{font-size:.85rem;color:#dda993;margin:.3rem 0 .7rem;line-height:1.5}

.toast{
  position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:80;
  background:var(--ink-2);border:1px solid #332d24;border-radius:var(--radius);
  padding:.65rem 1rem;font-size:.85rem;color:var(--paper);
  max-width:min(430px,calc(100vw - 1.75rem));
  box-shadow:0 16px 40px -18px #000;
}
.toast.bad{border-color:rgba(142,58,38,.7);color:#eaa892}
.toast.ok{border-color:rgba(125,155,106,.5)}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .lanes{grid-template-columns:1fr 1fr}
  #lane-done{grid-column:1 / -1}
}
@media (max-width:760px){
  .deskbar{gap:.5rem .7rem;padding:.6rem var(--gut)}
  .deskbar__brand img{width:64px;height:40px}
  .deskbar__brand span{font-size:.95rem}
  .sync{width:100%;order:3;font-size:.66rem}
  .tool .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tool{height:44px}
  #refresh .glyph{font-size:1.05rem;color:var(--paper)}
  .tally{display:none}            /* the lane switch already carries these counts */
  .switch{display:flex}
  .lanes{display:block;margin-top:.9rem}
  .lane{display:none}
  .lane.on{display:block}
  .lane__head{display:none}
}
@media (max-width:640px){
  /* the wordmark plus both tools overflow one row here; the logo already names the desk */
  .deskbar__brand span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .admin *,.admin *::before,.admin *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;
  }
}
a.tool{text-decoration:none}

/* The keyboard shortcut the reason box answers to. */
.reject-hint { font: 400 12px/1.4 var(--sans); color: #8b8577; margin: 6px 0 0; }

/* Thumb-sized targets on a phone. */
@media (max-width: 700px) {
  .tool { height: 44px; }
  .peek { width: 62px; }
}