/* ============================================================================
   Capability pages. These reuse the channel skeleton (.ledger, .srf, .beats,
   .lands) and add only the surfaces those pages cannot borrow.
   ========================================================================== */

/* ---- Auto Pilot: what it may touch, and what waits ----------------------- */
.tools{display:grid;gap:.4rem}
.tool-g{border:1px solid var(--border-1);border-radius:var(--r-md);overflow:hidden;background:var(--bg-surface)}
.tool-g summary{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;cursor:pointer;list-style:none;
  font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1)}
.tool-g summary::-webkit-details-marker{display:none}
.tool-g summary .ic{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none;
  background:var(--cs);color:var(--cd)}
.tool-g summary .ic svg,.tool-g summary .ic i{width:11px;height:11px}
.tool-g summary .n{margin-left:auto;font-family:var(--font-mono);font-size:0.6875rem;color:var(--fg-3)}
.tool-g summary .cv{width:12px;height:12px;color:var(--fg-4);transition:transform var(--t-base)}
.tool-g[open] summary .cv{transform:rotate(180deg)}
.tool-l{display:grid;gap:1px;padding:0 .6rem .5rem}
.tool-l div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center;
  padding:.3rem 0;font-family:var(--font-mono);font-size:.625rem;color:var(--fg-2)}
.tool-l .g{font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-bold);
  border-radius:var(--r-pill);padding:.1rem .4rem;white-space:nowrap}
.tool-l .g.read{background:var(--bg-subtle);color:var(--fg-3)}
.tool-l .g.wait{background:var(--violet-soft);color:var(--violet-deep)}

/* role scoping, shown as the redaction it is */
.scope{display:grid;gap:.35rem}
.scope .r{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:.5rem;align-items:center;
  background:var(--bg-subtle);border-radius:var(--r-md);padding:.42rem .6rem;font-size:var(--fs-xs);color:var(--fg-2)}
.scope .r .k{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none}
.scope .r .k svg{width:10px;height:10px;stroke:currentColor;stroke-width:3;fill:none}
.scope .r.yes .k{background:var(--grass-soft);color:var(--grass-deep)}
.scope .r.no .k{background:var(--bg-surface);color:var(--fg-4);box-shadow:0 0 0 1px var(--border-2) inset}
.scope .r.no{color:var(--fg-3)}
.scope .r b{color:var(--fg-1);font-weight:var(--fw-bold)}
.scope .r .who{font-family:var(--font-mono);font-size:0.6875rem;color:var(--fg-3);white-space:nowrap}
.redact{display:inline-block;background:var(--border-2);color:transparent;border-radius:3px;
  padding:0 .2rem;user-select:none}

.langs{display:flex;flex-wrap:wrap;gap:.3rem}
.langs span{border:1px solid var(--border-2);border-radius:var(--r-pill);padding:.2rem .55rem;
  font-size:.625rem;font-weight:var(--fw-bold);color:var(--fg-2);background:var(--bg-surface)}

/* ---- Journeys: the canvas, and the drop-off nobody else shows ------------ */
.jcv{display:grid;gap:.3rem;background:var(--bg-subtle);border-radius:var(--r-md);padding:.6rem}
.jrow{display:grid;grid-template-columns:26px minmax(0,1fr);gap:.55rem;align-items:center;
  background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-md);padding:.45rem .55rem}
.jrow .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none}
.jrow .ic svg,.jrow .ic i{width:12px;height:12px}
.jrow .tx{min-width:0}
.jrow b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.25}
.jrow small{display:block;font-size:0.6875rem;color:var(--fg-3)}
.jrow .cnt{display:grid;gap:.15rem;margin-top:.3rem}
.jrow .fun{height:5px;border-radius:99px;background:var(--border-2);overflow:hidden}
.jrow .fun i{display:block;height:100%;border-radius:99px;background:var(--c);width:var(--w,100%)}
.jrow .num{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:0.625rem;
  letter-spacing:.05em;color:var(--fg-3)}
.jrow .num .lost{color:var(--coral-text);font-weight:var(--fw-bold)}
.jrow.leak{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral-soft)}
.jlink{height:.5rem;width:2px;background:var(--border-3);border-radius:2px;margin-left:12px}
.jnote{display:flex;align-items:flex-start;gap:.4rem;background:var(--coral-soft);border-radius:var(--r-md);
  padding:.45rem .55rem;font-size:var(--fs-xs);color:var(--fg-1);line-height:1.45}
.jnote svg{width:13px;height:13px;flex:none;margin-top:.1rem;color:var(--coral-text)}

/* trigger menu */
.trigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}
.trigs span{display:flex;align-items:center;gap:.4rem;background:var(--bg-subtle);border-radius:var(--r-md);
  padding:.4rem .55rem;font-size:var(--fs-xs);color:var(--fg-2);font-weight:var(--fw-semibold)}
.trigs span svg,.trigs span i{width:12px;height:12px;flex:none;color:var(--fg-3)}
.trigs span .bi{fill:currentColor}

/* ---- One inbox: the queue rules each platform imposes -------------------- */
.wins{display:grid;gap:.35rem}
.win{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:.55rem;align-items:center;
  background:var(--bg-subtle);border-radius:var(--r-md);padding:.42rem .6rem}
.win .bi{width:16px;height:16px}
.win b{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);display:block}
.win small{font-size:0.6875rem;color:var(--fg-3)}
.win .t{font-family:var(--font-mono);font-size:0.6875rem;font-weight:var(--fw-bold);
  border-radius:var(--r-pill);padding:.15rem .5rem;white-space:nowrap}
.win .t.ok{background:var(--grass-soft);color:var(--grass-deep)}
.win .t.warn{background:var(--sun-soft);color:var(--sun-deep)}
.win .t.shut{background:var(--bg-surface);color:var(--fg-3);box-shadow:0 0 0 1px var(--border-2) inset}

/* assignment strip */
.assign{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.assign .av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:0.625rem;font-weight:var(--fw-bold);flex:none}
.assign .lbl{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg-3);margin-right:.15rem}

:root[data-theme="dark"] .jcv{background:var(--bg-subtle)}
@media (min-width:520px){.trigs{grid-template-columns:repeat(3,minmax(0,1fr))}}