/* TrainHer Pro polish (Oct 2026). Loaded last on every page.
   App, client portal, onboarding, waivers and sign-in: one clean sans (Inter), soft rounded controls, gentle depth.
   The public marketing site (body.pub) keeps its editorial serif headlines. */

body:not(.pub) {
  --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: var(--ui-font); --text: var(--ui-font); --f-head: var(--ui-font); --f-body: var(--ui-font);
  --th-display: var(--ui-font); --th-body: var(--ui-font);
  --r-btn: 12px; --r-field: 10px; --r-card: 16px;
  --lift: 0 1px 2px rgba(17,17,19,.06), 0 4px 14px -6px rgba(17,17,19,.12);
  --lift-red: 0 1px 2px rgba(158,21,34,.25), 0 6px 16px -6px rgba(194,26,43,.45);
  font-family: var(--ui-font);
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.006em;
}
html[data-theme="dark"] body:not(.pub) { --lift: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(0,0,0,.7); }

/* One typeface everywhere in the app; the serif and script faces are gone. */
body:not(.pub) :where(*):not(code, pre, kbd, svg, svg *, .wordmark, .wordmark *, .lockup, .lockup *) { font-family: var(--ui-font) !important; }
body:not(.pub) :is(h1, h2, h3, h4) { font-weight: 700 !important; letter-spacing: -0.022em !important; font-style: normal !important; }
body:not(.pub) :is(h2, h3) { font-weight: 650 !important; }
body:not(.pub) .tile h2 { font-weight: 750 !important; font-style: normal !important; letter-spacing: -0.03em !important; }
body:not(.pub) :is(.pw-quote, .tile h2 i, em.display) { font-style: normal !important; }
body:not(.pub) .pw-quote { font-weight: 600 !important; font-size: clamp(17px, 4.6vw, 20px) !important; border-left-width: 4px; border-radius: var(--r-card) !important; }

/* ---------- buttons: rounded, soft depth, no shouting caps ---------- */
body :is(.btn, button, .icon-btn, .submit, .opt, .pick, .kind, .choice a, .later, .solo, .pro, .org, .foot .pw, .pvbar a, .pvbar button, .wz-up .go, .wz-up .try, .palette button, .drop, .winfo,
  a.btn, [class*="-btn"], [role="button"], .tp-btn, .cw-btn, .kp-btn) { border-radius: var(--r-btn, 12px) !important; }
body :is(input:not([type=radio]):not([type=checkbox]), select, textarea) { border-radius: var(--r-field, 10px) !important; }
body :is(.chip span, .pill, .tag, .tier-flag, .period-switch, .period-switch button) { border-radius: 999px !important; }
body.app .side nav a { border-radius: 10px !important; }

body:not(.pub) :is(.btn, .tp-btn, .cw-btn, .kp-btn) {
  text-transform: none !important; letter-spacing: -0.005em !important; font-weight: 600 !important;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease !important;
}
body:not(.pub) .tp-btn { font-size: 15.5px !important; min-height: 50px; }
body:not(.pub) :is(.btn-primary, .tp-btn.pri, .cw-btn.pri, .kp-btn.pri) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%) !important;
  box-shadow: var(--lift-red), inset 0 1px 0 rgba(255,255,255,.18) !important;
  border-color: transparent !important; border-bottom-color: transparent !important;
}
body:not(.pub) :is(.btn-ghost, .tp-btn:not(.pri), .cw-btn:not(.pri), .kp-btn:not(.pri)) {
  background-color: var(--th-black, #fff); border-color: var(--th-line) !important; box-shadow: var(--lift);
}
html[data-theme="dark"] body:not(.pub) :is(.btn-ghost, .tp-btn:not(.pri), .cw-btn:not(.pri), .kp-btn:not(.pri)) { background-color: var(--th-surface-2); }
@media (hover: hover) {
  body:not(.pub) :is(.btn, .tp-btn, .cw-btn, .kp-btn):hover { transform: translateY(-1px); }
  body:not(.pub) :is(.btn-ghost, .tp-btn:not(.pri), .cw-btn:not(.pri), .kp-btn:not(.pri)):hover { border-color: var(--th-edge) !important; }
}
body:not(.pub) :is(.btn, .tp-btn, .cw-btn, .kp-btn):active { transform: translateY(0) scale(.985); box-shadow: none !important; }
body:not(.pub) .btn { height: 40px; padding: 0 16px; }
body:not(.pub) .btn-sm { height: 34px; padding: 0 12px; }
@media (pointer: coarse) { body:not(.pub) .btn-sm { height: 40px; } }
body:not(.pub) .theme-btn { border-radius: 10px !important; }

/* ---------- fields ---------- */
body:not(.pub) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea) {
  border-color: var(--th-line) !important; background-color: var(--th-black, #fff) !important; box-shadow: inset 0 1px 2px rgba(17,17,19,.04);
  transition: border-color .15s, box-shadow .15s;
}
html[data-theme="dark"] body:not(.pub) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea) { background-color: var(--th-surface-2) !important; }
body:not(.pub) :is(input, select, textarea):hover:not(:focus) { border-color: var(--th-edge) !important; }
body:not(.pub) :is(input, select, textarea):focus { border-color: var(--th-red) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--th-red) 14%, transparent) !important; outline: none; }
body:not(.pub) input[type=file]::file-selector-button { font: 600 13px var(--ui-font); padding: 8px 14px; border-radius: 10px; border: 1px solid var(--th-line); background: var(--th-black, #fff); color: var(--th-text); margin-right: 10px; cursor: pointer; }

/* ---------- cards and panels: softer corners, light lift ---------- */
body.app :is(.panel, .card, .tile, .stat, .stats, .kp-sec, .kp-head, .fbar, details.add, .table-wrap, .tw) { border-radius: var(--r-card) !important; }
body.app :is(.panel, .tile, .kp-sec) { box-shadow: var(--lift); border-color: var(--th-line); }
body.app .tile { transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) { body.app a.tile:hover, body.app .tile:has(> a):hover { transform: translateY(-2px); } }
body:not(.pub) :is(.tp-card, .cal, .pw-badge, .pw-top > div, .pw-ex, .wv-legal, .cw-card) { border-radius: var(--r-card) !important; }
body:not(.pub) .tp-card { box-shadow: var(--lift); border-color: var(--th-line) !important; }
body:not(.pub) .wv-legal { background: var(--th-surface-2) !important; border-color: var(--th-line) !important; color: var(--th-text-2); }
body:not(.pub) .wv-pad { border-radius: var(--r-card) !important; }
body.app .flash, body:not(.pub) :is(.tp-ok, .tp-err) { border-radius: 12px !important; }
body.app table { border-radius: 12px; }

/* ---------- small fixes ---------- */


/* Portal check-in scale: readable numbers, rounded tiles. */
body:not(.pub) .pg-scale span { border-radius: 12px !important; color: var(--th-text) !important; background: var(--th-black, #fff) !important; }
body:not(.pub) .pg-scale input:checked + span { background: var(--acc) !important; color: #fff !important; box-shadow: var(--lift-red); }
/* Chat bubbles read as chat. */
body:not(.pub) .pg-msg { border-radius: 18px !important; }
body:not(.pub) .pg-msg.me { border-bottom-right-radius: 6px !important; }
body:not(.pub) .pg-msg.them { border-bottom-left-radius: 6px !important; color: var(--th-text) !important; background: var(--th-surface-2) !important; }
/* Bottom tab bar in the portal: a little frosted. */
body:not(.pub) .pw-tabs { backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
/* Onboarding step chips: rounded. */
body:not(.pub) :is(.ob-steps a, .ob-steps span, .ob-step) { border-radius: 999px !important; }

/* Home tiles: clean bold titles, a red rule, and an Open pill. */
body.app .tile h2 b { font-style: normal !important; font-weight: 750 !important; color: var(--th-text) !important; }
body.app .tile h2 { font-size: clamp(24px, 3vw, 30px) !important; display: flex; align-items: center; gap: 12px; }
body.app .tile h2::before { content: ""; width: 6px; height: 28px; border-radius: 6px; background: var(--th-red); flex: none; }
body.app .tile .tile-go { padding: 7px 14px; border-radius: 999px; background: var(--th-red); color: #fff !important; font-size: 13px; font-weight: 600; box-shadow: var(--lift-red); }
body.app .tile .tile-go::after { content: " \2192"; }
body.app .tiles { gap: 16px; }

/* Back link reads as a link, not a stray chevron. */
body.app .back-arrow { display: inline-flex !important; align-items: center; gap: 4px; padding: 6px 12px 6px 8px; border-radius: 999px !important; border: 1px solid var(--th-line); background: var(--th-black, #fff); color: var(--th-text-2) !important; font-size: 13.5px; font-weight: 600; text-decoration: none; box-shadow: var(--lift); width: auto !important; height: auto !important; }
body.app .back-arrow:hover { color: var(--th-text) !important; border-color: var(--th-edge); }
/* Client profile: every quick action on one even row. */
body.app .kp-actions { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important; }
body.app .kp-actions .kp-btn { min-height: 52px !important; font-size: 14.5px !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Portal header: her initial in a red circle, taps through to My account. */
.pw-ava { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--acc, #C21A2B); color: #fff; font-weight: 700; font-size: 13px; }
.pw-me { color: var(--c-white) !important; font-weight: 600; }

/* Portal calendar: tidy day cells, the dot sits under the number, today and the chosen day are clear. */
body:not(.pub) .cal-grid { gap: 2px !important; }
body:not(.pub) .cal-grid a, body:not(.pub) .cal-grid span.d { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; aspect-ratio: auto !important; height: 42px; padding: 0 !important; border-radius: 12px !important; color: var(--th-text) !important; font-weight: 500; }
body:not(.pub) .cal-grid .dot::after { position: static !important; transform: none !important; width: 5px; height: 5px; }
body:not(.pub) .cal-grid a:not(.dot)::after { content: ""; width: 5px; height: 5px; }
body:not(.pub) .cal-grid .today { outline: 0 !important; box-shadow: inset 0 0 0 1.5px var(--acc); font-weight: 700; }
body:not(.pub) .cal-grid .sel { background: var(--acc) !important; color: #fff !important; font-weight: 700; }
body:not(.pub) .cal-head a { border-radius: 10px !important; color: var(--th-text) !important; }
body:not(.pub) .cal-head b { font-weight: 650 !important; font-size: 16px !important; }

/* Tables on a phone: compact cards instead of tall stacked cells. */
@media (max-width: 720px) {
  body.app .table tr { display: flex !important; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 14px 14px !important; }
  body.app .table td { display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; font-size: 13px; color: var(--th-text-2); }
  body.app .table td:first-child { flex: 1 0 100%; font-size: 15px; color: var(--th-text); }
  body.app .table.t-leads td:nth-last-child(2)::before { content: "Last activity "; color: var(--th-muted); }
  body.app .table.t-leads td:last-child { display: none !important; }
}