/* ============================================================
   VerifyUGC v7 — shared dashboard UI kit (component primitives)
   ------------------------------------------------------------
   The SINGLE canonical home for the dashboard component primitives that
   used to be copy-pasted into every dashboard page/section: the page
   .shell wrapper, stat tiles, segmented control, filter button + flyout,
   status-chip base, outline buttons, the modal system, and the form kit.

   Consumed by BOTH:
     - the desktop SPA (public/dashboard/index.html), and
     - every standalone SSR dashboard page
       (trust-score / receipts / vouches / referrals / security),
   plus the lazily-loaded SPA sections (licensing / reports / tripwires),
   so there is exactly one definition of each primitive.

   Tokens come from /assets/v7/chrome.css (which @imports base.css:
   --a1/--grad/--acc-glow/--head/--warning/--border/--dim/--mono/--display…).
   Link this AFTER chrome.css and dash-shell.css, and BEFORE any page- or
   section-scoped stylesheet, so a page's own higher-specificity modifiers
   (.chip.st-*, .dstat.alert, .modal.wide overrides, …) still win.

   Supersedes the SPA-only public/assets/pages/dashboard/sections/_kit.css
   (deleted) — this file carries its primitives verbatim plus the shell,
   modal and form kit the standalone pages also duplicated.
   ============================================================ */

/* ===== page shell ====================================================
   The standalone SSR pages' outer wrapper: a max-width container that is
   ALSO the sidebar+content two-column grid (the SPA's equivalent is
   .wrap > .dash-shell). The sidebar look itself (.side / .side-*) is the
   shared dash-shell.css. Below 1080 the sidebar folds into dash-shell.css's
   slide-in drawer, so the grid collapses to a single column. */
.shell { position:relative; z-index:2; display:grid; grid-template-columns:216px minmax(0,1fr); gap:22px;
  max-width:1310px; margin:0 auto; padding:20px clamp(14px,2.6vw,28px) 80px; align-items:start; }
@media (max-width:1080px) { .shell { grid-template-columns:1fr; } }

/* ===== stat tiles ==================================================== */
.dstat { padding:14px 16px; display:flex; align-items:center; gap:13px; transition:border-color .15s, transform .15s; }
.dstat:hover { transform:translateY(-2px); border-color:var(--border2); }
.dstat .ic { width:40px; height:40px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.dstat .ic svg { width:18px; height:18px; }
.dstat .col { display:flex; flex-direction:column; gap:0; min-width:0; }
.dstat b { font-family:var(--display); font-size:1.5rem; line-height:1.15; color:var(--head); letter-spacing:-.02em; white-space:nowrap; }
.dstat b em { font-style:normal; font-size:.8rem; color:var(--faint); font-family:var(--mono); margin-left:4px; }
.dstat .lbl { font-size:.66rem; color:var(--faint); letter-spacing:.1em; text-transform:uppercase; font-family:var(--mono); white-space:nowrap; }
.dstat.t-purple .ic { background:color-mix(in srgb,var(--a1) 15%,transparent); color:var(--t1); }
.dstat.t-cyan .ic { background:color-mix(in srgb,var(--a3) 12%,transparent); color:var(--t3); }
.dstat.t-gold .ic { background:color-mix(in srgb,var(--warning) 12%,transparent); color:var(--warning); }
.dstat.t-green .ic { background:color-mix(in srgb,var(--success) 12%,transparent); color:var(--success); }
.dstat.t-red .ic { background:color-mix(in srgb,var(--danger) 12%,transparent); color:var(--danger); }

/* ===== segmented control ============================================= */
.seg { display:flex; gap:3px; padding:3px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.02); }
.seg button { display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer; color:var(--dim);
  font-family:var(--sans); font-weight:500; font-size:.8rem; padding:6px 13px; border-radius:999px; transition:color .15s, background .15s; }
.seg button:hover { color:var(--text); }
.seg button.on { background:var(--grad); color:#fff; font-weight:600; }
.seg .n { font-family:var(--mono); font-size:.62rem; opacity:.75; }
.seg .cnt { font-family:var(--mono); font-size:.62em; opacity:.8; margin-left:5px; }

/* Search-toolbar tab treatment (CANONICAL, from #697). Inside a search/filter
   toolbar the segmented tabs drop the full 999px pill and adopt the search box's
   shape: a 36px-tall rounded-square with an 11px radius, so the tab group and the
   search bar beside it read as one control set. The active fill is inset one step
   to 8px (11px track radius minus the 3px .seg padding) so it sits cleanly inside
   the track instead of poking square corners out of a rounded container. 11/8 are
   bespoke to this toolbar (no matching --r-* token; the toolbar's search box and
   .fbtn are hardcoded 11px too — matched here on purpose). Scoped to the toolbar
   containers so segmented controls elsewhere on the dashboard keep their pill
   shape. The standalone pages carry the SAME values scoped to their own bar
   (.rf-bar / .vc-bar / .dl-bar) in their page sheet — keep them in sync. */
.rp-bar .seg,.tw-bar .seg,.wm-bar .seg{height:36px;border-radius:11px}
.rp-bar .seg button,.tw-bar .seg button,.wm-bar .seg button{border-radius:8px}
.rp-bar .seg button.on,.tw-bar .seg button.on,.wm-bar .seg button.on{border-radius:8px}

/* ===== filter button + flyout ======================================== */
.fwrap { position:relative; }
.fbtn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  background:rgba(255,255,255,.02); cursor:pointer; color:var(--dim);
  border:1px solid var(--border); border-radius:11px; transition:color .15s, border-color .15s; }
.fbtn svg { width:15px; height:15px; }
.fbtn:hover { color:var(--text); }
.fbtn.on { color:var(--t3); border-color:color-mix(in srgb,var(--a3) 45%,transparent); }
.fcount { position:absolute; top:-6px; right:-6px; display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--grad); color:#fff;
  font-family:var(--mono); font-size:.6rem; font-weight:600; }
.ffly { position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:280px; padding:16px 16px 13px;
  background:rgba(14,14,25,.97); border:1px solid var(--border2); border-radius:16px; box-shadow:0 30px 80px -24px rgba(0,0,0,.85); }
.ffly-sec { display:flex; flex-direction:column; gap:9px; padding-bottom:14px; margin-bottom:13px; border-bottom:1px solid var(--border); }
.ffly-sec:last-of-type { border-bottom:0; margin-bottom:4px; }
.ffly-foot { display:flex; justify-content:space-between; gap:8px; margin-top:10px; }
.ffly.slim { width:210px; padding:7px; display:flex; flex-direction:column; gap:2px; }
.f-lbl2 { font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.fpills { display:flex; gap:5px; flex-wrap:wrap; }
.tpill { display:inline-flex; align-items:center; gap:7px; background:none; cursor:pointer; font-family:var(--mono);
  font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px;
  color:var(--faint); border:1px solid var(--border); transition:color .15s, border-color .15s; }
.tpill:hover { color:var(--text); }
.tpill.on { color:var(--t3); border-color:color-mix(in srgb,var(--a3) 45%,transparent); background:color-mix(in srgb,var(--a3) 8%,transparent); }
.fopt { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; color:var(--dim); font-family:var(--sans); font-weight:500; font-size:.84rem;
  padding:8px 11px; border-radius:9px; transition:color .12s, background .12s; }
.fopt:hover { color:var(--text); background:rgba(255,255,255,.04); }
.fopt.on { color:var(--t3); }
.fchk2 { font-size:.7rem; }

/* ===== status chip base ==============================================
   Per-page/section .chip.* colour modifiers stay in their own sheet. The
   base carries a 6px icon gap so chips with a leading glyph read cleanly;
   it is inert on text-only chips. */
.chip { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; font-family:var(--mono); font-size:.6rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; }

/* ===== outline buttons =============================================== */
.vbtn { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--border2); border-radius:9px;
  cursor:pointer; color:var(--text); font-family:var(--sans); font-weight:600; font-size:.74rem; padding:6px 12px;
  transition:border-color .15s, color .15s; white-space:nowrap; text-decoration:none; }
.vbtn svg { width:12px; height:12px; }
.vbtn:hover { border-color:var(--a1); color:#fff; }
.vbtn.prime { border-color:color-mix(in srgb,var(--a2) 50%,transparent); color:var(--t3); }
.vbtn.prime:hover { border-color:var(--a3); }
.vbtn.danger { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 36%,transparent); }
.vbtn.danger:hover { border-color:var(--danger); }
.vbtn:disabled, .vbtn[disabled] { opacity:.5; pointer-events:none; }

/* ===== modal system ==================================================
   Shared overlay + panel + header/body/foot. The panel scrolls when taller
   than the viewport, and a 2px gradient accent is masked across its top edge
   (respects the border radius). Default width is 520px; use .modal.wide for
   760px, or a one-line page override for a bespoke width. */
.ovl { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:24px 18px; background:rgba(4,4,10,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  overflow-y:auto; animation:ovlIn .18s ease; }
@keyframes ovlIn { from { opacity:0; } to { opacity:1; } }
.modal { width:100%; max-width:520px; max-height:calc(100vh - 48px); overflow-y:auto; border-radius:20px;
  background:rgba(15,15,26,.97); border:1px solid var(--border2);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative; animation:modIn .22s ease; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.modal.wide { max-width:760px; }
@keyframes modIn { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.modal::before { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--grad); opacity:.7; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat; mask:linear-gradient(#000 0 0) top / 100% 2px no-repeat; }
.mod-head { display:flex; align-items:flex-start; gap:14px; padding:18px 24px 16px; border-bottom:1px solid var(--border); }
.mod-head h2 { font-size:1.14rem; }
.mod-head p { font-size:.8rem; color:var(--dim); margin-top:5px; line-height:1.55; }
.mod-head p b { color:var(--text); }
.mod-x { margin-left:auto; flex:0 0 auto; width:30px; height:30px; border-radius:9px; border:1px solid var(--border);
  background:none; cursor:pointer; color:var(--faint); font-size:.85rem; transition:color .15s, border-color .15s; }
.mod-x:hover { color:var(--text); border-color:var(--border2); }
.mod-acts { margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.mod-acts .mod-x { margin-left:0; display:inline-flex; align-items:center; justify-content:center; }
.mod-acts .mod-x svg { width:15px; height:15px; }
.mod-body { display:flex; flex-direction:column; gap:15px; padding:18px 24px 22px; }
.mod-foot { display:flex; align-items:center; gap:10px; padding:14px 24px 18px; border-top:1px solid var(--border); flex-wrap:wrap; }
.mod-foot .grow { flex:1; min-width:120px; }

/* ===== form kit ======================================================
   Field label + input shells shared by the vouch / log-a-deal style forms. */
.f-field { display:flex; flex-direction:column; gap:6px; }
.f-field.full { grid-column:1 / -1; }
.f-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f-lbl { font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.f-in { display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid var(--border); border-radius:11px;
  background:rgba(255,255,255,.03); transition:border-color .15s; }
.f-in:focus-within { border-color:color-mix(in srgb,var(--a2) 55%,transparent); }
.f-in input, .f-in select, .f-in textarea { flex:1; min-width:0; background:none; border:0; outline:none; color:var(--text);
  font-family:var(--sans); font-size:.9rem; }
.f-in select option { background:#13131f; }
.f-in .pre { font-family:var(--mono); font-size:.82rem; color:var(--faint); }
.f-area { padding:11px 13px; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.03); }
.f-area textarea { width:100%; background:none; border:0; outline:none; resize:vertical; min-height:64px;
  color:var(--text); font-family:var(--sans); font-size:.9rem; line-height:1.5; }
.f-hint { font-size:.72rem; color:var(--faint); }
.f-hint.grow { flex:1; }
.f-err { font-size:.74rem; color:var(--danger); }
.f-match { display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--success); }
.f-match.pending { color:var(--faint); }
.f-match .mav { width:22px; height:22px; border-radius:50%; background:var(--grad);
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:.6rem; color:#fff; text-transform:uppercase; }