/* ============================================================================
   pk-components.css — shared PipeKloud component classes (the "polish recipe").
   See DOCS/UI_STRATEGY.md §4. Built on tokens from pk-tokens.css. Loaded after it.
   These decorate MudBlazor components (MudPaper/MudTable/etc.) — apply via Class=.
   ============================================================================ */

/* ---- Display type helpers ---- */
.pk-display      { font-family:var(--pk-font-display); font-weight:600; letter-spacing:.005em; }
.pk-num          { font-variant-numeric:tabular-nums; }
.pk-mono         { font-family:var(--pk-font-mono); }
.pk-stat         { font-family:var(--pk-font-display); font-weight:600; line-height:1; color:var(--pk-ink); }
.pk-eyebrow      { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--pk-accent-deep); }
.pk-label        { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pk-ink-3); }

/* ---- Section header (eyebrow + title + rule) ---- */
.pk-sec-h        { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.pk-sec-h .pk-t  { font-family:var(--pk-font-display); font-weight:600; font-size:19px; color:var(--pk-ink); }
.pk-sec-h .pk-rule { flex:1; height:1px; background:linear-gradient(90deg,var(--pk-line),transparent); }

/* ---- Brand app bar wash (apply to MudAppBar) ---- */
.pk-appbar       { background:var(--pk-navy-deep) !important; position:relative; overflow:hidden; }
.pk-appbar::after{ content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
                   background:radial-gradient(120% 180% at 0% 120%, rgba(46,155,230,.45), transparent 55%); }
.pk-appbar > *   { position:relative; z-index:1; }
.pk-logo-mark    { width:36px; height:36px; border-radius:10px; background:var(--pk-grad);
                   display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.35); }

/* ---- KPI filter tile (wrap a clickable MudPaper) ---- */
.pk-kpi          { position:relative; overflow:hidden; cursor:pointer; padding:14px 14px 12px !important;
                   border:1px solid var(--pk-line) !important; border-radius:var(--pk-r) !important;
                   background:var(--pk-surface) !important;
                   transition:transform .15s, box-shadow .2s, border-color .2s; height:100%; }
.pk-kpi:hover    { transform:translateY(-2px); box-shadow:var(--pk-shadow-2) !important; }
.pk-kpi .pk-kpi-ic { width:30px; height:30px; border-radius:8px; background:var(--pk-canvas-2);
                     display:grid; place-items:center; color:var(--pk-blue); }
.pk-kpi .pk-kpi-val{ font-family:var(--pk-font-display); font-weight:600; font-size:30px; line-height:1; color:var(--pk-ink); }
.pk-kpi .pk-kpi-lab{ font-size:11px; color:var(--pk-ink-2); margin-top:4px; font-weight:500; }
.pk-kpi .pk-kpi-sub{ font-size:10.5px; color:var(--pk-ink-3); margin-top:1px; }
/* active = amber rail + lift */
.pk-kpi.pk-active        { border-color:var(--pk-accent) !important; box-shadow:var(--pk-shadow-accent) !important; }
.pk-kpi.pk-active::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
                           background:linear-gradient(var(--pk-accent),var(--pk-accent-deep)); }
.pk-kpi.pk-active .pk-kpi-ic { background:var(--pk-accent-tint); color:var(--pk-accent-deep); }
.pk-kpi .pk-kpi-check        { position:absolute; top:10px; right:10px; color:var(--pk-accent-deep); }
/* danger variant */
.pk-kpi.pk-danger .pk-kpi-val{ color:var(--pk-danger); }
.pk-kpi.pk-danger .pk-kpi-lab{ color:var(--pk-danger); }
.pk-kpi.pk-danger .pk-kpi-ic { background:var(--pk-danger-tint); color:var(--pk-danger); }

/* ---- Goal progress (plan vs actual) ---- */
.pk-goal .pk-g-name { font-size:12px; font-weight:600; color:var(--pk-ink); }
.pk-goal .pk-g-fig  { font-family:var(--pk-font-display); font-size:20px; font-weight:600; }
.pk-goal .pk-g-fig small { font-size:12px; color:var(--pk-ink-3); font-family:var(--pk-font-ui); font-weight:500; }
.pk-bar             { height:10px; border-radius:999px; background:var(--pk-canvas-2); overflow:hidden; }
.pk-bar > i         { display:block; height:100%; border-radius:999px; background:var(--pk-grad);
                      transition:width .5s ease; }
.pk-bar.pk-met > i  { background:linear-gradient(90deg,var(--pk-accent),var(--pk-accent-deep)); }
.pk-goal .pk-g-foot { display:flex; justify-content:space-between; margin-top:6px; font-size:10.5px; color:var(--pk-ink-3); }
.pk-goal .pk-g-foot .pk-pct      { font-weight:700; color:var(--pk-ink-2); }
.pk-goal .pk-g-foot .pk-pct.pk-met { color:var(--pk-accent-deep); }

/* ---- Data table treatment (apply pk-table to MudTable) ---- */
.pk-table .mud-table-head th,
.pk-table thead th {
  font-size:10px !important; letter-spacing:.1em; text-transform:uppercase; color:var(--pk-navy) !important;
  font-weight:700 !important;
  background:linear-gradient(180deg,var(--pk-surface-2),var(--pk-canvas)) !important;
  border-bottom:2px solid var(--pk-line) !important;
}
.pk-table tbody tr:nth-of-type(even) td { background:rgba(21,101,192,.020); }
.pk-table tbody tr:hover td             { background:rgba(21,101,192,.06); cursor:pointer; }
.pk-table tbody tr.pk-row-sel td           { background:rgba(224,145,58,.10) !important; }
.pk-table tbody tr.pk-row-sel td:first-child { box-shadow:inset 3px 0 0 var(--pk-accent); }

/* ---- Scoreboard ---- */
.pk-score-row    { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--pk-line-soft); }
.pk-score-row:last-child { border-bottom:none; }
.pk-score-row.pk-me { background:linear-gradient(90deg,var(--pk-accent-tint),transparent); border-left:3px solid var(--pk-accent); }
.pk-score-rk     { font-family:var(--pk-font-display); font-weight:600; font-size:18px; width:34px; text-align:center; color:var(--pk-ink-3); }
.pk-score-row.pk-me .pk-score-rk, .pk-score-row.pk-podium .pk-score-rk { color:var(--pk-accent-deep); }
.pk-av           { width:32px; height:32px; border-radius:50%; background:var(--pk-grad); color:#fff;
                   display:grid; place-items:center; font-weight:700; font-size:12px; flex-shrink:0; }
.pk-score-nm     { flex:1; font-weight:600; font-size:13px; }
.pk-score-nm small { display:block; font-weight:500; color:var(--pk-ink-3); font-size:11px; }
.pk-score-val    { font-family:var(--pk-font-display); font-weight:600; font-size:17px; }
.pk-score-delta  { font-size:10.5px; color:var(--pk-success); font-weight:600; width:62px; text-align:right; }

/* ---- Expansion panel accent (apply pk-panels to MudExpansionPanels) ---- */
.pk-panel-ic     { width:26px; height:26px; border-radius:7px; background:var(--pk-canvas-2);
                   display:grid; place-items:center; color:var(--pk-blue); }
.pk-kv           { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; font-size:12.5px; }
.pk-kv dt        { color:var(--pk-ink-3); } .pk-kv dd { color:var(--pk-ink); font-weight:500; margin:0; }

/* ---- Accent button / chip (the rare deliberate amber use) ---- */
.pk-btn-accent   { background:linear-gradient(135deg,var(--pk-accent),var(--pk-accent-deep)) !important;
                   color:#fff !important; box-shadow:var(--pk-shadow-accent) !important; }
/* Disabled accent button: drop the gradient for a flat muted fill so the label stays legible
   (MudBlazor's default disabled treatment washes the white text out over the amber gradient). */
.pk-btn-accent.mud-button-disabled,
.pk-btn-accent:disabled {
    background:var(--pk-canvas-2) !important; color:var(--pk-ink-3) !important;
    box-shadow:none !important; }
.pk-chip-accent  { background:var(--pk-accent-tint) !important; color:var(--pk-accent-deep) !important; font-weight:600; }
.pk-chip-pipe    { background:var(--pk-success-tint) !important; color:var(--pk-success) !important; font-weight:600; }
.pk-chip-prospect{ background:var(--pk-canvas-2) !important; color:var(--pk-ink-2) !important; font-weight:600; }
.pk-chip-warn    { background:var(--pk-warning-tint) !important; color:var(--pk-warning) !important; font-weight:600; }

/* ---- Goals dashboard hero (the landing-page headline band) ----
   Deep navy base with a directional brand gradient; kept dark enough that white text and
   the headline figure stay high-contrast (the earlier wash was too light on the right). */
.pk-goals-hero        { position:relative; overflow:hidden; border:none; border-radius:var(--pk-r-lg);
                        background:linear-gradient(115deg, #06203F 0%, var(--pk-navy-deep) 42%, var(--pk-navy) 100%);
                        box-shadow:var(--pk-shadow-2); }
.pk-goals-hero-wash   { position:absolute; inset:0; pointer-events:none;
                        background:radial-gradient(120% 180% at 6% 130%, rgba(46,155,230,.40), transparent 52%),
                                   radial-gradient(80% 140% at 102% -10%, rgba(224,145,58,.20), transparent 55%); }
.pk-goals-hero-body   { position:relative; z-index:1; padding:24px 26px; }
/* high-contrast hero text roles */
.pk-hero-name  { color:#FFFFFF; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.pk-hero-sub   { color:#BBD4EE; }
.pk-hero-eyebrow { color:#7FC4FF; }
.pk-hero-stat-lab { color:#BBD4EE; }
.pk-hero-stat  { color:#FFFFFF; text-shadow:0 2px 18px rgba(0,0,0,.4); }
.pk-hero-stat-met { color:var(--pk-accent); }

/* ---- Slick select treatment (control bar: period / year / quarter / member) ----
   Wrap a MudSelect in .pk-select. Compact, pill-ish, branded focus + chevron. */
.pk-select-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pk-select .mud-input-control { margin:0; }
/* MudBlazor 9: the visible input box is `.mud-input` (NOT `.mud-input-root`). Put the
   slightly-rounded rectangle (border + shadow) on it as ONE container; the inner slot/input
   stay transparent so there's no second blob hugging the text. */
.pk-select .mud-input {
    background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:var(--pk-r-sm);
    padding:5px 6px 5px 12px; min-height:0; transition:border-color .15s, box-shadow .15s;
    box-shadow:var(--pk-shadow-1);
}
.pk-select .mud-input:hover { border-color:var(--pk-blue); }
.pk-select .mud-input.mud-focused,
.pk-select .mud-input:focus-within { border-color:var(--pk-blue); box-shadow:var(--pk-shadow-accent); }
.pk-select .mud-input-slot,
.pk-select .mud-select-input {
    font-weight:600; font-size:13px; color:var(--pk-ink); min-height:0;
}
/* kill MudBlazor's underline (we use the box border instead) */
.pk-select .mud-input-underline:before,
.pk-select .mud-input-underline:after { display:none !important; }
.pk-select .mud-input .mud-icon-root { color:var(--pk-ink-3); }
/* the dropdown label sits above as a tiny uppercase tag */
.pk-select-lab { font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
                 color:var(--pk-ink-3); margin:0 0 4px 2px; display:block; text-align:center; }
.pk-select-wrap { display:flex; flex-direction:column; }

/* branded dropdown popover items */
.pk-select-pop .mud-list-item { font-size:13px; font-weight:500; }
.pk-select-pop .mud-selected-item { color:var(--pk-blue) !important; font-weight:700; background:var(--pk-accent-tint) !important; }

/* ---- Period selector chips ---- */
.pk-period-chips .mud-chip { font-weight:600; font-size:12px; }
.pk-period-chips .mud-chip.mud-chip-selected,
.pk-period-chips .mud-chip-selected { background:var(--pk-grad) !important; color:#fff !important; }

/* ---- Legacy-parity dashboard table (the SoarTracker/GoalKloud layout) ---- */
.pk-legacy-table { width:100%; border-collapse:collapse; font-size:13px; }
.pk-legacy-table thead th {
    text-align:left; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
    color:var(--pk-navy); padding:10px 12px;
    background:linear-gradient(180deg,var(--pk-surface-2),var(--pk-canvas));
    border-bottom:2px solid var(--pk-line);
}
.pk-legacy-table thead th.r,.pk-legacy-table td.r { text-align:right; font-variant-numeric:tabular-nums; }
.pk-legacy-table thead th.c,.pk-legacy-table td.c { text-align:center; }
.pk-legacy-table tbody td { padding:10px 12px; border-bottom:1px solid var(--pk-line-soft); }
.pk-legacy-table tbody tr:hover td { background:rgba(21,101,192,.04); }
.pk-legacy-table .metric { font-weight:600; color:var(--pk-ink); }
.pk-legacy-table .metric .help { color:var(--pk-ink-3); margin-left:4px; cursor:help; }
.pk-legacy-table .driver { color:var(--pk-blue); }       /* driver/derived metric names are links in legacy */
.pk-legacy-table .num { font-variant-numeric:tabular-nums; }
.pk-legacy-rowsection td { background:var(--pk-canvas-2); font-size:10px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--pk-ink-2); padding:6px 12px; }

/* COMPLETE% pill — legacy red/amber/green band */
.pk-complete { display:inline-block; min-width:58px; text-align:center; padding:3px 10px; border-radius:6px;
    font-weight:700; font-size:12px; font-variant-numeric:tabular-nums; color:#fff; }
.pk-complete.behind { background:var(--pk-danger); }
.pk-complete.warn   { background:var(--pk-warning); }
.pk-complete.good   { background:var(--pk-success); }
.pk-complete.none   { background:var(--pk-canvas-2); color:var(--pk-ink-3); font-weight:600; }

/* legend dots */
.pk-legend { display:flex; gap:16px; align-items:center; font-size:11.5px; color:var(--pk-ink-2); }
.pk-legend span { display:inline-flex; align-items:center; gap:6px; }
.pk-legend i { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* small icon action buttons in the manual-actions column */
.pk-rowact { display:inline-flex; gap:4px; }
.pk-rowact button { width:26px; height:26px; border:1px solid var(--pk-line); background:var(--pk-surface);
    border-radius:6px; color:var(--pk-ink-2); cursor:pointer; display:grid; place-items:center; }
.pk-rowact button:hover { border-color:var(--pk-blue); color:var(--pk-blue); }

/* period range band (the legacy slider header) */
.pk-period-band { background:var(--pk-navy-deep); color:#fff; border-radius:var(--pk-r); padding:12px 18px;
    position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pk-period-band::after { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
    background:radial-gradient(100% 200% at 0% 130%, rgba(46,155,230,.4), transparent 55%); }
.pk-period-band > * { position:relative; z-index:1; }
.pk-period-band .edge { font-size:11px; letter-spacing:.06em; }
.pk-period-band .edge b { display:block; font-family:var(--pk-font-display); font-size:16px; font-weight:600; }
.pk-period-band .track { flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.18); position:relative; }
.pk-period-band .track > i { position:absolute; top:50%; transform:translateY(-50%); height:6px; border-radius:999px;
    background:linear-gradient(90deg,var(--pk-azure),var(--pk-accent)); }
.pk-period-band .track > b { position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:#fff;
    transform:translate(-50%,-50%); box-shadow:0 2px 6px rgba(0,0,0,.4); }

/* sub-tabs (Manager / Employee / Notes) */
.pk-subtabs { display:flex; gap:4px; border-bottom:1px solid var(--pk-line); }
.pk-subtabs button { border:none; background:transparent; font-family:var(--pk-font-ui); font-weight:600;
    font-size:13px; color:var(--pk-ink-3); padding:8px 14px; cursor:pointer; border-bottom:2px solid transparent; }
.pk-subtabs button.on { color:var(--pk-blue); border-bottom-color:var(--pk-blue); }

/* ---- Plan editor (Set My Plan / Goal Calculator) ---- */
.pk-driver { margin-bottom:12px; }
.pk-driver > label { display:block; font-size:11px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:var(--pk-blue); margin-bottom:3px; }  /* driver labels = blue */

.pk-plan-table { width:100%; border-collapse:collapse; font-size:13px; }
.pk-plan-table thead th { text-align:left; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    font-weight:700; color:var(--pk-navy); padding:8px 10px;
    background:linear-gradient(180deg,var(--pk-surface-2),var(--pk-canvas)); border-bottom:2px solid var(--pk-line); }
.pk-plan-table th.r, .pk-plan-table td.r { text-align:right; font-variant-numeric:tabular-nums; }
.pk-plan-table tbody td { padding:7px 10px; border-bottom:1px solid var(--pk-line-soft); }
.pk-plan-table .goal { color:var(--pk-ink-2); font-weight:500; }      /* derived = gray */
.pk-plan-table .goal.driver { color:var(--pk-blue); font-weight:600; } /* driver = blue */
.pk-plan-table td.strong { font-weight:700; color:var(--pk-ink); }
.pk-plan-weights td { background:var(--pk-accent-tint); font-weight:600; padding:6px 10px; }
.pk-wt { width:54px; text-align:right; border:1px solid var(--pk-accent); border-radius:6px;
    padding:3px 6px; font-size:12px; font-weight:700; color:var(--pk-accent-deep); background:var(--pk-surface);
    font-variant-numeric:tabular-nums; }
.pk-wt:focus { outline:none; box-shadow:var(--pk-shadow-accent); }
/* compact variance table on the left panel */
.pk-variance td, .pk-variance th { padding:5px 8px; font-size:12px; }
/* actuals view rows get a faint tint so the Goals/Actuals toggle reads clearly */
.pk-plan-table .pk-actual-row td { background:rgba(21,101,192,.035); }

/* ---- Card / layout primitives ---- */
.pk-card         { background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:var(--pk-r); box-shadow:var(--pk-shadow-1); }
.pk-grad-text    { background:var(--pk-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pk-canvas-bg    { background:var(--pk-canvas); }

/* Wide page: cancel MainLayout's horizontal pa-4 (16px) gutter and substitute a slimmer one,
   so a two-column dashboard+scoreboard layout gets more horizontal room. Page-scoped (opt-in). */
.pk-wide-page { margin-left:-12px; margin-right:-12px; }
@media (min-width:600px) { .pk-wide-page { margin-left:-16px; margin-right:-16px; } }

/* ---- Scoreboard (Phase 4) — ranked peer board + compare groups ---- */
.pk-sb-search .mud-input-control { margin:0; }
/* scroll container so auto-scroll-to-self keeps the page still */
.pk-sb-scroll { max-height:62vh; overflow-y:auto; border:1px solid var(--pk-line); border-radius:var(--pk-r);
    box-shadow:var(--pk-shadow-1); }
.pk-sb-table { width:100%; }
.pk-sb-table thead th { position:sticky; top:0; z-index:2; text-align:left;
    font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--pk-navy);
    padding:10px 12px; background:linear-gradient(180deg,var(--pk-surface-2),var(--pk-canvas));
    border-bottom:2px solid var(--pk-line); }
.pk-sb-table tbody td { padding:8px 12px; border-bottom:1px solid var(--pk-line-soft); font-size:13px; }
.pk-sb-table tbody tr:hover td { background:rgba(21,101,192,.04); }
.pk-sb-sort { cursor:pointer; user-select:none; }
.pk-sb-sort:hover { color:var(--pk-blue); }
.pk-sb-rank { font-variant-numeric:tabular-nums; font-weight:700; color:var(--pk-ink-2); }
.pk-sb-nogoal { color:var(--pk-ink-3); }
.pk-sb-chip { color:var(--pk-ink-3) !important; font-size:10px !important; height:18px !important; }

/* the signed-in user's pinned row — accent rail + tint, stays highlighted */
.pk-sb-self td { background:var(--pk-accent-tint) !important; font-weight:700; }
.pk-sb-self td:first-child { box-shadow:inset 3px 0 0 var(--pk-accent-deep); }

/* inline %goal mini-bar + value inside a table cell */
.pk-sb-pct { display:flex; align-items:center; gap:8px; }
.pk-sb-pct .pk-bar { height:8px; }
.pk-sb-pct .pk-pct { font-weight:700; color:var(--pk-ink-2); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
.pk-sb-pct .pk-pct.pk-met { color:var(--pk-accent-deep); }

/* the small public peer card dialog */
.pk-sb-card { position:relative; padding:6px 4px; }
.pk-sb-card-rank { position:absolute; top:0; right:0; font-family:var(--pk-font-display); font-weight:700;
    font-size:30px; color:var(--pk-accent-deep); opacity:.85; }

/* ── Admin identity-borrow ("Become User") banner ─────────────────────────────
   Persistent strip shown while an admin is viewing as another user. Amber/warning
   wash signals "special mode"; full-POST Stop button restores the real identity. */
.pk-impersonation-banner {
    display:flex; align-items:center; gap:6px;
    margin:-8px -8px 12px -8px; padding:6px 14px;
    background:var(--pk-warning-tint);
    border:1px solid var(--pk-warning);
    border-radius:8px;
    color:var(--pk-warning);
    font-family:var(--pk-font-ui, inherit); font-size:13px;
}
.pk-impersonation-banner .pk-imp-text { color:var(--pk-ink-2); }
.pk-impersonation-banner .pk-imp-text strong { color:var(--pk-warning); font-variant-numeric:tabular-nums; }
.pk-impersonation-banner .pk-imp-spacer { flex:1 1 auto; }
.pk-impersonation-banner .pk-imp-form { margin:0; }
.pk-impersonation-banner .pk-imp-stop {
    cursor:pointer; border:1px solid var(--pk-warning); background:transparent;
    color:var(--pk-warning); font-weight:700; font-size:12px;
    padding:3px 12px; border-radius:6px; line-height:1.4;
}
.pk-impersonation-banner .pk-imp-stop:hover { background:var(--pk-warning); color:#fff; }

/* ── Auth / sign-in (split brand panel + dense form) ──────────────────────────
   A self-contained, brand-forward sign-in surface. Desktop = two columns (gradient
   brand panel on the left, form on the right). Mobile = the brand panel collapses to
   a compact gradient header strip above a single-column form. Brand color comes from
   tokens only (no hardcoded hex). Used by Pages/Auth/Login.razor. */
.pk-auth-wrap { min-height:calc(100vh - 64px); display:grid; place-items:center; padding:24px 12px 40px; }
.pk-auth-card {
    width:100%; max-width:920px; display:grid; grid-template-columns:1.05fr 1fr;
    background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:var(--pk-r-lg);
    box-shadow:var(--pk-shadow-2); overflow:hidden;
}
/* LEFT — gradient brand panel */
.pk-auth-brand {
    position:relative; overflow:hidden; padding:40px 36px;
    background:linear-gradient(150deg, #06203F 0%, var(--pk-navy-deep) 38%, var(--pk-navy) 72%, #124C8A 100%);
    color:#fff; display:flex; flex-direction:column;
    user-select:none;   /* decorative brand copy isn't meant to be selected/highlighted */
}
.pk-auth-brand::after {
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
    background:radial-gradient(120% 150% at 0% 120%, rgba(46,155,230,.42), transparent 55%),
               radial-gradient(90% 130% at 110% -10%, rgba(224,145,58,.22), transparent 55%);
}
.pk-auth-brand > * { position:relative; z-index:1; }
.pk-auth-logo {
    width:52px; height:52px; border-radius:14px; background:var(--pk-grad);
    display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.4); margin-bottom:22px;
}
.pk-auth-brand h1 { font-family:var(--pk-font-display); font-weight:700; font-size:30px; line-height:1.05; margin:0; letter-spacing:-.01em; }
/* the brand text is non-interactive — never show a focus/selection ring on it
   (some browsers park focus on the first heading on hard-load) */
.pk-auth-brand h1, .pk-auth-brandstrip h1 { outline:none; -webkit-tap-highlight-color:transparent; }
.pk-auth-brand .pk-auth-eyebrow { font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#7FC4FF; margin-bottom:8px; }
.pk-auth-brand .pk-auth-tag { color:#BBD4EE; font-size:14px; line-height:1.5; margin:14px 0 0; max-width:30ch; }
.pk-auth-feats { list-style:none; margin:auto 0 0; padding:24px 0 0; display:flex; flex-direction:column; gap:12px; }
.pk-auth-feats li { display:flex; align-items:center; gap:11px; font-size:13px; color:#D6E6F6; font-weight:500; }
.pk-auth-feats li .pk-fdot {
    width:26px; height:26px; border-radius:8px; flex-shrink:0; display:grid; place-items:center;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
}
.pk-auth-feats li .pk-fdot .mud-icon-root { font-size:16px; color:var(--pk-accent); }
.pk-auth-poweredby { margin-top:20px; font-size:11px; letter-spacing:.06em; color:#6f96c2; }

/* RIGHT — form column */
.pk-auth-form { padding:38px 36px; display:flex; flex-direction:column; }
.pk-auth-form .pk-auth-h { font-family:var(--pk-font-display); font-weight:700; font-size:23px; color:var(--pk-ink); margin:0; }
.pk-auth-form .pk-auth-sub { color:var(--pk-ink-2); font-size:13px; margin:4px 0 22px; }
/* tighten the MudBlazor outlined fields so the form reads dense, not airy */
.pk-auth-form .mud-input-control { margin-bottom:14px; }
.pk-auth-form .mud-input.mud-input-outlined { border-radius:var(--pk-r-sm); }
.pk-auth-form .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border { border-width:2px; border-color:var(--pk-blue); }
.pk-auth-form .mud-checkbox { margin-left:-6px; }
.pk-auth-form .mud-checkbox .mud-typography { font-size:13px; color:var(--pk-ink-2); }
/* primary CTA — branded gradient, full width, confident */
.pk-auth-cta.mud-button-root {
    background:var(--pk-grad) !important; color:#fff !important; font-weight:700; letter-spacing:.02em;
    border-radius:var(--pk-r-sm); box-shadow:0 6px 16px rgba(21,101,192,.30); text-transform:none;
    padding-top:10px; padding-bottom:10px; transition:transform .12s, box-shadow .2s;
}
.pk-auth-cta.mud-button-root:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(21,101,192,.38); }
.pk-auth-forgot { margin-top:14px; align-self:flex-start; font-size:13px; color:var(--pk-blue); font-weight:600; }
.pk-auth-divider { height:1px; background:var(--pk-line-soft); margin:22px 0 16px; }
.pk-auth-foot { font-size:12px; color:var(--pk-ink-3); }
.pk-auth-foot a { color:var(--pk-blue); font-weight:600; }

/* compact mobile brand strip (hidden on desktop) */
.pk-auth-brandstrip { display:none; }

@media (max-width:768px) {
    .pk-auth-wrap { min-height:auto; padding:14px 10px 28px; }
    .pk-auth-card { grid-template-columns:1fr; max-width:440px; box-shadow:var(--pk-shadow-2); }
    .pk-auth-brand { display:none; }            /* drop the full panel on mobile */
    .pk-auth-brandstrip {
        display:flex; align-items:center; gap:13px; padding:20px 22px; color:#fff;
        background:linear-gradient(120deg, var(--pk-navy-deep) 0%, var(--pk-navy) 60%, #124C8A 100%);
        position:relative; overflow:hidden;
    }
    .pk-auth-brandstrip::after { content:""; position:absolute; inset:0; pointer-events:none;
        background:radial-gradient(120% 200% at 0% 130%, rgba(46,155,230,.45), transparent 55%); }
    .pk-auth-brandstrip > * { position:relative; z-index:1; }
    .pk-auth-brandstrip .pk-auth-logo { width:42px; height:42px; border-radius:12px; margin:0; }
    .pk-auth-brandstrip h1 { font-size:22px; margin:0; font-family:var(--pk-font-display); font-weight:700; }
    .pk-auth-brandstrip .pk-auth-poweredby { margin:2px 0 0; color:#9fc1e6; }
    .pk-auth-form { padding:24px 22px 26px; }
}

/* ── Auth shell (single-column branded card for the short utility pages) ───────
   Used by AuthShell.razor — the lighter sibling of the split sign-in card. A gradient
   brand header strip over a white body. Recovery / reset / subscribe / redeem / purchase
   result pages drop their content into the body. Brand color from tokens only. */
.pk-shell-wrap { display:grid; place-items:start center; padding:28px 12px 48px; }
.pk-shell-card {
    width:100%; max-width:480px; background:var(--pk-surface); border:1px solid var(--pk-line);
    border-radius:var(--pk-r-lg); box-shadow:var(--pk-shadow-2); overflow:hidden;
}
.pk-shell-head {
    position:relative; overflow:hidden; padding:22px 26px; color:#fff;
    background:linear-gradient(120deg, #06203F 0%, var(--pk-navy-deep) 45%, var(--pk-navy) 78%, #124C8A 100%);
    display:flex; align-items:center; gap:14px; user-select:none;
}
.pk-shell-head::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
    background:radial-gradient(120% 200% at 0% 130%, rgba(46,155,230,.42), transparent 55%),
               radial-gradient(80% 150% at 108% -20%, rgba(224,145,58,.20), transparent 55%); }
.pk-shell-head > * { position:relative; z-index:1; }
.pk-shell-logo { width:44px; height:44px; border-radius:12px; background:var(--pk-grad);
    display:grid; place-items:center; box-shadow:0 5px 14px rgba(0,0,0,.4); flex-shrink:0; }
.pk-shell-titles { min-width:0; }
.pk-shell-eyebrow { font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#7FC4FF; }
.pk-shell-title { font-family:var(--pk-font-display); font-weight:700; font-size:20px; line-height:1.1; margin:1px 0 0; outline:none; }
.pk-shell-sub { color:#BBD4EE; font-size:12px; margin-top:2px; }
.pk-shell-body { padding:26px; }
/* tighten MudBlazor fields inside the shell body so these forms read dense */
.pk-shell-body .mud-input-control { margin-bottom:12px; }
.pk-shell-body .pk-shell-h { font-family:var(--pk-font-display); font-weight:700; font-size:18px; color:var(--pk-ink); margin:0 0 2px; }
.pk-shell-body .pk-shell-lead { color:var(--pk-ink-2); font-size:13px; margin:0 0 16px; }

/* ── Profile page (authenticated account screen) ──────────────────────────────
   Branded gradient identity header + status card. Reuses the hero gradient language
   from .pk-goals-hero. Color from tokens only. Used by Pages/Profile.razor. */
.pk-profile-hero {
    position:relative; overflow:hidden; border-radius:var(--pk-r-lg); padding:26px 24px;
    background:linear-gradient(120deg, #06203F 0%, var(--pk-navy-deep) 44%, var(--pk-navy) 78%, #124C8A 100%);
    color:#fff; display:flex; align-items:center; gap:16px; box-shadow:var(--pk-shadow-2);
}
.pk-profile-hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
    background:radial-gradient(110% 180% at 0% 130%, rgba(46,155,230,.40), transparent 55%),
               radial-gradient(80% 150% at 108% -20%, rgba(224,145,58,.18), transparent 55%); }
.pk-profile-hero > * { position:relative; z-index:1; }
.pk-profile-av {
    width:60px; height:60px; border-radius:16px; background:var(--pk-grad); color:#fff;
    display:grid; place-items:center; font-family:var(--pk-font-display); font-weight:700; font-size:24px;
    box-shadow:0 6px 16px rgba(0,0,0,.35); flex-shrink:0; user-select:none;
}
.pk-profile-name { font-family:var(--pk-font-display); font-weight:700; font-size:22px; line-height:1.1; }
.pk-profile-id { color:#BBD4EE; font-size:12.5px; margin-top:3px; font-variant-numeric:tabular-nums; }
/* status chip in the card header */
.pk-status-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px;
    font-size:11.5px; font-weight:700; }
.pk-status-chip .pk-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.pk-status-chip.ok    { background:var(--pk-success-tint); color:var(--pk-success); }
.pk-status-chip.warn  { background:var(--pk-warning-tint); color:var(--pk-warning); }
.pk-status-chip.bad   { background:var(--pk-danger-tint);  color:var(--pk-danger); }

/* ── Sales / Pipeline dashboard (PgSalesDashboard.razor) ──────────────────────
   Polish pass over the legacy .kpi-*/.loan-table-header/.compact-panels styling in
   site.css. These rules are token-based and intentionally override the older ones.
   The page is a dense, data-heavy LO workspace — keep it tight; brand color via tokens. */

/* KPI filter tiles — calmer number, title that wraps cleanly, real card affordance.
   Structure (from SalesDashboardKPICards.cs): MudButton.kpi-clickable > .kpi-button-inner
   > MudCard.kpi-card > .kpi-card-content > .kpi-title + .kpi-value. */
.kpi-clickable.mud-button-root { padding:0 !important; width:100%; text-transform:none; min-width:0; }
.kpi-clickable .kpi-card.mud-card {
    width:100%; border:1px solid var(--pk-line) !important; border-radius:var(--pk-r) !important;
    background:var(--pk-surface) !important; box-shadow:var(--pk-shadow-1) !important;
    transition:transform .14s, box-shadow .2s, border-color .2s; overflow:hidden; position:relative;
}
.kpi-clickable:hover .kpi-card.mud-card { transform:translateY(-2px); box-shadow:var(--pk-shadow-2) !important; }
.kpi-clickable .kpi-card-content.mud-card-content {
    padding:9px 10px 10px !important; display:flex; flex-direction:column; align-items:center;
    gap:3px; min-height:74px; justify-content:center;
}
/* title ABOVE the number, two clean lines reserved, no awkward wrap-shifting */
.kpi-clickable .kpi-title.mud-typography {
    order:0; font-family:var(--pk-font-ui); font-weight:700; font-size:11.5px; line-height:1.18;
    letter-spacing:.01em; text-transform:none; color:var(--pk-ink-2); text-align:center;
    min-height:27px; display:flex; align-items:center; justify-content:center;
}
/* the big number — dialed back from the old clamp(1.25–2.25rem) */
.kpi-clickable .kpi-value.mud-typography {
    order:1; font-family:var(--pk-font-display); font-weight:700; font-size:26px !important;
    line-height:1; color:var(--pk-ink); margin:0 !important; font-variant-numeric:tabular-nums;
}
/* ACTIVE tile — filled navy gradient + amber top bar; far more obvious than a rail */
.kpi-clickable.kpi-active .kpi-card.mud-card {
    border-color:transparent !important;
    background:linear-gradient(150deg, var(--pk-navy-deep) 0%, var(--pk-navy) 70%, #124C8A 100%) !important;
    box-shadow:var(--pk-shadow-2) !important;
}
.kpi-clickable.kpi-active .kpi-card.mud-card::before {
    content:""; position:absolute; left:0; right:0; top:0; height:4px;
    background:linear-gradient(90deg, var(--pk-accent), var(--pk-accent-deep));
}
.kpi-clickable.kpi-active .kpi-title.mud-typography { color:#BBD4EE; }
.kpi-clickable.kpi-active .kpi-value.mud-typography { color:#fff; }
/* the "red" danger KPI (<10 Days Not In CTC) — keep red when inactive, readable when active */
.kpi-clickable.kpi-active .kpi-title.mud-typography[style*="red"],
.kpi-clickable.kpi-active .kpi-value.mud-typography[style*="red"] { color:#FF9D9D !important; }
/* checkmark badge — accent pill, top-right */
.kpi-clickable .kpi-checkmark.mud-icon-root {
    top:7px; right:7px; color:var(--pk-accent-deep); background:#fff; border-radius:50%;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.kpi-clickable.kpi-active .kpi-checkmark.mud-icon-root { color:var(--pk-accent); background:rgba(255,255,255,.12); box-shadow:none; }

/* Selected loan row — replace the heavy 60%-opacity blue with the .pk-table accent-rail
   treatment (amber rail + soft amber tint, dark ink text). Overrides the inline <style>. */
.mud-table-root .selected,
.mud-table-root tr.selected { background:var(--pk-accent-tint) !important; }
.mud-table-root .selected > td { color:var(--pk-ink) !important; font-weight:600; }
.mud-table-root .selected > td:first-child { box-shadow:inset 3px 0 0 var(--pk-accent-deep); }
.pk-dark .mud-table-root .selected { background:rgba(224,145,58,.18) !important; }
.pk-dark .mud-table-root .selected > td { color:var(--pk-ink) !important; }

/* hover affordance on the loan list rows (subtle, not the heavy blue) */
.mud-table-root tbody tr.cursor-pointer:hover td { background:rgba(21,101,192,.05); }

/* Expansion panels (compact-panels) — branded header band + accent icon chips, hairlines. */
.compact-panels .mud-expansion-panels { border-radius:var(--pk-r); overflow:hidden;
    border:1px solid var(--pk-line); box-shadow:var(--pk-shadow-1); }
.compact-panels .mud-expand-panel { border-bottom:1px solid var(--pk-line-soft); }
.compact-panels .mud-expand-panel:last-child { border-bottom:none; }
.compact-panels .mud-expand-panel-header {
    background:linear-gradient(180deg, var(--pk-surface), var(--pk-surface-2));
    transition:background .15s;
}
.compact-panels .mud-expand-panel-header:hover { background:var(--pk-canvas); }
/* the title row: icon + label */
.compact-panels .mud-expand-panel-header .mud-typography {
    font-family:var(--pk-font-ui); font-weight:600; font-size:13.5px; color:var(--pk-ink);
}
/* turn the leading MudIcon into a branded chip */
.compact-panels .mud-expand-panel-header .d-flex > .mud-icon-root:first-child {
    background:var(--pk-canvas-2); color:var(--pk-blue) !important; border-radius:7px;
    padding:4px; width:26px; height:26px; box-sizing:content-box; margin-right:10px !important;
}
/* expanded panel: accent the active header */
.compact-panels .mud-expand-panel.mud-panel-expanded > .mud-expand-panel-header {
    background:var(--pk-canvas-2); box-shadow:inset 3px 0 0 var(--pk-accent);
}
.compact-panels .mud-expand-panel.mud-panel-expanded > .mud-expand-panel-header .d-flex > .mud-icon-root:first-child {
    background:var(--pk-accent-tint); color:var(--pk-accent-deep) !important;
}
/* sub-section headers inside panels (the green "Key Status"/"Key Dates" labels) */
.compact-panels .mud-expand-panel-content .mud-typography.mud-success-text {
    color:var(--pk-accent-deep) !important; font-weight:700 !important; font-size:11px !important;
    letter-spacing:.06em; text-transform:uppercase;
}

/* Vertical rhythm: the KPI grid, the loan-table card, and the panels were touching.
   Give the table card breathing room above (from KPI grid) and the panels room below it. */
.kpi-grid { margin-bottom:10px !important; }
.pk-loan-table-card.mud-paper { margin-bottom:14px; border:1px solid var(--pk-line);
    border-radius:var(--pk-r); box-shadow:var(--pk-shadow-1); }
/* Stop the horizontal "jump" when switching KPIs: a 192-row page shows a scrollbar, a 4-row
   page doesn't, and the width shift moves everything. Always reserve the gutter. */
.pk-loan-table-card .mud-table-container { scrollbar-gutter:stable; }

/* Contact cards — light, branded polish (kept restrained; they're utility cards). */
.contactcard-dark-shadow { margin-bottom:10px; border-radius:var(--pk-r) !important;
    border:1px solid var(--pk-line) !important; box-shadow:var(--pk-shadow-1) !important; overflow:hidden; }
.contactcard-dark-shadow:last-child { margin-bottom:0; }
/* the inner MudCard carries its own border/elevation — kill it so we don't get a
   doubled line at the bottom (outer MudPaper is the only frame). */
.contactcard-dark-shadow .contactcard-compact.mud-card {
    border:none !important; box-shadow:none !important; background:transparent !important; }
.contactcard-compact .mud-card-header {
    background:linear-gradient(180deg, var(--pk-surface), var(--pk-surface-2));
    border-bottom:1px solid var(--pk-line-soft); padding:9px 14px;
    border-left:3px solid var(--pk-accent);
}
.contactcard-compact .mud-card-header .mud-typography:first-child {
    font-family:var(--pk-font-ui); font-weight:700; font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--pk-accent-deep);
}
.contactcard-compact .mud-card-header .mud-typography:nth-child(2) {
    font-family:var(--pk-font-display); font-weight:600; font-size:15px; color:var(--pk-ink); line-height:1.2;
}
.contactcard-compact .mud-card-content { padding:12px 14px !important; }
.contactcard-compact .ck-text .mud-typography { font-size:13px; color:var(--pk-ink-2); }
/* action icons sit on a soft tinted touch target so they read as tappable
   (40px to match the component's scoped .ck-icon-group touch-target sizing) */
.contactcard-compact .ck-icon a, .contactcard-compact .ck-icon-group a {
    display:inline-grid !important; place-items:center; width:40px; height:40px; border-radius:9px;
    background:var(--pk-canvas-2); transition:background .15s; }
.contactcard-compact .ck-icon a:hover, .contactcard-compact .ck-icon-group a:hover { background:var(--pk-accent-tint); }

/* Panel content typography — make the property-info / detail blocks consistent. */
.compact-panels .pk-panel-subhead {
    font-family:var(--pk-font-ui); font-weight:700; font-size:11px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--pk-ink-3); margin:12px 0 4px; }
.compact-panels .pk-panel-addr {
    font-family:var(--pk-font-mono); font-size:12.5px; color:var(--pk-ink); margin-bottom:6px; }
.compact-panels .super-dense-grid { border-radius:var(--pk-r-sm); overflow:hidden; }

/* "What do these mean?" help affordance — tidy it into a soft pill */
.pk-kpi-help { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 10px;
    border-radius:999px; background:var(--pk-surface); border:1px solid var(--pk-line);
    box-shadow:var(--pk-shadow-1); }
.pk-kpi-help span { font-size:12px; color:var(--pk-ink-2); cursor:pointer; font-weight:500; }

/* Begin-impersonation submit button (plain <button> inside a POST form) */
.pk-imp-apply {
    cursor:pointer; border:none; border-radius:6px;
    background:var(--pk-warning); color:#fff; font-weight:700; font-size:13px;
    padding:7px 16px; line-height:1.4;
}

/* ---- "My Notes" panel (pipeline view scratchpad) ---------------------------------
   All token-based, consistent with the compact-panels detail blocks above. */
/* small amber dot next to the panel title when the selected loan already has a saved note.
   Amber is reserved for "you" (UI_STRATEGY §1), so a note shared by SOMEONE ELSE — and none of
   your own — shows the same dot in brand blue instead. */
.pk-notes-dot { width:8px; height:8px; border-radius:50%; background:var(--pk-accent);
    margin-left:8px; box-shadow:0 0 0 3px var(--pk-accent-tint); display:inline-block; }
.pk-notes-dot-shared { background:var(--pk-blue); box-shadow:0 0 0 3px rgba(21,101,192,.14); }
.pk-notes-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px;
    flex-wrap:wrap; margin:2px 0 8px; }
.pk-notes-saved   { font-size:11px; color:var(--pk-ink-3); display:inline-flex; align-items:center; gap:4px; }
.pk-notes-saved.pk-dirty { color:var(--pk-accent-deep); font-weight:600; }

/* Read-only rendering of a saved/shared note body: preserve wrapping, style auto-links. */
.pk-notes-render { font-family:var(--pk-font-ui); font-size:12.5px; line-height:1.5;
    color:var(--pk-ink); white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.pk-notes-render a { color:var(--pk-blue); text-decoration:underline; text-underline-offset:2px; }
.pk-notes-render a:hover { color:var(--pk-accent-deep); }

/* Shared-from-others list */
.pk-notes-shared-head { font-family:var(--pk-font-ui); font-weight:700; font-size:11px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--pk-ink-3); margin:14px 0 6px; }
.pk-notes-shared-item { border:1px solid var(--pk-line); border-radius:var(--pk-r-sm);
    background:var(--pk-surface); box-shadow:var(--pk-shadow-1); padding:8px 10px; margin-bottom:8px;
    border-left:3px solid var(--pk-accent); }
.pk-notes-author { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.pk-notes-author .pk-notes-name { font-weight:700; font-size:12.5px; color:var(--pk-ink); }
.pk-notes-author .pk-notes-when { font-size:10.5px; color:var(--pk-ink-3); margin-left:auto; }
.pk-imp-apply:hover { filter:brightness(0.93); }

/* ── Install / PWA page (/install-pwa) ────────────────────────────────────────
   Leads with the visitor's detected platform (server-side UA sniff) as a primary
   amber-accented card; the remaining platforms collapse into secondary panels.
   Replaces the old page-level <style> + the dead .install-card highlight script. */

/* Numbered step list — the amber ordinal is the page's one recurring motif. */
.pk-pwa-steps      { list-style:none; margin:0; padding:0; counter-reset:pk-step; }
.pk-pwa-steps li   { counter-increment:pk-step; position:relative; padding:0 0 14px 40px;
    font-family:var(--pk-font-ui); font-size:13.5px; line-height:1.55; color:var(--pk-ink); }
.pk-pwa-steps li:last-child { padding-bottom:0; }
/* connective spine between ordinals */
.pk-pwa-steps li:not(:last-child)::after { content:""; position:absolute; left:13px; top:30px; bottom:2px;
    width:1px; background:var(--pk-line); }
.pk-pwa-steps li::before { content:counter(pk-step); position:absolute; left:0; top:0;
    width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
    font-family:var(--pk-font-mono); font-size:12px; font-weight:700;
    color:var(--pk-accent-deep); background:var(--pk-accent-tint);
    border:1px solid var(--pk-accent); box-sizing:border-box; }
.pk-pwa-steps li b { font-weight:700; color:var(--pk-ink); }
/* a UI affordance the user must find (menu item, button label) */
.pk-pwa-ui { font-family:var(--pk-font-mono); font-size:12px; padding:1px 6px; border-radius:5px;
    background:var(--pk-surface-2); border:1px solid var(--pk-line); color:var(--pk-ink-2);
    white-space:nowrap; }

/* Primary card = the detected platform. Amber top bar echoes the active-KPI tile. */
.pk-pwa-primary    { position:relative; overflow:hidden; padding:22px 22px 20px; }
.pk-pwa-primary::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--pk-accent); }
.pk-pwa-head       { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.pk-pwa-ic         { width:44px; height:44px; border-radius:var(--pk-r-sm); display:grid; place-items:center;
    background:var(--pk-grad); color:#fff; flex:none; box-shadow:var(--pk-shadow-1); }
.pk-pwa-title      { font-family:var(--pk-font-display); font-weight:600; font-size:19px;
    color:var(--pk-ink); line-height:1.2; }
.pk-pwa-lede       { font-family:var(--pk-font-ui); font-size:13px; color:var(--pk-ink-2);
    margin:0 0 18px; line-height:1.5; }

/* Secondary platforms — quieter expansion panels, no elevation contest with the primary. */
.pk-pwa-alt .mud-expand-panel { background:var(--pk-surface); border:1px solid var(--pk-line);
    border-radius:var(--pk-r-sm) !important; margin-bottom:8px; box-shadow:none; }
.pk-pwa-alt .mud-expand-panel-header { padding:10px 14px; }
.pk-pwa-alt-t      { font-family:var(--pk-font-ui); font-weight:600; font-size:13.5px; color:var(--pk-ink); }
.pk-pwa-alt .mud-expand-panel-content { padding:2px 14px 14px 14px; }

/* Native-app rail — the "or get the real thing" moment. Tinted, not another white card. */
.pk-pwa-native     { background:var(--pk-canvas-2); border:1px solid var(--pk-line);
    border-radius:var(--pk-r); padding:18px 20px; text-align:center; }
.pk-pwa-native .app-store-badges { margin:12px 0 0; }

/* FAQ / troubleshooting: definition rows, not colored body text. */
.pk-pwa-faq-q      { font-family:var(--pk-font-ui); font-weight:700; font-size:13px; color:var(--pk-ink);
    margin-bottom:3px; }
.pk-pwa-faq-a      { font-family:var(--pk-font-ui); font-size:13px; line-height:1.55; color:var(--pk-ink-2); margin:0; }

.pk-pwa-foot       { display:flex; justify-content:space-between; align-items:center; gap:12px;
    flex-wrap:wrap; margin-top:4px; }

@media (max-width:600px) {
  .pk-pwa-primary { padding:18px 16px 16px; }
  .pk-pwa-head { gap:11px; }
  .pk-pwa-ic { width:38px; height:38px; }
  .pk-pwa-title { font-size:17px; }
}