/* ============================================================
   InspektLABS — prototype additions (extra.css)
   Index hub, affiliate/creator portal shell, verification page,
   campaign hero variant. Originals (tokens/app/admin/capture) are
   untouched so every prior screen stays backward-compatible.
   ============================================================ */

/* ---------- Prototype index hub ---------- */
.hub { max-width: 1080px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s9); }
.hub__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap; padding-bottom: var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s6); }
.hub__head .display { margin-top: var(--s3); }
.hub__lead { color: var(--ink-2); max-width: 54ch; margin-top: var(--s2); }
.hub__legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--s4); }
.hub__legend span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--ink-2); }
.hub__sec { margin-bottom: var(--s7); }
.hub__sec h2 { font-family: var(--font-display); font-size: var(--t-h1); margin-bottom: 4px; }
.hub__sec .desc { color: var(--ink-3); font-size: var(--t-sm); margin-bottom: var(--s4); }
.hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s3); }
.hubcard { display: flex; flex-direction: column; gap: 4px; padding: var(--s4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); transition: border-color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1); }
.hubcard:hover { border-color: var(--brand); box-shadow: var(--shadow-2); text-decoration: none; transform: translateY(-1px); }
.hubcard__id { font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: 0.08em; color: var(--brand-ink); }
.hubcard__t { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.hubcard__d { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; }
.hub__foot { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-xs); }

/* ---------- Creator portal shell ---------- */
.portal { min-height: 100dvh; background: var(--bg); }
.portal__bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s3);
  height: 60px; padding: 0 var(--s5); background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.portal__badge { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-ink); background: var(--brand-tint); padding: 3px 8px; border-radius: var(--r-pill); }
.ptabs { position: sticky; top: 60px; z-index: 25; background: var(--surface); border-bottom: 1px solid var(--line); }
.ptabs__in { display: flex; gap: 2px; max-width: 1080px; margin: 0 auto; padding: 0 var(--s4); overflow-x: auto; }
.ptabs__t { padding: 14px 14px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid transparent; white-space: nowrap; }
.ptabs__t:hover { color: var(--ink); text-decoration: none; }
.ptabs__t.is-active { color: var(--brand-ink); border-bottom-color: var(--brand); }
.portal__body { max-width: 1080px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s9); }

/* ---------- Verification page (public, checkable) ---------- */
.verify { min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  padding: var(--s7) var(--s5) var(--s9);
  background: radial-gradient(90% 60% at 50% -10%, var(--brand-tint), transparent 60%), var(--bg); }
.verify__card { width: 100%; max-width: 560px; }
.verify__seal { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--ok-tint); color: var(--ok-ink); font-weight: 600; font-size: var(--t-sm); }

/* generic max-width reading column for legal pages already handled by app shell */
.prose h2 { font-family: var(--font-display); font-size: var(--t-h2); margin: var(--s5) 0 var(--s2); }
.prose h3 { font-size: var(--t-h3); margin: var(--s4) 0 var(--s1); }
.prose p, .prose li { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }
.prose ul { margin: var(--s2) 0; }
.prose ul li { position: relative; padding-left: 18px; margin: 4px 0; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--brand); }
.prose .updated { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); }

/* campaign source ribbon */
.srcribbon { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-ink); font-size: var(--t-xs); font-weight: 600; }
.srcribbon .ic { width: 14px; height: 14px; color: var(--brand-strong); }

/* price tag */
.pricetag { display: flex; align-items: baseline; gap: 8px; }
.pricetag b { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.pricetag s { color: var(--ink-3); font-size: 18px; }
.pricetag .per { color: var(--ink-3); font-size: var(--t-sm); }

/* simple two-up stat row */
.statrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.statbox { background: var(--surface-2); border-radius: var(--r); padding: var(--s4); text-align: center; }
.statbox b { font-family: var(--font-display); font-size: 24px; display: block; }
.statbox span { font-size: var(--t-xs); color: var(--ink-3); }

/* angle list (scan intro) */
.anglemap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.anglemap div { aspect-ratio: 1; border-radius: var(--r-sm); background: var(--surface-2);
  display: grid; place-items: center; font-size: 10.5px; color: var(--ink-3); text-align: center;
  font-family: var(--font-mono); border: 1px solid var(--line); }

@media (max-width: 540px) {
  .hub { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ============================================================
   Admin mobile hardening (additive — originals untouched).
   A collapsed single-column grid track defaults to its items'
   min-content width; a wide table/value can therefore force the
   track wider than the screen. Allow items to shrink, let header
   rows wrap, reflow log rows, and keep long values breakable.
   ============================================================ */
.adm-grid > *, .adm-panel, .stack > *, .detail > *, .mediaview > * { min-width: 0; }
.adm-panel__head, .adm-panel__body { min-width: 0; }
.tablewrap { max-width: 100%; }

.adm-content__head { flex-wrap: wrap; }
.adm-panel__head { flex-wrap: wrap; row-gap: 6px; }

.kv .r { min-width: 0; }
.kv .r dd { min-width: 0; overflow-wrap: anywhere; }

/* form controls must be allowed to shrink. Native controls (notably
   <input type="date">) keep a hard intrinsic min-width (~176px) that
   ignores min-width:0 and minmax(0,1fr) — the grid track expands to fit
   it, overflowing a narrow phone column. auto-fit with a floor just above
   that min gives two-up where the column has room and stacks where it does
   not, sized to the element (correct for the fixed phone column at any
   viewport) rather than a viewport breakpoint. */
.input, .select, .textarea { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 184px), 1fr)); }
.grid-2 > * { min-width: 0; }

@media (max-width: 860px) {
  /* time on its own row; category + message share row two */
  .logline { grid-template-columns: auto minmax(0, 1fr); row-gap: 3px; column-gap: var(--s3); }
  .logline .t { grid-column: 1 / -1; }
  .logline > * { min-width: 0; overflow-wrap: anywhere; }

  .jobrow, .setrow { flex-wrap: wrap; row-gap: 6px; }
  .jobrow .jbar { width: 100%; }

  /* Top bar: reclaim width for the title + a right-pinned action.
     Search collapses to a zero-width auto-margin spacer (keeps bell +
     actions pinned right); the title truncates rather than pushing. */
  .adm-top { gap: var(--s3); padding: 0 var(--s4); }
  .adm-search { width: 0; min-width: 0; max-width: 0; overflow: hidden;
    margin-left: auto; border: 0; }
  .adm-top h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 16px; }
  .adm-top .crumb { display: none; }
}