/* webapp.css — shared layout for the web app pages under /me/... (Invite, Garaj, Kosh).
 * Colours, type, buttons and cards come from shodkk.css (the app's tokens) and
 * member.css (rows, avatars, filters); this file only places things.
 * Phone first: 16 px gutter, nothing wider than the screen. */
main.page { overflow-wrap: anywhere; }
/* `hidden` wins over a component's own display (e.g. .ks-qchips{display:flex}). */
main.wa [hidden] { display: none !important; }
/* ── The app's bottom bar (AppShellNavBar, app_components.dart:420) ──────
 * bg context.cardColor (#fff), 1px top border context.borderColor (#E4E4E7),
 * SafeArea + navBarHeight 60, each tab an equal share: emoji navIconSize 20,
 * 3px gap, label navLabelSize 10 w700 ls .05, active = primaryAccent, others
 * context.mutedColor (#A1A1AA). No pill, no underline: colour is the state.
 * Fixed to the bottom of the phone column on every width (body is the column). */
.wa-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: var(--phone); margin: 0 auto;
  background: var(--card); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.wa-tabbar .in { display: flex; height: 60px; }
.wa-tabbar a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-ter); text-decoration: none; -webkit-tap-highlight-color: rgba(232, 89, 12, .08); }
.wa-tabbar a:hover { text-decoration: none; background: var(--bg-sub); }
.wa-tabbar .ico { position: relative; font-size: 20px; line-height: 1.15; }
.wa-tabbar .wa-lk { position: absolute; right: -8px; top: -2px; font-style: normal; font-size: 11px; }
.wa-tabbar .lbl { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .05px; line-height: 1.2;
  max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-tabbar a.on { color: var(--accent); }
.wa-tabbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
/* Focus rings for the shared chip and dialog. */
.wa-chip:focus-visible, .wa-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* An app page: room for the bar, no website "Sign in", no website footer. */
body.wa-app { padding-bottom: calc(60px + env(safe-area-inset-bottom)); font-size: 14px; /* Material bodyMedium */ }
body.wa-app .site-header .signin, body.wa-app .site-footer { display: none; }
/* The "Get the full app" strip sits on top of the bar instead of under it. */
body.wa-app .appbar { bottom: calc(60px + env(safe-area-inset-bottom)); padding-bottom: 0; }
body.wa-app.bar-on main.page { padding-bottom: 96px; }
/* A page outside /me reached from inside it (WS.chrome: /give, /give/manage, /support):
 * its pinned action bar sits on top of the tab bar, never under it. */
body.wa-pushed .cta { bottom: calc(60px + env(safe-area-inset-bottom)); }
/* The screen's own title moves into the app bar (WS.chrome sync); it stays the page's <h1> for screen readers. */
body.wa-pushed .wa-bar-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print { .wa-tabbar, .wa-appbar { display: none !important; } }
.wa-toast { position: fixed; left: 16px; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 31;
  max-width: calc(var(--phone) - 32px); margin: 0 auto; }

.wa-off h1 { font-size: 22px; margin-bottom: 6px; }
.wa-off .btn { margin-top: 12px; }

/* Four states. */
.wa-skel { display: grid; gap: 10px; }
.wa-skel i { display: block; height: 64px; border-radius: var(--r-card-sm); background: var(--bone);
  animation: wa-pulse 1.2s ease-in-out infinite; }
@keyframes wa-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .wa-skel i { animation: none; } }
.wa-empty { padding: 24px 16px; text-align: center; color: var(--text-sec); background: var(--bg-sub);
  border: 1px dashed var(--border); border-radius: var(--r-card-sm); }
.wa-err .linkbtn { margin-left: 4px; }

/* Header row of a page: title + one action. */
.wa-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
.wa-head h1 { font-size: 22px; line-height: 1.2; margin: 0; }
.wa-head .btn { width: auto; flex: 0 0 auto; }

/* Chips (filters, segments). */
.wa-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.wa-chip { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: var(--r-chip);
  border: 1px solid var(--border); background: var(--card); color: var(--text-ter); cursor: pointer; } /* AppFilterChip */
.wa-chip[aria-pressed="true"], .wa-chip.on { background: var(--text); color: #fff; border-color: var(--text); }
.wa-search { width: 100%; margin-bottom: 10px; }

/* Cards in a stack (Garaj option C, Kosh option A). */
.wa-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; }
.wa-card + .wa-card { margin-top: 12px; }
.wa-card h2 { font-size: 16px; margin: 0 0 6px; }
.wa-card .label { display: block; margin-bottom: 6px; }
.wa-meta { color: var(--text-sec); font-size: 12.5px; }
.wa-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.wa-row:first-child { border-top: 0; }
.wa-row > div { flex: 1; min-width: 0; }
.wa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wa-actions .btn { width: auto; margin: 0; }
.wa-bar { height: 8px; border-radius: 4px; background: var(--bone); overflow: hidden; margin: 8px 0 4px; }
.wa-bar > span { display: block; height: 100%; background: var(--accent); }
a.wa-row-link { color: inherit; text-decoration: none; display: block; }
a.wa-row-link:hover .wa-card, a.wa-row-link:focus-visible .wa-card { border-color: var(--accent); }

/* Dialog. */
.wa-dialog { border: 0; border-radius: var(--r-card); padding: 20px; max-width: min(420px, calc(100vw - 32px)); width: 100%;
  margin: auto; }   /* centred like the app's AlertDialog (a page reset zeroes <dialog>'s own margin) */
.wa-dialog::backdrop { background: rgba(17, 17, 17, .45); }
.wa-dialog h2 { font-size: 18px; margin: 0 0 8px; }
.wa-dlg-row { display: flex; gap: 8px; margin-top: 16px; }
.wa-dlg-row .btn { margin: 0; flex: 1; }

/* Forms. */
.wa-form label.field { margin-top: 12px; }
.wa-form textarea { width: 100%; min-height: 96px; font: inherit; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--r-input); resize: vertical; }
.wa-steps { display: flex; gap: 6px; margin: 4px 0 14px; }
.wa-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--bone); }
.wa-steps span.on { background: var(--accent); }

/* Phone column on every width (owner, o19): the app is one phone screen, so
 * .wa-cols stays one column even on a laptop. */
.wa-cols { display: block; }
.wa-cols > * + * { margin-top: 16px; }

/* ── App chrome shared by every /me page (hooks for the Invite, Garaj, Kosh pages) ──
 * .wa-appbar: a pushed screen's header row as the app draws it (KoshHeader / HelpScreenHeader,
 *   no Material AppBar): back button in a 36px box, title LEFT Outfit 14 w700 #111, row padding
 *   12/8/20/0; chevron + 8px gap on Kosh-style screens, straight arrow + 12px gap on Garaj.
 *   Build it with WS.appBarHtml().
 * .wa-title / .wa-tsub: a tab screen's own big title (Home 24 w800 −0.5, Samaj
 *   and Profile 26 w800) and its 13px grey line. WS.tabTitleHtml().
 * .wa-sec: HelpSectionLabel / KoshSectionLabel: UPPERCASE grey label with an
 *   optional accent link on the right. WS.secHtml(). */
.wa-appbar { position: sticky; top: 0; z-index: 9; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto;
  column-gap: 8px; align-items: center; min-height: 44px; margin: 0 calc(-1 * var(--gutter)); padding: 8px 20px 0 12px;
  background: var(--card); }
.wa-appbar.is-arrow { column-gap: 12px; padding-bottom: 4px; }
.wa-appbar h1, .wa-appbar .wa-abt { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1.3;
  text-align: left; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-appbar .wa-back { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); border-radius: 50%; }
.wa-appbar .wa-back::after { content: ''; position: absolute; inset: -4px; }   /* 44px tap target */
.wa-appbar .wa-back:hover { background: var(--bone); text-decoration: none; }
.wa-appbar > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.wa-title { font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; margin-top: 10px; }
.wa-title.lg { font-size: 26px; }
.wa-tsub { font-size: 13px; color: var(--text-sec); margin-top: 4px; }
.wa-tsub b { color: var(--text); font-weight: 700; }
.wa-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 8px; }
.wa-sec .label { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.wa-sec.tight .label { letter-spacing: .8px; } /* AppSectionLabel (Home, Profile) */
.wa-sec a, .wa-sec .lnk { font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; }
html[lang="mr"] .wa-sec .label, html[lang="hi"] .wa-sec .label { font-size: 12px; letter-spacing: 0; }

/* Home header row (_SangamHeader): wordmark 26 w800, 34px dark avatar → Profile. */
body.wa-app .site-header .wordmark { font-size: 26px; }
.wa-hd-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; background: var(--text) center/cover no-repeat; color: #fff; font-weight: 800; font-size: 14px;
  position: relative; }
.wa-hd-av::after { content: ''; position: absolute; inset: -5px; }
.wa-hd-av:hover { text-decoration: none; }
/* Samaj and Profile draw no wordmark row in the app: their title is the top. */
body.wa-nohead .site-header { display: none; }

/* Rows used by the tab screens. */
.wa-list { border-top: 1px solid var(--border-soft); }
.wa-li { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-soft);
  color: inherit; text-decoration: none; }
a.wa-li:hover { text-decoration: none; background: var(--bg-sub); }
.wa-li .ico { width: 28px; text-align: center; font-size: 18px; flex: 0 0 auto; }
.wa-li .main { flex: 1; min-width: 0; }
.wa-li .t { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.wa-li .s { font-size: 11px; color: var(--text-sec); margin-top: 2px; }
.wa-li .chev { color: var(--text-ter); font-size: 16px; flex: 0 0 auto; }
.wa-li .tag { font-size: 10px; font-weight: 700; color: var(--accent-dark); background: var(--accent-pale);
  border-radius: var(--r-chip); padding: 2px 8px; white-space: nowrap; flex: 0 0 auto; }
/* SangamMomentCard: tinted card, emoji, title, line. */
.wa-moment { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--accent-mid);
  background: var(--accent-pale); border-radius: 14px; }
.wa-moment + .wa-moment { margin-top: 8px; }
.wa-moment .ico { font-size: 22px; flex: 0 0 auto; }
.wa-moment .t { font-size: 15px; font-weight: 600; }
.wa-moment .s { font-size: 12px; color: var(--text-sec); }
/* Empty CTA (_EmptyCta) and the trust footer. */
.wa-emptycta { padding: 14px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-sec); font-size: 13px;
  text-align: center; }
.wa-trust { text-align: center; color: var(--text-ter); font-size: 11px; font-weight: 600; margin: 24px 0 8px; }

/* Samaj: profile strip, explore tiles, underline sub-tabs, member and sabha rows. */
.wa-strip { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; background: var(--bg-sub);
  border: 1px solid var(--border); border-radius: 10px; }
.wa-strip .main { flex: 1; min-width: 0; }
.wa-strip .t { font-size: 14px; font-weight: 700; }
.wa-strip .s { font-size: 11px; color: var(--text-sec); }
.wa-strip .k { text-align: right; font-family: inherit; font-variant-numeric: tabular-nums; font-size: 14px;
  font-weight: 800; color: var(--accent); line-height: 1.1; }
.wa-strip .k span { display: block; font-family: var(--font); font-size: 10px; font-weight: 500; color: var(--text-sec); }
.wa-explore { display: flex; gap: 8px; margin-top: 12px; }
.wa-explore a { flex: 1 1 0; min-width: 0; padding: 10px 4px; background: var(--bg-sub); border-radius: 10px; text-align: center;
  color: var(--text); font-size: 11px; font-weight: 600; line-height: 1.3; }
.wa-explore a:hover { text-decoration: none; background: var(--bone); }
.wa-explore .i { display: block; font-size: 20px; margin-bottom: 2px; }
.wa-subtabs { display: flex; gap: 0; margin: 12px calc(-1 * var(--gutter)) 0; padding: 0 4px; overflow-x: auto;
  border-bottom: 1px solid var(--border-soft); scrollbar-width: none; position: sticky; top: 0; background: var(--bg); z-index: 4; }
.wa-subtabs button { flex: 0 0 auto; padding: 10px 14px; font: inherit; font-size: 12px; font-weight: 500; color: var(--text-sec);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; min-height: 44px; }
.wa-subtabs button[aria-selected="true"] { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.wa-searchbar { display: flex; gap: 8px; margin-top: 10px; }
.wa-searchbar input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 15px; }
.wa-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; background: var(--text) center/cover no-repeat; color: #fff;
  font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.wa-av.sm { width: 36px; height: 36px; font-size: 14px; }
.wa-mem .row1 { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.wa-mem .t { font-weight: 700; }
.wa-mem .kar { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; color: var(--accent); }
.wa-mem .s { font-size: 12px; }
.wa-mem .x { font-size: 10px; color: var(--text-ter); margin-top: 4px; }
.wa-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wa-skills span { font-size: 11px; font-weight: 600; color: var(--accent-dark); background: var(--accent-pale); border-radius: 6px;
  padding: 2px 8px; }
.wa-sabha { display: flex; gap: 10px; align-items: center; padding: 16px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; margin-top: 8px; color: inherit; }
.wa-sabha .main { flex: 1; min-width: 0; }
.wa-sabha .t { font-size: 14px; font-weight: 700; }
.wa-sabha .s { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.wa-sabha .p { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 2px; }
.wa-foot { font-size: 12px; color: var(--text-sec); text-align: center; margin: 14px 0; }

/* Profile: header, karma hero, 4-column stats, invite callout. */
.wa-phead { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.wa-phead .wa-av { width: 60px; height: 60px; font-size: 24px; }
.wa-phead .main { flex: 1; min-width: 0; }
.wa-phead .n { font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; overflow-wrap: anywhere; }
.wa-phead .r { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.wa-phead .b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wa-badge { font-size: 10px; font-weight: 800; letter-spacing: .6px; padding: 3px 8px; border-radius: 6px; color: var(--accent-dark);
  background: var(--accent-pale); border: 1px solid var(--accent-mid); }
.wa-badge.good { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.wa-karma { margin-top: 20px; }
.wa-karma .n { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.wa-karma .row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: none; }
.wa-karma .l { font-size: 14px; color: var(--text-sec); }
.wa-karma .rk { font-size: 13px; color: var(--text-sec); }
.wa-karma .rk b { font-family: inherit; font-variant-numeric: tabular-nums; color: var(--text); }
.wa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; padding: 14px 0;
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.wa-stats > * { text-align: center; padding: 0 4px; color: inherit; }
.wa-stats > * + * { border-left: 1px solid var(--border-soft); }
.wa-stats .v { font-size: 20px; font-weight: 800; }
.wa-stats .k { font-size: 10px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--text-ter); line-height: 1.25; }
.wa-callout { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 16px; background: var(--accent-pale);
  border: 1px solid var(--accent-mid); border-radius: 10px; color: inherit; }
.wa-callout:hover { text-decoration: none; }
.wa-callout .sq { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; }
.wa-callout .main { flex: 1; min-width: 0; }
.wa-callout .t { font-size: 13px; font-weight: 700; }
.wa-callout .s { font-size: 11px; color: var(--text-sec); }
.wa-callout .pill-dark { background: var(--text); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 20px; }
.wa-note { margin-top: 10px; padding: 12px 14px; font-size: 13px; font-style: italic; line-height: 1.5; border-bottom: 1px solid var(--border-soft); }
.wa-note .f { display: block; font-style: normal; font-size: 11px; color: var(--text-sec); margin-top: 4px; }
.wa-since { text-align: center; color: var(--text-ter); font-size: 11px; margin: 20px 0 8px; }

/* "Open in the app" sheet (webapp-appsheet.js): the screen lives in the app; open it or get it. */
.wa-appsheet { margin: auto auto 0; width: 100%; max-width: var(--phone); border-radius: 16px 16px 0 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.wa-appsheet .sub { margin: 0 0 16px; }
.wa-appsheet .btn { margin-top: 8px; }
.wa-appsheet-stores { display: grid; gap: 8px; margin-top: 8px; }
.wa-appsheet-stores:empty { display: none; }

/* Samaj directory (directory_list_view.dart): ShodkkAvatar accent tone (pale orange, orange letter), grey
 * SamajSkillChip (bgSub, 10 w600, radius 4), the bar + sub-tabs pinned together, the match line centred. */
.sm-pin { position: sticky; top: 0; z-index: 5; background: var(--bg); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.sm-pin .wa-subtabs { position: static; }
.sm-pin .gj-bar { position: static; padding-top: 10px; }
.wa-mem .wa-av, a.wa-strip .wa-av { background-color: var(--accent-pale); color: var(--accent); font-weight: 700; }
.wa-mem .wa-skills span { font-size: 10px; font-weight: 600; color: var(--text-sec); background: var(--bg-sub); border-radius: 4px; padding: 3px 8px; }
.wa-mem .t { font-size: 14px; }
.sm-pills { padding-top: 10px; }
.sm-line { justify-content: center; margin: 0 0 4px; }
a.wa-strip { color: inherit; }
a.wa-strip:hover { text-decoration: none; }
.wa-explore a { border: 1px solid var(--border); }
.wa-explore .i { color: var(--accent); }

/* Member page (member_profile_screen.dart + member_profile_sections/). */
.sm-hero { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; }
.sm-photo { position: relative; flex: 0 0 auto; }
.sm-photo .wa-av { width: 68px; height: 68px; font-size: 28px; background-color: var(--accent-pale); color: var(--accent); }
.sm-photo i { position: absolute; right: 0; bottom: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #fff;
  font-style: normal; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.sm-hero .main { flex: 1; min-width: 0; }
.sm-hero .n { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.sm-hero .s { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
.sm-hero .p { font-size: 11px; color: var(--text-ter); margin-top: 2px; }
.sm-hero .p b { font-weight: 600; color: var(--accent); }
.sm-bio { font-size: 12px; line-height: 1.45; margin-top: 12px; }
.sm-badges, .sm-kbadges, .sm-help { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sm-badge { font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 3px 8px; border-radius: 4px; background: rgba(232, 89, 12, .08); color: var(--accent); }
.sm-badge.ink { background: var(--bone); color: var(--text); }
.sm-badge.good { background: var(--success-bg); color: var(--success); }
.sm-badge.accent { background: var(--accent-pale); color: var(--accent); }
.sm-trust { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-sec); margin-top: 12px; }
.sm-self { display: inline-block; font-size: 13px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-chip); margin-top: 10px; }
.sm-intros { font-size: 12px; font-weight: 700; color: var(--success); margin-top: 10px; }
.sm-kbadges span { font-size: 13px; padding: 6px 12px; border-radius: var(--r-chip); background: var(--accent-pale); border: 1px solid var(--accent-mid); }
.sm-stats > * { text-align: left; }
.sm-help span { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-pale); border-radius: 8px; padding: 6px 12px; }
.sm-act { margin-top: 24px; }

/* Profile (my_profile_screen.dart): karma, label and the week's gain on one baseline; ✏ icon; stats left-aligned. */
.wa-karma .top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wa-karma .top .l { font-size: 14px; color: var(--text-sec); }
.wa-karma .wk { font-size: 12px; font-weight: 700; color: var(--success); }
.wa-karma .wa-bar { margin-top: 10px; }
.wa-karma .row .wa-meta { font-size: 11px; }
.wa-karma .row .rk { font-size: 11px; }
.wa-pedit { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-sec); flex: 0 0 auto;
  border-radius: 50%; align-self: flex-start; }
.wa-pedit:hover { background: var(--bone); }
.wa-phead .wa-av { background-color: var(--text); }
.wa-badge { font-weight: 700; letter-spacing: .3px; border-radius: 4px; border: 0; color: var(--accent); background: rgba(232, 89, 12, .08); }
.wa-badge.good { border: 0; }
.pf-stats > * { text-align: left; padding: 0 0 0 8px; }
.pf-stats > :first-child { padding-left: 0; }
/* ── Chrome per page, as the app (sync audit o19b, section 1) ────────────────
 * The app draws a header row only on Home (_SangamHeader). Every other /me page (they all carry
 * data-journey on <body>) has no website header row; WS.chrome() adds .wa-nohead on /give pages.
 * Language lives in Profile → Settings in the app, so the 🌐 leaves the Home header for a member
 * (Profile's Language row still opens the same sheet). Pushed routes outside the app's shell
 * (Garaj post / compose / SOS, the bell list, Your invites) have no bottom bar: .wa-nobar. */
body[data-journey] .site-header { display: none; }
body.wa-hide-lang .site-header .lang-btn { display: none; }
body.wa-app.wa-nobar { --wa-bottom-nav: 0px; padding-bottom: env(safe-area-inset-bottom); }
body.wa-app.wa-nobar .appbar { bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
body.wa-nobar.wa-pushed .cta { bottom: 0; }
body.wa-nobar .wa-toast { bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ── Home (shodkk_home_screen.dart): 24px sides (space2xl), header scrolls with the page ── */
body.wa-homepage { --gutter: 24px; }
body.wa-homepage .site-header { position: static; border-bottom: 0; background: var(--card); padding-top: calc(6px + env(safe-area-inset-top)); }
body.wa-homepage .site-header .right { gap: 8px; }
body.wa-homepage .wa-title { margin-top: 10px; }
/* 🔔 + unread badge (_NotificationBell): 24px outline bell, red 16px pill, white 1.5px ring. */
.wa-hd-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  color: var(--text); flex: 0 0 auto; }
.wa-hd-bell::after { content: ''; position: absolute; inset: -6px; }
.wa-hd-bell:hover { text-decoration: none; }
.wa-badge-n { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 9px; font-weight: 800; line-height: 13px; text-align: center;
  border: 1.5px solid var(--card); }
/* Profile ring (ProfileCompletionChip): 34px ring, accent arc, percent in the middle. */
.wa-hd-ring { position: relative; width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; color: var(--text); }
.wa-hd-ring svg { position: absolute; inset: 0; }
.wa-hd-ring b { position: relative; font-size: 10px; font-weight: 800; line-height: 1; }
.wa-hd-ring:hover { text-decoration: none; }
.wa-hd-av { background-color: var(--text); }

/* The waiting status card (MembershipStatusCard _Frame): accent 8 % fill, 30 % border, r16, pad 12. */
#vStatus.ms-card { margin: 12px -8px 4px; padding: 12px; border-radius: var(--r-card); background: rgba(232, 89, 12, .08);
  border: 1px solid rgba(232, 89, 12, .30); }
#vStatus.ms-card h1 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
#vStatus.ms-card .lede { font-size: 13px; margin-bottom: 4px; }
#vStatus.ms-card .ms-steps { margin: 8px 0; }

/* First steps (FirstStepsCard): white card r16, 1px border, pad 12, 16px sides. */
.hm-first { margin: 12px -8px 0; padding: 4px 12px 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); }
.hm-first-h { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.hm-first-h b { font-size: 16px; font-weight: 700; }
.hm-x { width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--text-sec); font-size: 16px; cursor: pointer; }
.hm-step { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: inherit; text-decoration: none; border-radius: var(--r-input); }
.hm-step:hover { text-decoration: none; background: var(--bg-sub); }
.hm-step .n { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--text-sec); color: var(--text-sec);
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.hm-step.done .n { border: 0; background: var(--success); }
.hm-step.done .n::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 800; }
.hm-step .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hm-step .t { font-size: 13px; font-weight: 600; color: var(--text); }
.hm-step .s { font-size: 11px; color: var(--text-sec); }
.hm-step .chev { color: var(--text-sec); font-size: 22px; line-height: 1; }

/* For you today (ForYouSlider): 90 % wide pages, 6px apart, gradient card r16, dots. */
.hm-fy { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  scrollbar-width: none; }
.hm-fy::-webkit-scrollbar { display: none; }
.hm-fy-card { flex: 0 0 90%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: flex-start; min-height: 188px;
  padding: 16px; border-radius: var(--r-card); background: linear-gradient(135deg, var(--accent-pale), var(--accent-mid));
  border: 1px solid rgba(232, 89, 12, .45); }
.hm-fy-card.gold { background: linear-gradient(135deg, #FEF3E2, #FDE7C4); border-color: rgba(192, 112, 0, .45); }
.hm-fy-card .tag { padding: 5px 10px; border-radius: var(--r-chip); background: var(--card); color: var(--accent-dark); font-size: 10px;
  font-weight: 800; letter-spacing: 1px; }
.hm-fy-card.gold .tag, .hm-fy-card.gold .m { color: #C07000; }
.hm-fy-card .t { margin-top: 10px; font-size: 15px; font-weight: 800; line-height: 1.34; letter-spacing: -.2px; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hm-fy-card .m { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--accent-dark); }
.hm-fy-card .btn { width: auto; min-height: 0; margin: auto 0 0; padding: 9px 16px; font-size: 13px; }
.hm-fy-card.gold .btn { background: #C07000; border-color: #C07000; }
.hm-dots { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.hm-dots i { width: 5px; height: 5px; border-radius: 2px; background: var(--border); transition: width .2s; }
.hm-dots i.on { width: 20px; background: var(--accent); }

/* SangamMomentCard: kind colour (--k) 8 % fill, 32 % border, r16, pad 13, action pill on the right. */
.hm-moment { display: flex; align-items: center; gap: 12px; padding: 13px; margin-bottom: 9px; border-radius: var(--r-card); color: inherit;
  background: color-mix(in srgb, var(--k) 8%, #fff); border: 1px solid color-mix(in srgb, var(--k) 32%, #fff); }
.hm-moment:hover { text-decoration: none; }
.hm-moment .ico { font-size: 20px; flex: 0 0 auto; }
.hm-moment .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-moment .t { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-moment .s { font-size: 11px; color: var(--text-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-moment .pill { flex: 0 0 auto; padding: 5px 10px; border-radius: var(--r-chip); border: 0; font-size: 11px; font-weight: 700;
  color: var(--k); background: color-mix(in srgb, var(--k) 16%, #fff); }

/* _EmptyCta: grey card r16, accent icon, grey line, accent pill. */
.hm-emptycta { margin: 4px 0; padding: 16px 12px; text-align: center; background: var(--bg-sub); border: 1px solid var(--border-soft);
  border-radius: var(--r-card); }
.hm-emptycta .ico { font-size: 24px; }
.hm-emptycta p { margin: 8px 0 0; font-size: 13px; color: var(--text-sec); }
.hm-cta { display: inline-block; margin-top: 12px; padding: 9px 16px; border-radius: var(--r-chip); background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; }
.hm-cta:hover { text-decoration: none; }

/* Garaj live board on Home: dense HelpPostTile rows (no avatar, no category badge). */
#cardBoard { --gj-green: #4CAF50; --gj-amber: #C07000; --gj-blue: #2563EB; }
.hm-board .gj-tile:last-child { border-bottom: 0; }

/* Boost a samaj business (Vyapaar teasers). */
.hm-cap { margin: -2px 0 8px; font-size: 11px; line-height: 1.35; color: var(--text-sec); }
.hm-ask { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: inherit; }
.hm-ask:hover { text-decoration: none; }
.hm-ask .ico { width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--r-chip); display: inline-flex; align-items: center;
  justify-content: center; font-size: 18px; background: color-mix(in srgb, var(--k) 14%, #fff); }
.hm-ask .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-ask .t { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-ask .s { font-size: 12px; color: var(--text-sec); }
.hm-ask .chev { color: var(--text-ter); font-size: 18px; }
.hm-teaser { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-card); background: var(--accent-pale);
  border: 1px solid var(--accent-mid); color: var(--accent-dark); }
.hm-teaser:hover { text-decoration: none; }
.hm-teaser > span:first-child { font-size: 22px; }
.hm-teaser b { flex: 1; font-size: 11px; font-weight: 600; line-height: 1.35; }

/* Apna Business tile. */
.hm-apna { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: var(--r-card); background: var(--accent-pale);
  border: 1px solid var(--accent-mid); margin-bottom: 16px; }
.hm-apna-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; }
.hm-apna-main:hover { text-decoration: none; }
.hm-apna-main .ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--accent-dark); display: inline-flex;
  align-items: center; justify-content: center; font-size: 22px; }
.hm-apna-main .main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-apna-main b { font-size: 14px; font-weight: 800; }
.hm-apna-main .main > span { font-size: 11px; color: var(--text-sec); }
.hm-apna-list { flex: 0 0 auto; padding: 7px 12px; border-radius: var(--r-chip); background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.hm-apna-list:hover { text-decoration: none; }

/* Kosh — open & transparent (KoshTransparencyCard on an AppCard, cardAlt). */
.hm-kosh { display: block; padding: 16px; border-radius: var(--r-card); background: var(--bg-sub); border: 1px solid var(--border-soft); color: inherit; }
.hm-kosh:hover { text-decoration: none; }
.hm-kosh .t { display: block; font-size: 15px; font-weight: 800; }
.hm-kosh .s { display: block; margin-top: 2px; font-size: 11px; color: var(--text-sec); }
.hm-kosh-last { margin: 10px 0 0; font-size: 11px; color: var(--text-sec); }
.hm-kosh-last b { color: var(--text); }

/* ── The bell list (/me/notifications, ShodkkNotificationsScreen) ─────────────
 * KoshHeader + "Mark all read" (12 w600 accent), pill tabs (11 w600, ink when on), KoshSectionLabel
 * Today / Earlier, rows 20px sides with a 38px tinted emoji circle, title 13.5 (bold unread), time
 * JetBrains Mono 10, body 12.5 grey, 8px accent dot, chevron; unread rows on #FAFAFA. */
.nt-all { border: 0; background: none; padding: 8px 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; }
.nt-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px calc(-1 * var(--gutter)) 0; padding: 0 20px 8px; scrollbar-width: none; }
.nt-tabs::-webkit-scrollbar { display: none; }
.nt-tab { flex: 0 0 auto; padding: 5px 12px; border-radius: var(--r-chip); border: 1px solid var(--border); background: var(--card);
  font: inherit; font-size: 11px; font-weight: 600; color: var(--text-sec); cursor: pointer; min-height: 30px; }
.nt-tab[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.nt-sec { padding: 18px 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: var(--text-ter); }
.nt-row { display: flex; align-items: flex-start; gap: 12px; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter));
  padding: 14px 20px; border: 0; border-bottom: 1px solid var(--border); background: var(--card); text-align: left; font: inherit;
  color: inherit; cursor: pointer; }
.nt-row.un { background: var(--bg-sub); }
.nt-row:hover { background: var(--bone); }
.nt-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; background: color-mix(in srgb, var(--c) 10%, #fff); }
.nt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nt-top { display: flex; gap: 8px; align-items: baseline; }
.nt-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.nt-row.un .nt-t { font-weight: 700; }
.nt-time { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 10px; color: var(--text-ter); white-space: nowrap; }
.nt-b { font-size: 12.5px; line-height: 1.4; color: var(--text-sec); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nt-closed { font-size: 11px; font-weight: 700; color: var(--success); }
.nt-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: var(--accent); }
.nt-chev { color: var(--text-ter); font-size: 18px; line-height: 1; margin-top: 1px; }
.nt-empty { padding: 56px 24px; text-align: center; color: var(--text-sec); }
.nt-empty .e { font-size: 40px; }
.nt-empty b { display: block; margin-top: 8px; font-size: 16px; color: var(--text); }
.nt-empty p { margin: 6px 0 0; font-size: 13px; }
.nt-sheet .nt-sh-h { display: flex; gap: 8px; align-items: flex-start; }
.nt-sheet h2 { font-size: 14px; font-weight: 700; margin: 0; }
.nt-sheet p { font-size: 13px; line-height: 1.45; }

/* The ↻ button (webapp-refresh.js) is the mouse fallback for pull to refresh; on a phone the app
 * has only the pull gesture, so a touch screen gets the gesture alone. */
@media (hover: none) and (pointer: coarse) { #waRefreshBtn { display: none !important; } }
#vStatus.ms-card.compact #stTitle, #vStatus.ms-card.compact #stLede, #vStatus.ms-card.compact #stepSignup,
#vStatus.ms-card.compact #stepIdentity { display: none; }
#vStatus.ms-card.compact .ms-steps { margin-top: 0; }

/* ── Edit profile (/me/profile/edit, me-profile-edit.js) ────────────────────
 * The app's Edit Profile tabs as cards on one page: field labels 13 w700 textMid, filled inputs,
 * the gender chips (EditChoiceChipRow), one Save. A field the Kosh apply asked for (?need=) gets an
 * accent edge and a "Needed to apply" tag; ?focus= gets the edge only. */
.pe-form .pe-sec { margin-top: 12px; }
.pe-form .pe-sec legend { padding: 0; }
.pe-f { padding: 2px 0 4px; }
.pe-f + .pe-f { margin-top: 6px; }
.pe-need, .pe-focus { border-left: 3px solid var(--accent); margin-left: -16px; padding-left: 13px; }
.pe-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--accent-pale);
  color: var(--accent-ink); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.pe-why { margin: 4px 0 0; }
.pe-err { color: var(--danger-ink); font-size: 12.5px; margin-top: 4px; }
.pe-form [aria-invalid="true"] { border-color: var(--danger-ink); }
.pe-form input[type=date] { width: 100%; font: inherit; font-size: 16px; color: var(--text); background: #fff; min-height: 46px;
  border: 1px solid var(--border); border-radius: var(--r-input); padding: 10px 14px; }
.pe-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-seg .wa-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.pe-seg .wa-chip input { accent-color: var(--accent); margin: 0; }
.pe-seg .wa-chip:has(input:checked) { background: var(--text); color: #fff; border-color: var(--text); }
.pe-seg .wa-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pe-photo { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 14px 16px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-card); flex-wrap: wrap; }
.pe-photo.pe-need, .pe-photo.pe-focus { margin-left: 0; padding-left: 16px; border-left-width: 3px; border-left-color: var(--accent); }
.pe-photo .main { flex: 1; min-width: 0; }
.pe-photo .t { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.pe-photo .pe-err { flex-basis: 100%; }
.pe-av.wa-av { width: 72px; height: 72px; font-size: 28px; background-size: cover; background-position: center; }
.pe-pbtn.btn { width: auto; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; min-height: 40px; }
.pe-prm { display: block; color: var(--danger-ink); min-height: 36px; }
.pe-save.btn { margin-top: 16px; }
.pe-photo { position: relative; }
.pe-photo input.visually-hidden { width: 1px !important; padding: 0 !important; border: 0 !important; }
.pe-form span.field { display: block; font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.pe-form .pe-sec { min-width: 0; }
/* Edit profile · Skills and Privacy (o20 round 2) */
.pe-sec.pe-need, .pe-sec.pe-focus { margin-left: 0; border-left-width: 3px; border-left-color: var(--accent); }
.pe-q { font-weight: 700; margin: 2px 0 4px; }
.pe-sgroup { margin: 12px 0 6px; }
.pe-skills .wa-chip { min-height: 36px; font-size: 12.5px; }
.pe-addskill { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.pe-addskill .input { flex: 1; min-width: 0; margin: 0; min-height: 44px; }
.pe-addskill .linkbtn { flex: 0 0 auto; min-height: 44px; font-weight: 800; }
.pe-sw { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0 4px; }
.pe-sw + .hint { margin-top: 0; }
.pe-sw label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pe-sw label .hint { margin: 0; font-weight: 400; }
.pe-sw input[type=checkbox] { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); flex: 0 0 auto; }
.pe-sw.pe-need, .pe-sw.pe-focus { padding-left: 13px; }
/* /me/admin/approvals (me-admin-approvals.js): one card per person waiting. */
.ad-alerts { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.ad-alerts input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent); }
.ad-alerts b { display: block; }
.ad-alerts .hint { display: block; margin-top: 4px; }
.ad-card { margin-top: 12px; }
.ad-top { display: flex; gap: 14px; align-items: flex-start; }
.ad-photo { width: 88px; height: 88px; border-radius: 16px; flex: 0 0 auto; background: var(--bone) center/cover no-repeat; }
.ad-photo.empty { display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; color: var(--text-ter); }
.ad-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; color: var(--text-sec); }
.ad-who .ad-name { font-size: 17px; color: var(--text); overflow-wrap: anywhere; }
.ad-meta { font-size: 12px; }
.ad-rows { display: grid; gap: 4px; margin-top: 12px; font-size: 14px; }
.ad-st { color: var(--accent-dark); font-weight: 700; }
.ad-phone a { font-weight: 700; }
.ad-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ad-btns .btn { margin: 0; }
.ad-reject textarea { width: 100%; margin-top: 6px; }

/* Kosh first (2026-10-21, kosh-first.js): the hero at the top of /me/kosh, as the app's
   KoshFirstHero — accent-pale card, three white action rows, How Kosh works. */
.kf-hero { margin: 12px 0 0; padding: 16px; background: var(--accent-pale); border: 1px solid var(--accent-mid);
  border-radius: var(--r-card, 16px); }
.kf-hero .kf-t { font-size: 18px; font-weight: 800; line-height: 1.2; margin: 0; }
.kf-hero .kf-b { color: var(--text-sec); font-size: 13px; margin: 4px 0 12px; }
.kf-act { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; margin-top: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-input, 12px); text-decoration: none; }
.kf-act .e { font-size: 22px; }
.kf-act .m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kf-act .m b { color: var(--accent-ink); font-size: 14px; }
.kf-act .m span { color: var(--text-sec); font-size: 12px; }
.kf-act .c { color: var(--text-ter, #A1A1AA); font-size: 20px; }
.kf-how { margin-top: 12px; font-size: 13px; }
.kf-how ol { margin: 6px 0 0; padding-left: 20px; color: var(--text-sec); }
.kf-how li + li { margin-top: 4px; }

/* Profile-first scholarship apply (scholar-profile.js, 2026-10-23): the "fill your study details" card,
   "My documents" rows, and the step-2 "From your profile" card. Tokens only. */
.sp-card { display: block; background: var(--accent-pale); border: 1px solid var(--accent-mid); border-radius: 16px; padding: 16px;
  font-size: 14px; line-height: 1.5; }
.sp-card p { margin: 0; }
.sp-card .sp-t { font-size: 16px; font-weight: 700; line-height: 1.4; }
.sp-card .sp-t + .sp-t { margin-top: 4px; }
.sp-card .sp-b { margin-top: 4px; color: var(--text-sec); }
.sp-prog { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-sec); margin: 12px 0 4px; }
.sp-prog b { color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.sp-bar { display: block; height: 8px; border-radius: 999px; background: #fff; border: 1px solid var(--accent-mid); overflow: hidden; }
.sp-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.sp-card .sp-left { margin-top: 8px; font-size: 12px; color: var(--text-sec); }
.sp-card .kx-btn, .sp-card-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 16px;
  padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 700; background: var(--accent); color: #fff; text-decoration: none; }
.sp-docs { margin-top: 12px; }
.sp-doc { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.sp-doc > div:first-child { min-width: 0; }
.sp-doc-act { display: flex; gap: 8px; align-items: center; flex-shrink: 0; position: relative; }
.sp-doc-act .btn { width: auto; margin: 0; }
.sp-once { font-weight: 600; color: var(--accent-ink); background: var(--accent-pale); border: 1px solid var(--accent-mid);
  border-radius: var(--r-card-sm); padding: 10px 12px; font-size: 13.5px; line-height: 1.4; }
.sp-from .sp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-from .sp-head .btn { width: auto; margin: 0; }