/* V3IntegrationsHub - Settings > Integrations, drawn to the binding mock (docs/design/mocks/integration-hub-mock.html).
   Tokens only (the v3 stylesheet governs, ruled 2026-10-12); meaningful text 12px and up at 400/500; --text-dim and --red
   never carry text (red text is --red-soft, or --red-text on a tinted ground: PR 6 grading). The mock's literal sizes below 12px are raised to the floor here.
   © 2026 VeriPass AI, Inc. All rights reserved. */
.hub { max-width:1180px; }
.hub-loading, .hub-refusal { font:400 13px var(--sans); color:var(--text-muted); padding:24px 0; }
.hub-h1 { font:500 21px var(--sans); color:var(--text); margin:0 0 4px; text-wrap:balance; }
.hub-lede { font:400 14px/1.5 var(--sans); color:var(--text-secondary); margin:0; max-width:62ch; }
.hub-audience { display:flex; align-items:center; gap:8px; margin:10px 0 0; font:400 13px var(--sans); color:var(--text-muted); }
.hub-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.hub-h2 { font:500 16px var(--sans); color:var(--text); margin:0; }

/* the wiring */
.hub-wiring { margin:20px 0 0; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); overflow:hidden; }
.hub-wiring-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:16px 18px 2px; }
.hub-ws { font:400 13px var(--sans); color:var(--text-muted); }
.hub-wiring-scroll { overflow-x:auto; }
.hub-wiring-svg { display:block; min-width:900px; width:100%; height:auto; }
.hub-wiring-svg text { font-family:var(--mono); font-size:12px; }
.hub-tx-nm { font-family:var(--sans); font-size:13px; font-weight:500; fill:var(--text); }
.hub-tx-sub { fill:var(--text-muted); }
.hub-tx-brk { fill:var(--red-soft); }
.hub-wire, .hub-socket { cursor:pointer; outline:none; }
.hub-wire:hover .hub-wire-path, .hub-wire:focus .hub-wire-path { stroke-width:5; }
.hub-wire:focus-visible .hub-wire-end, .hub-socket:focus-visible .hub-socket-end { stroke:var(--accent-hover); stroke-width:3; }
.hub-wire-path { fill:none; opacity:0.95; }
.hub-wire-path.hub-t-live { stroke:var(--accent); }
.hub-wire-path.hub-t-warn { stroke:var(--amber); }
.hub-wire-path.hub-t-quiet { stroke:var(--accent-border); }
.hub-wire-path.hub-t-brk { stroke:var(--red); stroke-dasharray:4 5; }
.hub-wire-end { fill:var(--bg); stroke-width:2; }
.hub-wire-end.hub-t-live { stroke:var(--accent); } .hub-wire-end.hub-t-warn { stroke:var(--amber); }
.hub-wire-end.hub-t-quiet { stroke:var(--text-muted); } .hub-wire-end.hub-t-brk { stroke:var(--red); }
.hub-refused { fill:var(--red); }
.hub-pulse { fill:var(--accent-hover); }
.hub-core { fill:var(--accent-dim); stroke:var(--accent-border); }
.hub-trunk { stroke:var(--accent); stroke-width:3; fill:none; }
.hub-breaker { fill:var(--bg); stroke:var(--text-muted); stroke-width:2; }
.hub-breaker-mark { stroke:var(--text-muted); stroke-width:2; }
.hub-socket-path { fill:none; stroke:var(--border-light); stroke-width:2; stroke-dasharray:3 6; }
.hub-socket-end { fill:none; stroke:var(--text-muted); stroke-width:2; stroke-dasharray:3 3; }
@media (prefers-reduced-motion: reduce) { .hub-pulse { display:none; } }

/* how to read */
.hub-legend { margin:20px 0 28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); padding:14px 16px; display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
.hub-legend-h { font:500 12px var(--mono); letter-spacing:1px; color:var(--text-muted); }
.hub-lg { display:flex; align-items:center; gap:8px; font:400 13px var(--sans); color:var(--text-secondary); }
.hub-lg-wire { display:inline-block; width:44px; height:0; border-top:2px solid var(--border-light); }
.hub-lg-wire.hub-t-live { border-top-color:var(--accent); }
.hub-lg-wire.hub-t-warn { border-top-color:var(--amber); }
.hub-lg-wire.hub-t-brk { border-top:2px dashed var(--red); }
.hub-lg-wire.hub-t-unlit { border-top:2px dashed var(--border-light); }

/* sections */
.hub-sec { margin-bottom:40px; }
.hub-sec-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.hub-count { font:400 12px var(--mono); color:var(--text-muted); }
.hub-sub { font:400 13px/1.5 var(--sans); color:var(--text-muted); margin:0 0 14px; max-width:70ch; }

/* keys */
.hub-keys { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); overflow:hidden; }
.hub-khead, .hub-krow { display:grid; grid-template-columns:minmax(170px,.9fr) minmax(220px,1.4fr) 180px 130px 104px; gap:12px; align-items:center; padding:12px 16px; }
.hub-khead { font:500 12px var(--mono); letter-spacing:.5px; color:var(--text-muted); border-bottom:1px solid var(--border); }
.hub-krow { border-bottom:1px solid var(--border); border-radius:0; }
.hub-krow:hover { background:var(--row-hover); }
@keyframes hub-land { 0%, 55% { background:var(--landing-flash); box-shadow:inset 3px 0 0 var(--accent); } 100% { background:transparent; box-shadow:none; } }
.hub-landed { animation:hub-land 2.2s ease 1; }
@media (prefers-reduced-motion: reduce) { .hub-landed { animation:none; box-shadow:inset 3px 0 0 var(--accent); } }
.hub-klabel { font:500 14px var(--sans); color:var(--text); }
.hub-kpfx { font:400 12px var(--mono); color:var(--text-muted); margin-top:2px; word-break:break-all; }
.hub-scope { display:inline-flex; align-items:center; gap:6px; margin-top:6px; font:400 12px var(--mono); color:var(--text-secondary); border:1px solid var(--border-light); border-radius:5px; padding:1px 7px; }
.hub-scope b { display:inline-block; width:14px; border-radius:2px; background:var(--accent); }
.hub-scope-3 b { height:4px; } .hub-scope-2 b { height:2.5px; } .hub-scope-1 b { height:1.5px; }
.hub-scope-rv { color:var(--text-muted); } .hub-scope-rv b { background:var(--border-light); }
.hub-life { min-width:0; }
.hub-track { position:relative; height:22px; }
.hub-base { position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border); transform:translateY(-.5px); }
.hub-span { position:absolute; top:50%; transform:translateY(-50%); border-radius:3px; background:var(--accent); }
.hub-span-idle { background:transparent; border-top:2px dotted var(--amber); border-radius:0; height:0 !important; }
.hub-span-rv { background:repeating-linear-gradient(45deg, var(--red) 0 3px, transparent 3px 7px); height:8px !important; }
.hub-mark { position:absolute; top:50%; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%); }
.hub-mark-made { background:var(--bg); border:2px solid var(--accent); }
.hub-mark-made.hub-mark-rv { border-color:var(--red); }
.hub-mark-used { background:var(--accent); }
.hub-mark-x { background:var(--red); border-radius:2px; }
.hub-cap { display:flex; justify-content:space-between; font:400 12px var(--mono); color:var(--text-muted); margin-top:3px; }
.hub-note { font:400 12px var(--sans); margin-top:2px; }
.hub-note-idle { color:var(--amber); } .hub-note-rv { color:var(--red-text); } .hub-note-fresh { color:var(--accent); }
.hub-kmeta { font:400 13px var(--sans); color:var(--text-secondary); min-width:0; overflow-wrap:anywhere; }
.hub-kmeta small { display:block; font:400 12px var(--sans); color:var(--text-muted); }
.hub-na { color:var(--text-muted); }
.hub-empty { font:400 13px var(--sans); color:var(--text-muted); padding:14px 16px; margin:0; }
.hub-legacy { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:12px 16px; margin:10px 16px 14px; border:1.5px dashed var(--border-light); border-radius:9px; }
.hub-legacy .hub-klabel { color:var(--text-secondary); }
.hub-tag { display:inline-block; font:400 12px var(--mono); color:var(--text-muted); border:1px solid var(--border-light); border-radius:4px; padding:0 6px; }
.hub-desc { font:400 13px var(--sans); color:var(--text-muted); margin-top:4px; max-width:58ch; }

/* stated absences and the catalog */
.hub-absent { border:1px dashed var(--border-light); border-radius:var(--radius-md); padding:14px 16px; margin-top:10px; }
.hub-absent p { font:400 13px/1.5 var(--sans); color:var(--text-secondary); margin:0; max-width:72ch; }
.hub-cat { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; margin-top:14px; }
.hub-cat-card { border:1px solid var(--border); border-radius:10px; background:var(--card); padding:13px 14px; display:flex; flex-direction:column; gap:6px; }
.hub-cat-name { font:500 14px var(--sans); color:var(--text); margin:0; }
.hub-cat-st { font:400 12px var(--sans); color:var(--text-muted); }

/* create: the drawer (PR 5) */
.hub-grow { flex:1; }
.hub-btn { font:500 13px var(--sans); color:var(--text); background:var(--card); border:1px solid var(--border-light); border-radius:var(--radius-md); padding:8px 14px; cursor:pointer; transition:border-color var(--transition-fast), background var(--transition-fast); }
.hub-btn:hover { border-color:var(--text-muted); }
.hub-btn:focus-visible, .hub-input:focus-visible, .hub-scope-opt:focus-within { outline:2px solid var(--accent-hover); outline-offset:2px; }
.hub-btn-primary { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.hub-btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.hub-btn:disabled { cursor:progress; opacity:.7; }
.hub-scrim { position:fixed; inset:0; background:var(--scrim); z-index:9000; opacity:0; pointer-events:none; transition:opacity var(--transition-normal); }
.hub-drawer { position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--bg-sidebar); border-left:1px solid var(--border); z-index:9001; transform:translateX(102%); visibility:hidden;
  transition:transform var(--transition-slow), visibility 0s linear 300ms; display:flex; flex-direction:column; padding:calc(20px + env(safe-area-inset-top,0px)) 24px calc(20px + env(safe-area-inset-bottom,0px)); overflow-y:auto; box-sizing:border-box; }
body.hub-drawer-open .hub-scrim { opacity:1; pointer-events:auto; }
body.hub-drawer-open .hub-drawer { transform:none; visibility:visible; transition:transform var(--transition-slow); }
@media (prefers-reduced-motion: reduce) { .hub-drawer, .hub-scrim { transition:none; } }
.hub-drawer-h { font:500 16px var(--sans); color:var(--text); margin:0 0 2px; }
.hub-drawer-sub { font:400 13px var(--sans); color:var(--text-muted); margin:0 0 18px; }
.hub-field { display:block; font:400 12px var(--sans); color:var(--text-muted); margin:14px 0 6px; }
.hub-input { width:100%; box-sizing:border-box; background:var(--card); border:1px solid var(--border-light); border-radius:var(--radius-md); color:var(--text); font:400 13px var(--mono); padding:9px 11px; }
.hub-input:focus { border-color:var(--accent); outline:none; }
.hub-scopes { display:flex; flex-direction:column; gap:8px; }
.hub-scope-opt { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border-light); border-radius:9px; padding:11px 13px; cursor:pointer; transition:border-color var(--transition-fast), background var(--transition-fast); }
.hub-scope-opt input { margin:3px 0 0; accent-color:var(--accent); }
.hub-sw { flex:none; width:30px; margin-top:7px; }
.hub-sw b { display:block; border-radius:2px; background:var(--accent); }
.hub-scope-opt-w3 .hub-sw b { height:5px; } .hub-scope-opt-w2 .hub-sw b { height:3px; } .hub-scope-opt-w1 .hub-sw b { height:1.5px; }
.hub-scope-tx b { display:block; font:500 13px var(--mono); color:var(--text); }
.hub-scope-tx span { display:block; margin-top:2px; font:400 12px/1.45 var(--sans); color:var(--text-secondary); }
.hub-scope-opt.hub-sel { border-color:var(--accent); background:var(--accent-dim); }
.hub-drawer-err { font:400 13px var(--sans); color:var(--red-soft); margin:12px 0 0; min-height:0; }
.hub-drawer-err:empty { display:none; }
.hub-actions { display:flex; gap:10px; margin-top:22px; }
.hub-actions .hub-btn { flex:1; }
.hub-drawer-s2 { display:none; }
.hub-drawer.hub-step2 .hub-drawer-s1 { display:none; }
.hub-drawer.hub-step2 .hub-drawer-s2 { display:block; }
.hub-keybox { border:1px solid var(--accent-border); background:var(--accent-dim); border-radius:9px; padding:13px 14px; margin-top:14px; }
.hub-kv { font:400 13px var(--mono); color:var(--text); word-break:break-all; user-select:all; }
.hub-keybox-row { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.hub-copy-state { font:400 12px var(--sans); color:var(--text-secondary); }
.hub-once { font:400 13px/1.5 var(--sans); color:var(--text-secondary); margin:12px 0 0; }
.hub-once b { color:var(--text); font-weight:500; }

/* revoke (PR 6): the action column and the mock's confirm strip, inside the row */
.hub-kact { display:flex; justify-content:flex-end; }
.hub-btn-danger { color:var(--red-text); border-color:var(--danger-border); background:transparent; }
.hub-btn-danger:hover { background:var(--danger-hover); border-color:var(--red-soft); }
.hub-btn-done, .hub-btn-done:hover { color:var(--text-muted); border-color:var(--border); background:transparent; cursor:default; }
.hub-rv-confirm { grid-column:1 / -1; display:none; gap:12px; align-items:center; flex-wrap:wrap; border:1px solid var(--danger-border); background:var(--danger-fill); border-radius:9px; padding:10px 14px; margin-top:4px; }
.hub-krow.hub-rv-open .hub-rv-confirm { display:flex; }
.hub-rv-confirm p { margin:0; font:400 13px/1.5 var(--sans); color:var(--text-secondary); flex:1; min-width:200px; }
.hub-rv-err { flex-basis:100%; font:400 13px var(--sans); color:var(--red-text); }
.hub-rv-err:empty { display:none; }

@media (max-width: 1060px) {
  .hub-khead { display:none; }
  .hub-krow { grid-template-columns:1fr 1fr; }
  .hub-kid, .hub-life { grid-column:1 / -1; }
  .hub-kact { justify-content:flex-start; }
}