/* Admin — a plain operator's surface. It is deliberately unglamorous: rows,
   verbs, and no chrome that pretends to be a product.
   Panel mode escapes its tile with position:fixed, so the floating admin costs
   one orb at rest and never reserves grid space. */
.cap-admin.widget{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;min-height:0}
.cap-admin-head{display:flex;align-items:center;gap:8px}
.cap-admin-head b{font-size:max(var(--touch-text-floor,0rem),.6875rem);letter-spacing:.1em;text-transform:var(--label-case,uppercase);
  color:var(--label-ink,var(--ink-2))}
.cap-admin-head button{margin-left:auto;border:none;background:none;color:var(--ink-3);
  font-size:.875rem;cursor:pointer;padding:0 4px}
.cap-admin-tabs{display:flex;gap:3px;flex-wrap:wrap}
.cap-admin-tab{font-size:max(var(--touch-text-floor,0rem),.6875rem);font-weight:600;padding:4px 9px;border-radius:var(--r-pill);
  border:var(--rule) solid var(--hairline);background:var(--card);color:var(--ink-2);cursor:pointer}
.cap-admin-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cap-admin-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.cap-admin-group{font-size:max(var(--touch-text-floor,0rem),.59375rem);letter-spacing:.12em;text-transform:var(--label-case,uppercase);
  color:var(--ink-3);font-weight:700;margin:8px 0 3px}
/* The row wraps and the title keeps a basis: a private page carries up to ten
   actions, and with a zero basis the title was shrunk to nothing in the 380px
   panel. Now the actions drop to their own line instead. */
.cap-admin-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;border:var(--rule) solid var(--hairline);
  border-radius:var(--r-sm);background:var(--card)}
.cap-admin-rowmain{flex:1 1 5rem;min-width:0}
.cap-admin-rowmain .t{font-size:max(var(--touch-text-floor,0rem),.78125rem);font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cap-admin-rowmain .s{font-size:max(var(--touch-text-floor,0rem),.65625rem);color:var(--ink-3);font-family:var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-admin-acts{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.cap-admin-act{height:24px;padding:0 9px;border:var(--rule) solid var(--hairline-2);
  border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink);font-size:max(var(--touch-text-floor,0rem),.65625rem);
  font-weight:600;cursor:pointer;white-space:nowrap}
.cap-admin-act.danger{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.cap-admin-act.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cap-admin-sw{width:30px;height:16px;border-radius:100px;background:var(--hairline-2);border:none;
  position:relative;cursor:pointer;padding:0;flex:none}
.cap-admin-sw::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;
  border-radius:50%;background:#fff;transition:left .18s}
.cap-admin-sw.on{background:var(--accent)}
.cap-admin-sw.on::after{left:16px}
.cap-admin-empty{font-size:max(var(--touch-text-floor,0rem),.75rem);color:var(--ink-3);font-style:italic;padding:4px 0}
.cap-admin-new{display:flex;gap:6px;margin-top:8px}
.cap-admin-install input{flex:1;min-width:0;height:28px;border:var(--rule) solid var(--hairline-2);
  border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink);padding:0 9px;font-size:max(var(--touch-text-floor,0rem),.71875rem)}

/* Panel mode: one orb at rest, a card when asked. */
/* Bottom-left, but *outside* the rail: the sidebar's account block owns that
   corner now, and a floating orb sitting on top of it hides the one control
   that says who you are. The rail's width is a root token, so this follows the
   fold without measuring anything. */
.cap-admin.panel{position:fixed;left:calc(var(--rail-w,150px) + 14px);bottom:18px;
  z-index:60;display:block;height:auto}
.cap-admin-orb{width:44px;height:44px;border-radius:50%;border:var(--rule) solid var(--hairline-2);
  background:var(--card);color:var(--ink);font-size:max(var(--touch-text-floor,0rem),.6875rem);font-weight:700;cursor:pointer;
  box-shadow:var(--lift);letter-spacing:.04em}
.cap-admin.panel.open .cap-admin-orb{background:var(--ink);color:var(--paper)}
.cap-admin-panel{position:absolute;left:0;bottom:54px;width:min(380px,86vw);max-height:70vh;
  display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--card);
  border:var(--rule) solid var(--hairline-2);border-radius:var(--r);box-shadow:var(--lift)}
.cap-admin-panel[hidden]{display:none}

/* Destructive confirm: a floating stack card over the panel. Absolute so the
   tab bar and list stay put; lifts above them with the same --lift as the panel. */
.cap-admin-confirm{position:absolute;left:0;right:0;z-index:5;display:flex; margin: 0 10px;
  align-items:center;gap:10px;padding:10px 12px;background:var(--card);color:var(--ink);
  border:var(--rule) solid var(--hairline-2);border-radius:var(--r-sm);box-shadow:var(--lift)}
.cap-admin-confirm-msg{margin:0;flex:1;min-width:0;font-size:12.5px;line-height:1.4;font-weight:600}
.cap-admin-confirm-acts{display:flex;gap:6px;flex:none}
.cap-admin-confirm-acts .cap-admin-act{height:28px;padding:0 12px;font-size:11.5px}
.cap-admin-confirm-acts .cap-admin-act:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Under 700px the rail is a bar across the top, so the orb returns to the
   corner.
 *
 * Known and unfixed: on a phone that corner is panel content, and the orb lands
 * on the program's own source and quality controls. There is no free corner at
 * 390px to move it to — the honest fix is docking the shell's floating orbs into
 * the shell's mobile bar, which is shell work rather than this surface's, and
 * guessing at a nudge here would only move the overlap somewhere less obvious. */
@media (max-width:700px){
  .cap-admin.panel{left:0;bottom:0;z-index:70}
  .cap-admin.panel .cap-admin-orb{display:none}
  .cap-admin.panel .cap-admin-panel{position:fixed;left:12px;right:12px;
    bottom:calc(12px + var(--inset-bottom));width:auto;max-height:78dvh}
}

/* Icon-only chrome in the admin: same weight and colour as the text buttons it
   sits beside, so a row of mixed controls still reads as one row. */
.cap-admin-iconbtn{display:grid;place-items:center;width:26px;height:22px;padding:0;
  border:var(--rule) solid var(--hairline);border-radius:var(--r-sm);
  background:transparent;color:var(--ink-2);cursor:pointer}
.cap-admin-iconbtn:hover{color:var(--ink);border-color:var(--hairline-2)}
.cap-admin-iconbtn svg{width:15px;height:15px}

/* The author's visual choices: a labelled select beside the row's actions. A
   profile is the unit a creator delivers — widgets and the world and backdrop
   they sit on — so these sit with the other authored settings, not apart. */
.cap-admin-field{display:flex;flex-direction:column;gap:2px}
.cap-admin-field-k{font-size:max(var(--touch-text-floor,0rem),.5625rem);letter-spacing:.1em;text-transform:var(--label-case,uppercase);
  color:var(--ink-3);font-weight:700}
.cap-admin-select{height:24px;max-width:158px;padding:0 6px;
  border:var(--rule) solid var(--hairline-2);border-radius:var(--r-sm);
  background:var(--paper-2);color:var(--ink);font:inherit;font-size:var(--fs-10-5);
  cursor:pointer}
.cap-admin-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cap-admin-input{height:24px;width:min(200px,52vw);padding:0 8px;
  border:var(--rule) solid var(--hairline-2);border-radius:var(--r-sm);
  background:var(--paper-2);color:var(--ink);font:inherit;font-size:max(var(--touch-text-floor,0rem),.6875rem)}
.cap-admin-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Models section. The notice says plainly that these settings are not used
   yet; errors sit under their input (full row width) and beside the save
   button; the key hint is advisory only, so it reads quieter than an error. */
.cap-admin-note{padding:6px 8px;border:var(--rule) solid var(--hairline-2);border-radius:var(--r-sm);
  background:var(--paper-2);color:var(--ink-2);font-size:max(var(--touch-text-floor,0rem),.6875rem);line-height:1.4}
.cap-admin-err{flex-basis:100%;color:var(--accent);font-size:max(var(--touch-text-floor,0rem),.65625rem);line-height:1.4}
.cap-admin-new .cap-admin-err{flex-basis:auto;align-self:center}
.cap-admin-hint{flex-basis:100%;color:var(--ink-3);font-size:max(var(--touch-text-floor,0rem),.65625rem)}
.cap-admin-err[hidden],.cap-admin-hint[hidden]{display:none}
.cap-admin-act:disabled,.cap-admin-select:disabled{opacity:.5;cursor:not-allowed}

/* Provider & model quick-select pills: minimum-input, minimum-click ergonomics.
   Uses Law of Proximity (tight within-group chip spacing, clear separation between
   provider bar, model chips, and credential box) and Von Restorff isolation on the
   active provider/model pill. */
.cap-admin-pills{display:flex;flex-wrap:wrap;gap:5px;width:100%;margin-top:4px}
.cap-admin-pill{height:25px;padding:0 10px;border:var(--rule) solid var(--hairline-2);
  border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);
  font-size:max(var(--touch-text-floor,0rem),.665rem);font-weight:600;cursor:pointer;
  transition:background .16s cubic-bezier(.22,1,.36,1),color .16s cubic-bezier(.22,1,.36,1),border-color .16s cubic-bezier(.22,1,.36,1),transform .12s cubic-bezier(.22,1,.36,1)}
.cap-admin-pill:hover{color:var(--ink);border-color:var(--ink-3)}
.cap-admin-pill:active{transform:scale(.97)}
.cap-admin-pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cap-admin-chip{height:22px;padding:0 8px;border:var(--rule) solid var(--hairline);
  border-radius:var(--r-sm);background:var(--card);color:var(--ink-2);font-family:var(--mono);
  font-size:max(var(--touch-text-floor,0rem),.625rem);cursor:pointer;
  transition:background .16s cubic-bezier(.22,1,.36,1),color .16s cubic-bezier(.22,1,.36,1),border-color .16s cubic-bezier(.22,1,.36,1)}
.cap-admin-chip:hover{color:var(--ink);border-color:var(--hairline-2)}
.cap-admin-chip.on{background:color-mix(in oklab,var(--ink) 12%,var(--paper-2));color:var(--ink);
  border-color:var(--ink);font-weight:700}
.cap-admin-row.is-editing{border-color:var(--ink);background:color-mix(in oklab,var(--ink) 4%,var(--card))}
.cap-admin-editor{flex-basis:100%;width:100%;margin-top:6px;padding:8px;display:flex;flex-direction:column;gap:5px;
  border-top:var(--rule) solid var(--hairline-2);border-radius:var(--r-sm);background:var(--paper-2)}
.cap-admin-editor .cap-admin-row{background:var(--card);border-color:var(--hairline)}
.cap-admin-editor .cap-admin-input{width:min(240px,56vw)}
.cap-admin-editor-block{display:flex;flex-direction:column;gap:4px;padding:4px 2px}
.cap-admin-editor-k{font-size:max(var(--touch-text-floor,0rem),.65625rem);font-weight:700;color:var(--ink-2)}
.cap-admin-badge{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r-pill);
  font-size:.59375rem;font-weight:700;letter-spacing:.03em;border:var(--rule) solid var(--hairline-2);
  color:var(--ink-3);background:var(--paper-2)}
.cap-admin-badge.ready{color:var(--ink);border-color:color-mix(in oklab,var(--ink) 35%,transparent);
  background:color-mix(in oklab,var(--ink) 8%,var(--paper-2))}
@media (prefers-reduced-motion:reduce){
  .cap-admin-pill,.cap-admin-chip{transition:none}
}