/* ─────────────────────────────────────────────────────────────────────────────
   tabkit.css — SHARED component kit for the CivicTab family. Import AFTER tabtokens.css.
   One canonical: card / button / chip / avatar / tag / top-bar / bottom-nav / link / column.
   Staff/Fly import this file and only override --tab-accent. Class prefix: .tk-
   ───────────────────────────────────────────────────────────────────────────── */

/* centered single content column */
.tk-col{ max-width:var(--tab-col); margin:0 auto; width:100%; }

/* CARD */
.tk-card{
  background:var(--tab-elev); border:1px solid var(--tab-border);
  border-radius:var(--tab-radius); box-shadow:var(--tab-shadow-sm);
}

/* BUTTON */
.tk-btn{
  font-family:var(--tab-font); font-weight:700; font-size:var(--tab-fs-sm); line-height:1.2;
  border:1px solid var(--tab-border-2); background:var(--tab-elev); color:var(--tab-ink);
  border-radius:var(--tab-radius-sm); padding:9px 16px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap;
  transition:filter .12s ease, background .12s ease;
}
.tk-btn:hover{ filter:brightness(.98); }
.tk-btn--primary{ background:var(--tab-accent); border-color:var(--tab-accent); color:var(--tab-accent-ink); }
.tk-btn--primary:hover{ filter:brightness(1.05); }
.tk-btn--ghost{ background:transparent; border-color:transparent; }
.tk-btn--sm{ padding:6px 12px; font-size:var(--tab-fs-xs); }
.tk-btn[disabled]{ opacity:.55; cursor:default; }

/* CHIP (selectable / filter) */
.tk-chip{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--tab-border); background:var(--tab-surface); color:var(--tab-ink-2);
  border-radius:var(--tab-radius-pill); padding:5px 12px; font-size:var(--tab-fs-xs);
  font-weight:700; cursor:pointer; user-select:none;
}
.tk-chip.is-on{ background:var(--tab-accent); border-color:var(--tab-accent); color:var(--tab-accent-ink); }

/* TAG (read-only label, e.g. review behavior tags) */
.tk-tag{
  display:inline-block; border:1px solid var(--tab-border); background:var(--tab-surface);
  color:var(--tab-ink-2); border-radius:8px; padding:2px 8px;
  font-size:var(--tab-fs-xs); font-weight:800; letter-spacing:.02em; margin:0 4px 4px 0;
}

/* AVATAR */
.tk-avatar{
  border-radius:50%; flex:none; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;
  background-color:var(--tab-accent);
}
.tk-avatar--sm{ width:32px; height:32px; font-size:.8rem; }
.tk-avatar--md{ width:44px; height:44px; font-size:1rem; }
.tk-avatar--lg{ width:72px; height:72px; font-size:1.5rem; }
.tk-avatar--sq{ border-radius:16px; }

/* TOP BAR (per-screen header inside the shell) */
.tk-topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:var(--tab-s3);
  padding:11px var(--tab-s4); background:var(--tab-bg);
  border-bottom:1px solid var(--tab-border);
}
.tk-topbar .tk-title{ font-weight:700; font-size:var(--tab-fs-lg); color:var(--tab-ink); flex:1; min-width:0; }
.tk-topbar .tk-iconbtn{ background:none; border:none; font-size:1rem; font-weight:700; color:var(--tab-ink-2); cursor:pointer; padding:6px 8px; border-radius:8px; }
.tk-topbar .tk-iconbtn:hover{ background:var(--tab-surface); }

/* LINK */
.tk-link{ color:var(--tab-accent); font-weight:700; text-decoration:none; cursor:pointer; }
.tk-link:hover{ text-decoration:underline; }

/* BOTTOM NAV (mobile) — canonical 5-tab bar */
.tk-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  height:calc(var(--tab-bottomnav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:none; align-items:stretch;
  background:var(--tab-bg); border-top:1px solid var(--tab-border);
}
.tk-bottomnav .tk-bn{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:none; border:none; cursor:pointer; color:var(--tab-ink-3); font-size:.62rem; font-weight:700; position:relative; }
.tk-bottomnav .tk-bn .ic{ font-size:1.35rem; line-height:1; }
.tk-bottomnav .tk-bn.is-on{ color:var(--tab-accent); }
.tk-bottomnav .tk-bn .tk-badge{ position:absolute; top:5px; right:50%; transform:translateX(16px);
  background:#e0245e; color:#fff; font-size:.58rem; font-weight:800; min-width:15px; height:15px;
  border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
@media(max-width:768px){ .tk-bottomnav{ display:flex; } }

/* DIVIDER + muted text helpers */
.tk-divider{ height:1px; background:var(--tab-border); border:0; margin:var(--tab-s3) 0; }
.tk-muted{ color:var(--tab-ink-3); }
.tk-empty{ text-align:center; color:var(--tab-ink-3); padding:46px 22px; line-height:1.55; }