/* ==========================================================================
   BBN OPERATIONS CONSOLE
   --------------------------------------------------------------------------
   Deliberately NOT the Member Portal. The member surface is warm cream and
   generous; Operations is an instrument -- dense, calm, commanding. It reuses
   the BBN palette so it is unmistakably the same organisation, but inverts the
   shell so the active context is obvious within one second of looking at it.

   Rules held here:
   - No giant KPI tiles. A number earns display space only when the number IS
     the work to do. "197 pending" is not work; "0 reviewable" is.
   - Rows over cards. Scanning twenty items must not cost twenty cards.
   - Every signal is PROBLEM + CONTEXT + ACTION, in that reading order.
   - Empty state means "nothing needs attention", never "it failed to load".
     Those are different states and they look different.
   ========================================================================== */

.bbnops{
  --ops-rail:        #07493B;
  --ops-rail-edge:   #0A5A45;
  --ops-rail-text:   #E1F5EE;
  --ops-rail-muted:  #9CC9BC;
  --ops-canvas:      #F1EDE3;
  --ops-surface:     #FFFFFF;
  --ops-row-alt:     #FBF7EF;
  --ops-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  display:grid; grid-template-columns:228px minmax(0,1fr);
  min-height:100vh; background:var(--ops-canvas);
  font-family:var(--bbn-font); color:var(--bbn-text);
  font-size:var(--bbn-size-support); line-height:var(--bbn-leading-body);
}
.bbnops *{box-sizing:border-box}

/* ---- rail ---------------------------------------------------------------- */
.bbnops__rail{
  background:var(--ops-rail); color:var(--ops-rail-text);
  border-right:1px solid var(--ops-rail-edge);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.bbnops__brand{
  display:flex; flex-direction:column; gap:2px; padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:none; border-left:0; border-right:0; border-top:0;
  color:inherit; font:inherit; text-align:left; cursor:pointer; width:100%;
}
.bbnops__brand b{font-size:15px; font-weight:650; letter-spacing:.14em; text-transform:uppercase}
.bbnops__brand span{font-size:11px; color:var(--ops-rail-muted); letter-spacing:.08em}
.bbnops__nav{padding:10px 8px; display:flex; flex-direction:column; gap:2px}
.bbnops__nav a{
  display:block; padding:8px 10px; border-radius:6px; text-decoration:none;
  color:var(--ops-rail-text); font-size:13.5px; font-weight:500;
}
.bbnops__nav a:hover{background:rgba(255,255,255,.08)}
.bbnops__nav a[aria-current="page"]{background:rgba(255,255,255,.14); font-weight:600}
.bbnops__railfoot{margin-top:auto; padding:12px; border-top:1px solid rgba(255,255,255,.12)}
.bbnops__ctxlabel{
  display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ops-rail-muted); margin-bottom:5px;
}
.bbnops__ctx{
  width:100%; padding:7px 8px; border-radius:6px; font:inherit; font-size:13px;
  background:rgba(255,255,255,.1); color:var(--ops-rail-text);
  border:1px solid rgba(255,255,255,.18);
}
.bbnops__ctx option{color:#1a1a1a}
.bbnops__visit{
  display:block; margin-top:10px; font-size:12.5px; color:var(--ops-rail-muted);
  text-decoration:none;
}
.bbnops__visit:hover{color:#fff; text-decoration:underline}

/* ---- main ---------------------------------------------------------------- */
.bbnops__main{min-width:0; padding:22px 26px 56px}
.bbnops__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:4px;
}
.bbnops__h1{font-size:21px; font-weight:650; margin:0; letter-spacing:-.01em}
.bbnops__stamp{font-family:var(--ops-mono); font-size:11.5px; color:var(--bbn-text-muted)}
.bbnops__lede{margin:0 0 20px; color:var(--bbn-text-secondary); font-size:14px; max-width:68ch}

.bbnops__sect{margin:26px 0 0}
.bbnops__secthead{
  display:flex; align-items:center; gap:10px; margin:0 0 10px;
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bbn-text-muted);
}
.bbnops__secthead::after{content:""; flex:1; height:1px; background:var(--bbn-border)}

/* ---- signal: PROBLEM + CONTEXT + ACTION ---------------------------------- */
.bbnops__signal{
  display:grid; grid-template-columns:3px minmax(0,1fr) auto;
  gap:0 14px; align-items:center;
  background:var(--ops-surface); border:1px solid var(--bbn-border);
  border-radius:8px; margin-bottom:8px; overflow:hidden;
}
.bbnops__sev{align-self:stretch; background:var(--bbn-border-strong)}
.bbnops__signal[data-sev="critical"] .bbnops__sev{background:var(--bbn-error)}
.bbnops__signal[data-sev="warn"]     .bbnops__sev{background:var(--bbn-warning)}
.bbnops__signal[data-sev="info"]     .bbnops__sev{background:var(--bbn-info)}
.bbnops__body{padding:12px 0; min-width:0}
.bbnops__problem{font-size:14.5px; font-weight:600; margin:0 0 3px}
.bbnops__context{margin:0; color:var(--bbn-text-secondary); font-size:13px}
.bbnops__context b{font-family:var(--ops-mono); font-weight:600; color:var(--bbn-text)}
.bbnops__act{padding:12px 14px 12px 0; white-space:nowrap}

.bbnops__btn{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:7px 13px; border-radius:6px;
  background:var(--bbn-brand); color:#fff; border:1px solid var(--bbn-brand-deep);
}
.bbnops__btn:hover{background:var(--bbn-brand-deep)}
.bbnops__btn--quiet{background:transparent; color:var(--bbn-brand); border-color:var(--bbn-border-strong)}
.bbnops__btn--quiet:hover{background:var(--bbn-hover-tint)}

/* ---- diagnostic table ---------------------------------------------------- */
.bbnops__tablewrap{
  background:var(--ops-surface); border:1px solid var(--bbn-border);
  border-radius:8px; overflow:auto;
}
.bbnops__table{width:100%; border-collapse:collapse; font-size:13.5px}
.bbnops__table caption{
  text-align:left; padding:12px 14px; font-size:13px; color:var(--bbn-text-secondary);
  border-bottom:1px solid var(--bbn-border);
}
.bbnops__table th,.bbnops__table td{
  padding:8px 14px; text-align:left; border-bottom:1px solid var(--bbn-border);
}
.bbnops__table th{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bbn-text-muted); font-weight:600; background:var(--bbn-surface-sunken);
  position:sticky; top:0;
}
.bbnops__table tbody tr:nth-child(even){background:var(--ops-row-alt)}
.bbnops__table tbody tr:last-child td{border-bottom:0}
.bbnops__num{font-family:var(--ops-mono); text-align:right; font-variant-numeric:tabular-nums}
.bbnops__num--bad{color:var(--bbn-error); font-weight:650}
.bbnops__num--ok{color:var(--bbn-success); font-weight:650}

.bbnops__tag{
  display:inline-block; padding:1px 7px; border-radius:999px;
  font-size:11.5px; font-weight:600; border:1px solid;
}
.bbnops__tag--bad {background:var(--bbn-error-surface);   border-color:var(--bbn-error-border);   color:var(--bbn-error)}
.bbnops__tag--warn{background:var(--bbn-warning-surface); border-color:var(--bbn-warning-border); color:var(--bbn-warning)}
.bbnops__tag--ok  {background:var(--bbn-success-surface); border-color:var(--bbn-success-border); color:var(--bbn-success)}

/* ---- states: three genuinely different things ---------------------------- */
.bbnops__state{
  background:var(--ops-surface); border:1px solid var(--bbn-border);
  border-radius:8px; padding:26px; text-align:center; color:var(--bbn-text-secondary);
}
.bbnops__state h3{margin:0 0 5px; font-size:15px; color:var(--bbn-text)}
.bbnops__state p{margin:0; font-size:13.5px}
.bbnops__state--error{background:var(--bbn-error-surface); border-color:var(--bbn-error-border)}
.bbnops__state--denied{background:var(--bbn-warning-surface); border-color:var(--bbn-warning-border)}
.bbnops__skel{height:60px; border-radius:8px; margin-bottom:8px;
  background:linear-gradient(90deg,#efe9dd 25%,#f7f2e8 37%,#efe9dd 63%);
  background-size:400% 100%; animation:bbnops-shimmer 1.2s ease-in-out infinite;
}
@keyframes bbnops-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---- focus: visible on every interactive element ------------------------- */
.bbnops a:focus-visible,.bbnops button:focus-visible,.bbnops select:focus-visible{
  outline:2px solid var(--bbn-focus-ring); outline-offset:2px; border-radius:6px;
}
.bbnops__rail a:focus-visible,.bbnops__rail button:focus-visible,.bbnops__rail select:focus-visible{
  outline-color:#fff;
}
.bbnops__skip{
  position:absolute; left:-9999px; top:8px; padding:9px 14px; border-radius:6px;
  background:var(--bbn-brand); color:#fff; z-index:20; text-decoration:none;
}
.bbnops__skip:focus{left:8px}

/* ---- responsive: rail becomes a top bar ---------------------------------- */
@media (max-width:860px){
  .bbnops{grid-template-columns:minmax(0,1fr)}
  .bbnops__rail{position:static; height:auto; flex-direction:column; border-right:0;
    border-bottom:1px solid var(--ops-rail-edge)}
  .bbnops__nav{flex-direction:row; overflow-x:auto; padding:8px}
  .bbnops__nav a{white-space:nowrap}
  .bbnops__railfoot{margin-top:0; display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
  .bbnops__main{padding:18px var(--bbn-pad-page-mobile) 48px}
  .bbnops__signal{grid-template-columns:3px minmax(0,1fr); }
  .bbnops__act{grid-column:2; padding:0 0 12px}
}
@media (prefers-reduced-motion:reduce){ .bbnops__skel{animation:none} }

/* ---- drill-down drawer ---------------------------------------------------
   Aggregates answer "what needs attention". The drawer answers "which ones",
   without losing the Overview behind it -- the brief's "do not force five page
   changes to understand one problem".
   -------------------------------------------------------------------------- */
.bbnops__scrim{
  position:fixed; inset:0; background:rgba(7,73,59,.42);
  opacity:0; pointer-events:none; transition:opacity .16s ease; z-index:30;
}
.bbnops__scrim[data-open="1"]{opacity:1; pointer-events:auto}
.bbnops__drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(560px, 100vw);
  background:var(--ops-surface); border-left:1px solid var(--bbn-border);
  box-shadow:-12px 0 32px rgba(63,41,27,.14);
  transform:translateX(100%); transition:transform .18s ease;
  z-index:31; display:flex; flex-direction:column;
}
.bbnops__drawer[data-open="1"]{transform:translateX(0)}
.bbnops__drawerhead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--bbn-border);
}
.bbnops__drawerhead h2{margin:0; font-size:16px; font-weight:650}
.bbnops__drawerhead p{margin:3px 0 0; font-size:12.5px; color:var(--bbn-text-muted)}
.bbnops__close{
  font:inherit; font-size:20px; line-height:1; cursor:pointer;
  background:transparent; border:1px solid var(--bbn-border); border-radius:6px;
  width:32px; height:32px; color:var(--bbn-text-secondary); flex:none;
}
.bbnops__close:hover{background:var(--bbn-hover-tint)}
.bbnops__drawerbody{padding:14px 18px 24px; overflow:auto; flex:1}
.bbnops__withheld{
  margin:12px 0 0; padding:9px 12px; border-radius:6px; font-size:12.5px;
  background:var(--bbn-surface-sunken); border:1px solid var(--bbn-border);
  color:var(--bbn-text-secondary);
}
@media (prefers-reduced-motion:reduce){
  .bbnops__drawer,.bbnops__scrim{transition:none}
}
@media (max-width:560px){ .bbnops__drawer{width:100vw} }

/* ---- ownership activation workbench -------------------------------------- */
/* Candidate strength is carried by the tag's own colour, not by a number. The
   three states are deliberately not a scale: NONE is the ordinary case, not a
   failure, so it is neutral rather than red. */
.bbnops__tag[data-cand="exact"]   {background:var(--bbn-success-surface); border-color:var(--bbn-success-border); color:var(--bbn-success)}
.bbnops__tag[data-cand="possible"]{background:var(--bbn-warning-surface); border-color:var(--bbn-warning-border); color:var(--bbn-warning)}
.bbnops__tag[data-cand="none"]    {background:var(--bbn-hover-tint); border-color:var(--bbn-border); color:var(--bbn-text-secondary)}

.bbnops__h2{margin:26px 0 10px; font-size:15px; color:var(--bbn-text)}

.bbnops__dl{
  margin:0 0 14px; display:grid; grid-template-columns:auto 1fr;
  gap:4px 14px; font-size:13.5px;
}
.bbnops__dl dt{color:var(--bbn-text-secondary)}
.bbnops__dl dd{margin:0; color:var(--bbn-text); overflow-wrap:anywhere}

.bbnops__label{display:block; margin:14px 0 5px; font-size:12.5px; font-weight:600}
.bbnops__input{
  font:inherit; font-size:13.5px; width:100%; box-sizing:border-box;
  padding:8px 10px; border-radius:6px;
  border:1px solid var(--bbn-border-strong); background:var(--ops-surface); color:var(--bbn-text);
}
.bbnops__input:focus-visible{outline:2px solid var(--bbn-brand); outline-offset:1px}

/* One result per row. A disabled pick still SHOWS, with its reason, because a
   staff member who searches a name and sees nothing concludes the account does
   not exist — which would be the wrong conclusion and the wrong next action. */
.bbnops__pick{
  font:inherit; text-align:left; width:100%; cursor:pointer; display:block;
  margin:0 0 6px; padding:8px 10px; border-radius:6px;
  border:1px solid var(--bbn-border); background:var(--ops-surface); color:var(--bbn-text);
}
.bbnops__pick:hover:not(:disabled){background:var(--bbn-hover-tint); border-color:var(--bbn-brand)}
.bbnops__pick:disabled{cursor:not-allowed; opacity:.72}
.bbnops__pick b{display:block; font-size:13.5px}
.bbnops__pick span{display:block; font-size:12.5px; color:var(--bbn-text-secondary); overflow-wrap:anywhere}
.bbnops__pick em{display:block; margin-top:3px; font-size:12px; font-style:normal; color:var(--bbn-warning)}

.bbnops__btn:disabled{opacity:.55; cursor:not-allowed}
.bbnops__btn:disabled:hover{background:var(--bbn-brand)}

/* ==============================================================================================
   MEMBER EXPERIENCE GALLERY + MEMBERS
   ----------------------------------------------------------------------------------------------
   Built from the same tokens as the rest of the console, so the gallery reads as part of
   Operations rather than as a bolted-on media page. Every status here is carried by a word as
   well as a colour: `data-tone` tints the pill, the pill's text says what it means, and the
   sentence under the card repeats it for anyone who cannot see either.
   ============================================================================================== */

.bbnops__expgrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-top: 1.25rem;
}

.bbnops__expcard {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1px solid var(--bbn-border);
  border-radius: 12px;
  background: #fff;
}
.bbnops__expcard h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; color: var(--bbn-text); }
.bbnops__expwho   { margin: .15rem 0 0; color: var(--bbn-text-secondary); font-size: .9rem; }
.bbnops__expwhat  { margin: 0; color: var(--bbn-text); line-height: var(--bbn-leading-body); }
.bbnops__expnote  { margin: 0; color: var(--bbn-text-muted); font-size: var(--bbn-size-support); }

.bbnops__expmeta,
.bbnops__viewmeta { display: grid; gap: .5rem 1.25rem; margin: 0; }
.bbnops__expmeta  { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.bbnops__viewmeta { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: 1rem; }
.bbnops__expmeta dt, .bbnops__viewmeta dt {
  margin: 0; font-size: var(--bbn-size-support); color: var(--bbn-text-muted);
}
.bbnops__expmeta dd, .bbnops__viewmeta dd { margin: .1rem 0 0; color: var(--bbn-text); }

/* The pill never carries meaning alone — see the header note. */
.bbnops__pill {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-size: var(--bbn-size-support); font-weight: 600; border: 1px solid transparent;
}
.bbnops__pill[data-tone="ok"] {
  background: var(--bbn-success-surface); border-color: var(--bbn-success-border); color: var(--bbn-success);
}
.bbnops__pill[data-tone="warn"] {
  background: var(--bbn-warning-surface); border-color: var(--bbn-warning-border); color: var(--bbn-text);
}
.bbnops__pill[data-tone="unknown"] {
  background: var(--bbn-surface-sunken); border-color: var(--bbn-border); color: var(--bbn-text-secondary);
}

.bbnops__expacts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.bbnops__expacts .bbnops__btn span { font-weight: 400; color: var(--bbn-text-muted); }

/* ---- viewer ---------------------------------------------------------------------------- */
.bbnops__viewer  { display: flex; flex-direction: column; gap: .75rem; }
.bbnops__viewnav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.bbnops__viewpos { color: var(--bbn-text-secondary); font-size: var(--bbn-size-support); }
.bbnops__viewimg {
  display: block; width: 100%; height: auto; border: 1px solid var(--bbn-border);
  border-radius: 10px; background: var(--bbn-surface-sunken);
}
.bbnops__video {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: #000; border: 1px solid var(--bbn-border-strong);
}
.bbnops__chapters { margin: .75rem 0 0; color: var(--bbn-text-secondary); font-size: var(--bbn-size-support); }

/* ---- plain-language summary ------------------------------------------------------------- */
.bbnops__plain { margin: 1rem 0 1.25rem; padding-left: 1.1rem; }
.bbnops__plain li { margin: .3rem 0; color: var(--bbn-text); line-height: var(--bbn-leading-body); }

/* ---- phone and tablet -------------------------------------------------------------------
   Staff check this during events, so the gallery stacks and the media take the full width.
   Nothing may scroll sideways. */
@media (max-width: 640px) {
  .bbnops__expgrid  { grid-template-columns: 1fr; gap: .85rem; }
  .bbnops__expcard  { padding: .95rem var(--bbn-pad-page-mobile); }
  .bbnops__expacts  { flex-direction: column; align-items: stretch; }
  .bbnops__expacts .bbnops__btn { width: 100%; text-align: center; }
  .bbnops__viewnav  { flex-wrap: wrap; }
  .bbnops__viewmeta { grid-template-columns: 1fr 1fr; }
}