/* =====================================================================
 * UserProfile-specific overrides on top of Wiki.Web.Shared's tokens + base.css.
 * Mobile-first: 360 px works; nothing here breaks above 768 px.
 *
 * Theme: dark by default like every Wiki surface (2026-06-12 user decision —
 * supersedes the earlier light-default customer pin); light via the explicit
 * `data-theme="light"` toggle attribute, applied pre-paint by index.html's
 * script so there is no flash of incorrect theme on first paint.
 *
 * Layout: a top-nav strip with five tabs (Dashboard / Billing / Usage /
 * StopHistory / sign-out). No bottom tab-bar — HelperPwa's tab-bar is
 * justified by constant-use; customers visit rarely.
 * ===================================================================== */
/* Theming: 2026-06-12 — UserProfile now follows the same dark-by-default
   model as every other Wiki front-end (user decision; supersedes the earlier
   light-default customer-surface pin). tokens.css carries both palettes:
   :root is dark, html[data-theme="light"] is the ☀️/🌙 toggle override. No
   local palette re-statement needed. */

/* ---- Customer shell -------------------------------------------------- */

.wk-cust {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    /* Reserve space for iOS notch */
    padding-top: env(safe-area-inset-top, 0);
}

.wk-cust__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wk-border);
    background: var(--wk-surface-1);
    position: sticky;
    top: 0;
    z-index: 5;
}

.wk-cust__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Header identity stack: brand eyebrow + prominent tenant name + signed-in line.
   min-width:0 lets the tenant name ellipsis instead of shoving the tools cluster
   off-screen on narrow viewports. */
.wk-cust__identity {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.wk-cust__eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wk-ink-muted);
}

.wk-cust__tenant {
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--wk-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-cust__signed-in {
    font-size: 0.8rem;
    color: var(--wk-ink-muted);
}
.wk-cust__signed-in strong { font-weight: 600; color: var(--wk-ink); }

/* "·" separator in the signed-in line — accent-coloured (decorative glyph;
   --wk-accent keeps it AA-legible in both themes). */
.wk-brand__sep { color: var(--wk-accent); }

/* Right-hand header cluster: SignalR dot + theme toggle. */
.wk-cust__build {
    color: var(--ml-text-muted, #707070);
    font-size: .68rem;
    font-family: var(--wk-font-mono, ui-monospace, monospace);
    white-space: nowrap;
}
.wk-cust__tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wk-cust__nav {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.wk-cust__tab {
    min-height: var(--wk-hit);
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-bottom: 3px solid transparent;   /* reserved so .active doesn't shift text */
    border-radius: var(--wk-radius);
    color: var(--wk-ink-muted);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

/* Active = accent tint + accent underline — the top-nav mirror of base.css's
   left-bordered .wk-app__nav active idiom (UI Uplift v1 §4.2). */
.wk-cust__tab:hover { background: var(--wk-surface-2); color: var(--wk-ink); text-decoration: none; }
.wk-cust__tab.active {
    background: var(--wk-accent-tint);
    border-bottom-color: var(--wk-accent);
    color: var(--wk-ink-strong);
    font-weight: 600;
}
.wk-cust__tab:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); }

.wk-cust__main {
    padding: 1rem 1rem 3rem;
    max-width: var(--wk-maxw);
    width: 100%;
    margin: 0 auto;
}

/* Per-agent (sk_agent_id) owner badge on a KB source row — accent-tinted pill that
   tells the tenant which agent's private slice a source belongs to (or "Shared"). */
.wk-agent-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--wk-accent-tint);
    color: var(--wk-ink-strong);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ---- Sidebar shell (wiki-decouple WS-B chrome) ----------------------- */
/* Agent-sibling chrome, REIMPLEMENTED with Wiki's wk-* tokens (no Agent file
   copied): persistent left sidebar ≥992px; off-canvas drawer + backdrop below.
   The old .wk-cust__nav top-tab strip above is retired but the classes stay
   (no renames — uplift v1 §1); .wk-cust__main is reused as the content well. */

.wk-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: env(safe-area-inset-top, 0);
}

.wk-shell__sidebar {
    background: var(--wk-surface-1);
    border-right: 1px solid var(--wk-border);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.75rem 1.25rem;
    gap: 0.75rem;
}

/* Brand lockup — family spec: both words 800, ▸ separator accent-coloured. */
.wk-shell__brand {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--wk-ink-strong);
    padding: 0 0.5rem 0.85rem;
    border-bottom: 1px solid var(--wk-border-soft);
    white-space: nowrap;
}
.wk-shell__brand a { color: inherit; text-decoration: none; }
.wk-shell__brand a:hover, .wk-shell__brand a:focus { color: var(--wk-accent); text-decoration: none; }

.wk-shell__ident { padding: 0 0.5rem; display: grid; gap: 0.15rem; min-width: 0; }
.wk-shell__tenant {
    font-weight: 700;
    color: var(--wk-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wk-shell__signedin { font-size: 0.78rem; color: var(--wk-ink-muted); }
.wk-shell__signedin strong { font-weight: 600; color: var(--wk-ink); }

.wk-shell__nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
}

.wk-shell__nav > a,
.wk-shell__sub > a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    border-left: 3px solid transparent;   /* reserved so .active doesn't shift text */
    border-radius: var(--wk-radius-sm);
    color: var(--wk-ink);
    text-decoration: none;
    font-weight: 500;
    min-height: 40px;
}

.wk-shell__nav > a:hover,
.wk-shell__sub > a:hover { background: var(--wk-surface-2); color: var(--wk-ink); text-decoration: none; }

.wk-shell__nav > a.active,
.wk-shell__sub > a.active {
    background: var(--wk-accent-tint);
    border-left-color: var(--wk-accent);
    color: var(--wk-ink-strong);
    font-weight: 600;
}

.wk-shell__nav > a:focus-visible,
.wk-shell__sub > a:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); }

/* Section label — muted small caps, mirrors Agent's sidebar group headings. */
.wk-shell__navlabel {
    padding: 0.85rem 0.6rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ml-text-muted, #707070);
}

/* Per-wiki entry (name + status dot). .is-current = a page of this wiki is open. */
.wk-shell__wiki.is-current { color: var(--wk-ink-strong); font-weight: 600; }
.wk-shell__wikiname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Nested per-wiki links, indented under the active entry. */
.wk-shell__sub {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-left: 1.15rem;
    border-left: 1px solid var(--wk-border-soft);
    padding-left: 0.35rem;
}
.wk-shell__sub > a { min-height: 36px; padding: 0.4rem 0.55rem; font-size: var(--wk-fs-sm); }

/* Wiki status dot — active (green) / suspended (amber) / closed (red). */
.wk-wikidot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--wk-ink-muted);
}
.wk-wikidot--active    { background: var(--wk-ok); box-shadow: var(--wk-glow-ok); }
.wk-wikidot--suspended { background: var(--wk-warn); }
.wk-wikidot--closed    { background: var(--wk-danger); }

.wk-shell__body { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Slim top row — theme toggle + sign out (+ build stamp / hub dot). */
.wk-shell__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    height: 3.5rem;
    padding: 0 1rem;
    background: var(--wk-surface-1);
    border-bottom: 1px solid var(--wk-border);
    position: sticky;
    top: 0;
    z-index: 5;
}

.wk-shell__tools { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }

.wk-shell__burger { padding: 0.3rem 0.65rem; min-height: 0; }

.wk-shell__backdrop {
    position: fixed;
    inset: 0;
    background: var(--wk-overlay);
    z-index: 40;
}

/* Mobile / tablet-portrait (<992px): fixed slide-in drawer, hidden by default. */
@media (max-width: 991.98px) {
    .wk-shell__sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: var(--wk-nav-w);
        max-width: 85vw;
        z-index: 45;
        transform: translateX(-100%);
    }
    .wk-shell--open .wk-shell__sidebar { transform: translateX(0); }
}

/* Desktop / tablet-landscape (≥992px): persistent sticky sidebar; burger hidden. */
@media (min-width: 992px) {
    .wk-shell { flex-direction: row; }
    .wk-shell__sidebar {
        width: var(--wk-nav-w);
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }
    .wk-shell__burger, .wk-shell__backdrop { display: none; }
}

/* ---- Subscriptions page (one line per wiki) --------------------------- */

.wk-subline {
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 1rem 1.1rem;
    display: grid;
    gap: 0.75rem;
}

.wk-subline__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.wk-subline__name { font-weight: 700; font-size: var(--wk-fs-lg); color: var(--wk-ink-strong); margin-right: auto; }
.wk-subline__renew { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); }

.wk-subline__meters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 720px) {
    .wk-subline__meters { grid-template-columns: 1fr 1fr; }
}

.wk-subline__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* "Add subscription" card — dashed affordance at the end of the list. */
.wk-addcard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px dashed var(--wk-border-strong, var(--ml-border-strong));
    border-radius: var(--wk-radius-lg);
    padding: 1.1rem;
    color: var(--wk-ink-muted);
    text-decoration: none;
    font-weight: 600;
    min-height: var(--wk-hit);
}
.wk-addcard:hover { border-color: var(--wk-accent); color: var(--wk-accent); background: var(--wk-accent-tint); text-decoration: none; }
.wk-addcard:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); }

/* ---- Capability URL panel (CapabilityUrlPanel.razor) ------------------ */

.wk-capurl {
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    background: var(--wk-bg);
    padding: 0.85rem;
    display: grid;
    gap: 0.5rem;
}

.wk-capurl__head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.wk-capurl__hint { color: var(--wk-ink-muted); font-size: var(--wk-fs-xs); }

.wk-capurl__value {
    display: block;
    background: var(--wk-surface-2);
    border-radius: var(--wk-radius-sm);
    padding: 0.5rem 0.65rem;
    font-family: var(--wk-font-mono);
    font-size: 0.82rem;
    word-break: break-all;
    user-select: all;
}

.wk-capurl__actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.wk-capurl__meta { color: var(--wk-ink-muted); font-size: var(--wk-fs-xs); }

/* ---- Plan cards (NewWiki.razor) ---------------------------------------- */

.wk-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.wk-plan {
    text-align: left;
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 1rem 1.1rem;
    display: grid;
    gap: 0.35rem;
    cursor: pointer;
    color: var(--wk-ink);
    font: inherit;
}
.wk-plan:hover { border-color: var(--wk-border-strong, var(--ml-border-strong)); background: var(--wk-surface-2); }
.wk-plan.is-selected { border-color: var(--wk-accent); background: var(--wk-accent-tint); box-shadow: var(--wk-focus-ring); }
.wk-plan:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); border-color: var(--wk-accent); }

.wk-plan__name { font-weight: 700; font-size: var(--wk-fs-lg); color: var(--wk-ink-strong); }
.wk-plan__price { font-weight: 700; color: var(--wk-accent); font-variant-numeric: tabular-nums; }
.wk-plan__price small { color: var(--wk-ink-muted); font-weight: 500; }
.wk-plan__feat { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); }

/* ---- Trial countdown banner ----------------------------------------- */
/* Pinned per Phase 4 brief:
   above-fold banner if trial_ends_utc < now + 7d;
   sterner banner if < 24h;
   paywall card on T+0 SignalR subscription:trial_expired. */

.wk-trial {
    border-left: 4px solid var(--wk-accent);
    background: var(--wk-surface-1);
    padding: 0.75rem 1rem;
    border-radius: var(--wk-radius);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wk-trial--warn   { border-left-color: var(--wk-warn); }
.wk-trial--danger { border-left-color: var(--wk-danger); background: color-mix(in srgb, var(--wk-danger) 8%, var(--wk-surface-1)); }

.wk-trial__text { flex: 1; min-width: 14rem; }
.wk-trial__cta { flex-shrink: 0; }

/* The paywall card replaces the banner once subscription:trial_expired fires. */
.wk-paywall {
    background: var(--wk-surface-1);
    border: 2px solid var(--wk-danger);
    border-radius: var(--wk-radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--wk-shadow-2);
}

.wk-paywall__title { margin: 0 0 0.5rem; color: var(--wk-ink-strong); }
.wk-paywall__cta   { margin-top: 0.75rem; }

/* ---- Stripe card-element mount + status -------------------------- */

.wk-stripe {
    background: var(--wk-bg);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    padding: 0.75rem 1rem;
    min-height: var(--wk-hit);
    box-shadow: var(--wk-shadow-1);
}

.wk-stripe--focused { box-shadow: var(--wk-focus-ring); border-color: var(--wk-accent); }
.wk-stripe--error   { border-color: var(--wk-danger); }

.wk-stripe__err {
    color: var(--wk-danger);
    font-size: var(--wk-fs-sm);
    margin-top: 0.4rem;
}

.wk-card-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--wk-ink);
    font-variant-numeric: tabular-nums;
}

/* The "tap to retry" banner — surfaces after an offline → online round-trip;
   the form NEVER auto-submits the payment-method update. */
.wk-retry {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--wk-warn);
    border-radius: var(--wk-radius);
    background: color-mix(in srgb, var(--wk-warn) 10%, var(--wk-surface-1));
    margin: 0.75rem 0;
}

/* ---- Invoices table (Billing.razor) --------------------------------- */

.wk-invoices {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wk-fs-sm);
    margin-top: 0.75rem;
}

.wk-invoices th, .wk-invoices td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--wk-border-soft);
    text-align: left;
    vertical-align: top;
}

.wk-invoices th { background: var(--wk-surface-1); font-weight: 600; }
.wk-invoices td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Usage progress bars ------------------------------------------- */

.wk-usage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.wk-usage__row {
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 1rem 1.1rem;
    display: grid;
    gap: 0.5rem;
}

.wk-usage__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.wk-usage__label { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); text-transform: uppercase; letter-spacing: 0.02em; }
.wk-usage__value { color: var(--wk-ink-strong); font-weight: 600; font-variant-numeric: tabular-nums; }

.wk-usage__bar {
    width: 100%;
    height: 8px;
    background: var(--wk-surface-2);
    border-radius: 999px;
    overflow: hidden;
}

.wk-usage__fill {
    height: 100%;
    background: var(--wk-accent);
    border-radius: 999px;
}

.wk-usage__fill.is-over { background: var(--wk-danger); }
.wk-usage__fill.is-warn { background: var(--wk-warn); }

/* ---- STOP history table -------------------------------------------- */

.wk-stop {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.5rem;
}

.wk-stop__row {
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    padding: 0.75rem 1rem;
    display: grid;
    gap: 0.25rem;
}

.wk-stop__when { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); }
.wk-stop__type { font-weight: 600; }
.wk-stop__meta { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); }
.wk-stop__retention {
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-sm);
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wk-border-soft);
}

/* ---- Login card brand block (shared OTP login pattern, §6) ---------- */

.wk-login__brand {
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* ---- Wide screen niceties ------------------------------------------ */

@media (min-width: 720px) {
    .wk-cust__header { padding: 0.85rem 2rem; }
    .wk-cust__main   { padding: 1.5rem 2rem 3rem; }
    .wk-usage        { grid-template-columns: 1fr 1fr; }
}

/* ---- Agent-IA restructure (2026-07-04): Home / Wikis / Billing -------- */
/* Additive on top of the WS-B classes above; nothing is renamed (uplift v1 §1). */

/* Quick-links row on the Home dashboard. */
.wk-quicklinks {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.5rem;
}

/* Compact per-wiki row — Home (whole row is a link into /wikis?selected=) and
   Billing "Your Wikis" (static div with a Configure button). */
.wk-minirow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    color: var(--wk-ink);
    text-decoration: none;
}
a.wk-minirow:hover {
    border-color: var(--wk-accent);
    background: var(--wk-surface-2);
    text-decoration: none;
}
a.wk-minirow:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); }

.wk-minirow__name {
    font-weight: 600;
    color: var(--wk-ink-strong);
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Small questions meter inside a row — the shared .wk-usage__bar/__fill render
   as spans here (rows can be anchors), so force block display. */
.wk-minirow__meter { display: flex; align-items: center; gap: 0.4rem; width: 10rem; max-width: 40vw; }
.wk-minirow__meter .wk-usage__bar { display: block; flex: 1; }
.wk-minirow__meter .wk-usage__fill { display: block; }
.wk-minirow__meterlabel {
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wk-minirow__renew { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); white-space: nowrap; }
.wk-minirow__price {
    font-weight: 700;
    color: var(--wk-ink-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wk-minirow__price small { color: var(--wk-ink-muted); font-weight: 500; }

/* Wiki card on the Wikis page — the .wk-subline line-card made selectable
   (Agent's "Your Agent Lines" → detail-below idiom). */
.wk-subline--selectable { cursor: pointer; }
.wk-subline.is-selected {
    border-color: var(--wk-accent);
    box-shadow: var(--wk-focus-ring);
}

/* Wiki name as a real button (keyboard-selectable) styled like the old name span. */
.wk-subline__namebtn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    font-size: var(--wk-fs-lg);
    color: var(--wk-ink-strong);
    cursor: pointer;
    text-align: left;
    margin-right: auto;
    min-width: 0;
}
.wk-subline__namebtn:hover { color: var(--wk-accent); }
.wk-subline__namebtn:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); border-radius: var(--wk-radius-sm); }

/* Fold-out settings block inside a wiki card (absorbs the old WikiSettings page). */
.wk-subline__settings {
    border-top: 1px solid var(--wk-border-soft);
    padding-top: 0.75rem;
    display: grid;
    gap: 0.5rem;
}

/* Detail section below the wiki list (single-strip tabs + card panes). */
.wk-detail {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 2px solid var(--wk-border);
    max-width: 72rem;
}

.wk-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--wk-border);
    padding-bottom: 0.5rem;
    margin: 0.75rem 0 1rem;
}

/* ---- Activity pages (Questions / Escalations / Customers) ------------ */
/* Agent's Conversations/Customers table idiom, wk-* tokens. Additive. */

/* Header row: wiki filter dropdown + server-side total. */
.wk-actbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.wk-actbar__label { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); }
.wk-actbar__select { min-width: 12rem; padding: 0.4rem 0.5rem; }
.wk-actbar__total {
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-sm);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

/* Responsive table well — the table scrolls sideways inside it, the page never does. */
.wk-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-width: 72rem;
}
.wk-acttable { min-width: 44rem; }

/* Expandable question rows. */
.wk-actrow { cursor: pointer; }
.wk-actrow:hover td { background: var(--wk-surface-2); }
.wk-acttable__q { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-rowdetail td { background: var(--wk-surface-1); }
.wk-rowdetail__label {
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

/* Pager (ActivityPager.razor). */
.wk-pager {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.wk-pager__label {
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-sm);
    font-variant-numeric: tabular-nums;
}

/* ---- Motion (reduced-motion aware, same idiom as base.css) ----------- */

@media (prefers-reduced-motion: no-preference) {
    .wk-cust__tab,
    .wk-shell__nav > a,
    .wk-shell__sub > a,
    .wk-addcard,
    .wk-minirow,
    .wk-subline--selectable,
    .wk-plan {
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .wk-shell__sidebar { transition: transform 0.2s ease; }
}

/* ======================================================================
 * Visual-parity round (2026-07-04): make the app LOOK like agent.motlogs.com,
 * not just share its IA. Every value below is Wiki-authored against wk-
 * tokens (both themes) — nothing copied from Agent's stylesheets. Additive.
 * ====================================================================== */

/* ---- Page header card (PageHeader.razor — Agent's rounded header) ----- */

.wk-pagehead {
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 1.5rem 1.75rem;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.wk-pagehead h1 { margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.wk-pagehead p { margin: 0.35rem 0 0; color: var(--wk-ink-muted); }
.wk-pagehead__text { min-width: 0; }
.wk-pagehead__right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.wk-pagehead .wk-actbar { margin: 0; }

/* Small count chip next to a heading (Agent's "Your Agent Lines [5]"). */
.wk-countchip {
    display: inline-flex;
    align-items: center;
    background: var(--wk-surface-3);
    color: var(--wk-ink);
    border: 1px solid var(--wk-border);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

/* ---- Sidebar: icons + Agent's active treatment ------------------------ */

.wk-navic {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    display: inline-block;
}

/* Item metrics per agent-home.png: ~0.9rem label, roomier hit area, slightly
   muted resting ink. Later-rule override of the WS-B base — no renames. */
.wk-shell__nav > a {
    font-size: 0.9rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    color: var(--wk-ink-muted);
}
.wk-shell__nav > a:hover { color: var(--wk-ink-strong); }

/* Active = tinted pill with ACCENT text + icon (Agent's exact treatment);
   the WS-B accent left edge is retired (border stays reserved, transparent). */
.wk-shell__nav > a.active {
    background: var(--wk-accent-tint);
    border-left-color: transparent;
    color: var(--wk-accent);
}

/* ---- Top bar: unboxed controls + account name ------------------------- */

/* Plain-glyph controls (Agent has no bordered buttons up here). Scoped to the
   tools cluster so the mobile burger keeps its box. */
.wk-shell__tools .wk-btn {
    background: transparent;
    border-color: transparent;
    min-height: 0;
    padding: 0.35rem 0.5rem;
}
.wk-shell__tools .wk-btn:hover { background: var(--wk-surface-2); }

.wk-shell__user {
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-sm);
    white-space: nowrap;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wk-shell__logout { font-weight: 700; }
.wk-shell__top .wk-cust__build { font-size: 0.6rem; opacity: 0.8; }

/* ---- Chips (Agent's badge look: small radius, bold 11-12px) ----------- */

.wk-badge--chip {
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    letter-spacing: 0.03em;
}

/* Tier chips — solid fills (theme-independent, AA ink), mapping Agent's
   Standard grey / Assisted cyan / Advanced orange. */
.wk-badge--tier-standard { background: #5C6470; color: #FFFFFF; }
.wk-badge--tier-assisted { background: #22B8CF; color: #06272D; }
.wk-badge--tier-advanced { background: #F5A623; color: #241A03; }

/* Channel chips — voice green, WhatsApp teal, SMS grey. */
.wk-badge--ch-voice { background: #26B050; color: #06230F; }
.wk-badge--ch-wa    { background: #14B8A6; color: #06231F; }
.wk-badge--ch-sms   { background: #5C6470; color: #FFFFFF; }

/* ---- Home dashboard: 4-across stats + two-column cards ---------------- */

.wk-home-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 900px) {
    .wk-home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wk-stat {
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 1.35rem 1rem;
    text-align: center;
}
.wk-stat__label {
    color: var(--wk-ink-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.wk-stat__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0.45rem;
    color: var(--wk-ink-strong);
    font-variant-numeric: tabular-nums;
}
.wk-stat__value--accent { color: var(--wk-accent); }
.wk-stat__sub { color: var(--wk-ink-muted); font-size: 0.8rem; margin-top: 0.3rem; }

/* Generic surface card (Agent's glass-card idiom). */
.wk-card {
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 1.5rem;
}
.wk-card > h2 { margin: 0 0 1rem; }

.wk-home-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.25rem;
}
@media (min-width: 900px) {
    .wk-home-cols { grid-template-columns: 1fr 1fr; }
}

/* Quick Action row: bold title + muted subtitle (Agent's .action-link idiom). */
.wk-action {
    display: block;
    background: var(--wk-surface-2);
    border-radius: var(--wk-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(--wk-ink);
}
.wk-action:last-child { margin-bottom: 0; }
.wk-action strong { display: block; color: var(--wk-ink-strong); }
.wk-action span { display: block; color: var(--wk-ink-muted); font-size: 0.82rem; margin-top: 0.1rem; }
.wk-action:hover { background: var(--wk-bg); text-decoration: none; }
.wk-action:hover strong { color: var(--wk-accent); }
.wk-action:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); }

/* Wiki Status row: status-coloured left edge (Agent's System Status idiom). */
.wk-statusrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--wk-surface-2);
    border-left: 3px solid var(--wk-ok);
    border-radius: var(--wk-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(--wk-ink);
}
.wk-statusrow:last-child { margin-bottom: 0; }
.wk-statusrow--suspended { border-left-color: var(--wk-warn); }
.wk-statusrow--closed    { border-left-color: var(--wk-danger); }
.wk-statusrow:hover { background: var(--wk-bg); text-decoration: none; }
.wk-statusrow:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); }
.wk-statusrow__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--wk-ink-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wk-statusrow__meta { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); white-space: nowrap; }

/* ---- Billing: line-card grid + ghost button + big plan price ---------- */

.wk-btn--ghost {
    background: transparent;
    border-color: var(--ml-border-strong, rgba(255, 255, 255, 0.15));
    min-height: 0;
    padding: 0.35rem 0.8rem;
}
.wk-btn--ghost:hover { background: var(--wk-surface-3); border-color: var(--wk-accent); }

.wk-linegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.85rem;
}

.wk-linecard {
    background: var(--wk-surface-2);
    border-radius: var(--wk-radius-sm);
    padding: 1rem;
    display: grid;
    gap: 0.6rem;
    align-content: start;
}
.wk-linecard__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wk-linecard__name {
    font-weight: 700;
    color: var(--wk-ink-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wk-linecard__usage { display: grid; gap: 0.3rem; }
.wk-linecard__usagelabel { color: var(--wk-ink-muted); font-size: var(--wk-fs-xs); font-variant-numeric: tabular-nums; }
.wk-linecard__usage .wk-usage__bar,
.wk-linecard__usage .wk-usage__fill { display: block; }
.wk-linecard__foot { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.wk-linecard__renew { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); margin-right: auto; }
.wk-linecard__price { font-weight: 700; color: var(--wk-ink-strong); font-variant-numeric: tabular-nums; }
.wk-linecard__price small { color: var(--wk-ink-muted); font-weight: 500; }

/* Plan-card price, Agent-sized: BIG accent figure + muted /month suffix. */
.wk-plan__price--big { font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.wk-plan__price--big small { font-size: 0.9rem; }

/* ---- Activity tables: Agent's list treatment -------------------------- */

.wk-acttable thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--wk-ink-muted);
    background: transparent;
}

/* Expanded question row + its detail carry Agent's accent left edge. */
.wk-actrow.is-open td { background: var(--wk-surface-1); }
.wk-actrow.is-open td:first-child,
.wk-rowdetail td { box-shadow: inset 3px 0 0 var(--wk-accent); }

/* Header-hosted filter controls (PageHeader right slot). */
.wk-actbar__refresh { min-height: 0; padding: 0.45rem 1rem; }

/* ---- Motion for the parity additions (reduced-motion aware) ----------- */

@media (prefers-reduced-motion: no-preference) {
    .wk-action,
    .wk-statusrow,
    .wk-btn--ghost,
    .wk-linetile,
    .wk-actrow td {
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
}

/* ---- Parity round 2 (2026-07-04) --------------------------------------- */

/* Native selects: dark-token styling app-wide (the OS-white dropdown stuck out
   in dark theme — see the activity filter). Custom chevron because
   appearance:none removes the native arrow; two data-URIs since url() can't
   read CSS vars (dark grey stroke by default, darker in light theme). */
.wk-shell select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--wk-surface-2);
    color: var(--wk-ink);
    border: 1px solid var(--ml-border-strong, rgba(255, 255, 255, 0.15));
    border-radius: var(--wk-radius-sm);
    padding: 0.45rem 2rem 0.45rem 0.65rem;
    font: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A0A0A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.7rem;
}
html[data-theme="light"] .wk-shell select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wk-shell select:focus-visible {
    outline: none;
    border-color: var(--wk-accent);
    box-shadow: var(--wk-focus-ring);
}
.wk-shell select:disabled { opacity: 0.55; cursor: not-allowed; }

/* Muted state chip (humanized conversation states on the Questions table). */
.wk-badge--state {
    background: var(--wk-surface-3);
    color: var(--wk-ink-muted);
    border: 1px solid var(--wk-border);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* Billing line card: the questions bar's track was invisible (same colour as
   the card). Thin Agent-style bar: border-token track, accent fill. */
.wk-linecard__usage .wk-usage__bar {
    height: 5px;
    background: var(--ml-border-strong, rgba(255, 255, 255, 0.15));
}

/* Long wiki names: let the badge sit on its own line and the name wrap fully
   instead of clipping. */
.wk-linecard__head { align-items: flex-start; }
.wk-linecard__name { overflow: visible; text-overflow: clip; white-space: normal; }

/* Minirows hosted inside a surface card (Home "Recent Questions") need the
   elevated bg to read against the card. */
.wk-card .wk-minirow { background: var(--wk-surface-2); border-color: transparent; }
.wk-card a.wk-minirow:hover { background: var(--wk-bg); border-color: var(--wk-accent); }

/* ---- Wikis page: Agent line-tile grid (2026-07-05) --------------------- */
/* Compact tiles sized like Agent's "Your Agent Lines" cards: 1 / 2 / 3-across.
   A tile carries badges, usage vs allowance and Copy/Rotate URL only —
   everything else lives in the detail tabs below (.wk-detail). */

.wk-linegrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    max-width: 72rem;
}
@media (min-width: 720px)  { .wk-linegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .wk-linegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wk-linetile {
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 0.95rem 1.05rem;
    display: grid;
    gap: 0.6rem;
    align-content: start;
    cursor: pointer;
}
.wk-linetile:hover { border-color: var(--wk-border-strong, var(--ml-border-strong)); }
.wk-linetile.is-selected { border-color: var(--wk-accent); box-shadow: var(--wk-focus-ring); }

.wk-linetile__badges { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* "Selected" chip — Agent's solid primary badge on the picked line card. */
.wk-badge--selected { background: var(--wk-accent); color: #FFFFFF; }

/* Wiki name as a real button (keyboard-selectable). */
.wk-linetile__name {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: var(--wk-fs-md, 1rem);
    color: var(--wk-ink-strong);
    cursor: pointer;
    text-align: left;
    min-width: 0;
}
.wk-linetile__name:hover { color: var(--wk-accent); }
.wk-linetile__name:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); border-radius: var(--wk-radius-sm); }

/* Two halves split by a hairline — Agent's setup | usage divider. */
.wk-linetile__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.wk-linetile__facts {
    border-right: 1px solid var(--wk-border-soft);
    padding-right: 0.85rem;
    display: grid;
    gap: 0.3rem;
    align-content: start;
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-sm);
}
.wk-linetile__usage {
    display: grid;
    gap: 0.3rem;
    align-content: start;
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-sm);
}
.wk-linetile__usagehead {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.wk-linetile__num { color: var(--wk-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-linetile__price { font-weight: 700; color: var(--wk-ink-strong); font-variant-numeric: tabular-nums; }
.wk-linetile__price small { color: var(--wk-ink-muted); font-weight: 500; }
.wk-linetile__usage .wk-usage__bar,
.wk-linetile__usage .wk-usage__fill { display: block; }
.wk-linetile__usage .wk-usage__bar {
    height: 4px;
    background: var(--ml-border-strong, rgba(255, 255, 255, 0.15));
    margin-top: 0.2rem;
}

.wk-linetile__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Compact capability-URL surface on the tile: bare buttons, no panel chrome. */
.wk-capurl--compact { border: 0; background: transparent; padding: 0; }

/* The dashed add-card as a grid cell — fills the tile footprint like Agent's
   "Add Another Line". */
.wk-addcard--tile { min-height: 10rem; flex-direction: column; gap: 0.35rem; }

/* Detail tab strip — Agent's tab-bar card: one lighter-surface line hosting the
   Knowledge / Test Wiki / Settings pills, selected wiki named on the right. */
.wk-tabstrip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    background: var(--wk-surface-2);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 0.45rem 0.65rem;
    margin: 0 0 1rem;
}
.wk-tab {
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 600;
    color: var(--wk-ink-muted);
    padding: 0.4rem 0.9rem;
    border-radius: var(--wk-radius-sm);
    cursor: pointer;
}
.wk-tab:hover { color: var(--wk-ink-strong); background: var(--wk-surface-3); }
.wk-tab.is-active { background: var(--wk-accent); color: #FFFFFF; }
.wk-tab:focus-visible { outline: none; box-shadow: var(--wk-focus-ring); }
.wk-tabstrip__who {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-sm);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .wk-tab { transition: background-color 0.15s ease, color 0.15s ease; }
}

/* Tab-strip right cluster (Agent's Usage / Test line / Close group) + the
   blue-outlined Test Wiki toggle mirroring Agent's "Test line" box. */
.wk-tabstrip__right {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}
a.wk-tab { text-decoration: none; }
a.wk-tab:hover { text-decoration: none; }
.wk-tab--test {
    color: #4DA3FF;
    border: 1px solid #4DA3FF;
    padding: calc(0.4rem - 1px) calc(0.9rem - 1px);
}
.wk-tab--test:hover { color: #7CBCFF; background: rgba(77, 163, 255, 0.12); }
.wk-tab--test.is-active { background: #2F80ED; border-color: #2F80ED; color: #FFFFFF; }

/* ---- Billing page: Agent parity round 3 (2026-07-05) ------------------- */

/* "Your Wikis" mini line rows — Agent's elevated one-row cards with the
   Configure button on the right. */
.wk-minigrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}
@media (min-width: 720px)  { .wk-minigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .wk-minigrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wk-linemini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--wk-surface-2);
    border-radius: var(--wk-radius-sm);
    padding: 0.85rem 1rem;
}
.wk-linemini__body { flex: 1; min-width: 0; display: grid; gap: 0.4rem; }
.wk-linemini__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wk-linemini__name { color: var(--wk-ink-strong); min-width: 0; }
.wk-linemini__usage { display: grid; gap: 0.25rem; }
.wk-linemini__usagelabel { color: var(--wk-ink-muted); font-size: var(--wk-fs-xs); font-variant-numeric: tabular-nums; }
.wk-linemini__usage .wk-usage__bar,
.wk-linemini__usage .wk-usage__fill { display: block; }
.wk-linemini__usage .wk-usage__bar { height: 4px; background: var(--ml-border-strong, rgba(255, 255, 255, 0.15)); }
.wk-linemini__renew {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--wk-ink-muted);
    font-size: var(--wk-fs-sm);
}
.wk-linemini__price { margin-left: auto; font-weight: 700; color: var(--wk-ink-strong); font-variant-numeric: tabular-nums; }
.wk-linemini__price small { color: var(--wk-ink-muted); font-weight: 500; }
.wk-linemini__cta { flex-shrink: 0; padding: 0.35rem 0.8rem; min-height: 0; }

/* Plan cards — Agent's full-height tier cards with the elevated info box and
   a full-width CTA pinned to the bottom. */
.wk-plangrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 0.5rem;
}
@media (min-width: 900px) { .wk-plangrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.wk-plancard {
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.wk-plancard__chips { min-height: 1.4rem; display: flex; gap: 0.4rem; }
.wk-plancard__name { margin: 0; font-size: 1.15rem; }
.wk-plancard__price { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--wk-accent); }
.wk-plancard__price span { font-size: 0.85rem; font-weight: 500; color: var(--wk-ink-muted); }

.wk-plancard__box {
    background: var(--wk-surface-2);
    border-radius: var(--wk-radius-sm);
    padding: 0.65rem 0.75rem;
    display: grid;
    gap: 0.2rem;
}
.wk-plancard__boxhead {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wk-ink-muted);
}
.wk-plancard__boxmain { font-weight: 700; color: var(--wk-ink-strong); }
.wk-plancard__boxsub { color: var(--wk-ink-muted); font-size: var(--wk-fs-sm); }

.wk-plancard__feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    color: var(--wk-ink);
    font-size: var(--wk-fs-sm);
    flex: 1;                       /* pins the CTA to the card bottom (Agent h-100) */
}
.wk-plancard__cta { width: 100%; justify-content: center; }
.wk-plancard__trial { color: var(--wk-ink-muted); font-size: var(--wk-fs-xs); }

/* ---- Customers page: Agent's search + detail split (2026-07-05) --------- */

/* Search bar — input + Search + wiki filter on one line (Agent's search row). */
.wk-searchbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    padding: 0.6rem 0.75rem;
    margin: 0 0 1rem;
}
.wk-searchbar__input {
    flex: 1;
    min-width: 14rem;
    background: var(--wk-surface-2);
    color: var(--wk-ink);
    border: 1px solid var(--ml-border-strong, rgba(255, 255, 255, 0.15));
    border-radius: var(--wk-radius-sm);
    padding: 0.5rem 0.7rem;
    font: inherit;
}
.wk-searchbar__input:focus-visible { outline: none; border-color: var(--wk-accent); box-shadow: var(--wk-focus-ring); }
.wk-searchbar__filter { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }

/* Results | detail split — results full-width until a person is picked. */
.wk-custcols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}
@media (min-width: 1100px) {
    .wk-custcols--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.wk-custtable tbody tr { cursor: pointer; }

.wk-persondetail__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.wk-persondetail__close {
    padding: 0.2rem 0.55rem;
    min-height: 0;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--wk-ink-muted);
}
.wk-persondetail__close:hover { color: var(--wk-ink-strong); }
.wk-persondetail__list { display: grid; gap: 0.5rem; }
.wk-persondetail .wk-minirow { background: var(--wk-surface-2); border-color: transparent; }

/* Wiki-name row (WikiRenamePanel) at the top of the wiki detail — label,
   current name, Rename → inline input + Save/Cancel. */
.wk-renamebar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--wk-surface-1);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius);
    padding: 0.6rem 0.85rem;
}
.wk-renamebar__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wk-ink-muted);
}
.wk-renamebar__name { color: var(--wk-ink-strong); margin-right: auto; min-width: 0; }
.wk-renamebar__input {
    flex: 1;
    min-width: 12rem;
    background: var(--wk-surface-2);
    color: var(--wk-ink);
    border: 1px solid var(--ml-border-strong, rgba(255, 255, 255, 0.15));
    border-radius: var(--wk-radius-sm);
    padding: 0.4rem 0.6rem;
    font: inherit;
}
.wk-renamebar__input:focus-visible { outline: none; border-color: var(--wk-accent); box-shadow: var(--wk-focus-ring); }

/* Panes inside a .wk-card content section (Agent's elevated-inside-glass idiom):
   inner tiles / panels lift to surface-2 so they read against the card. */
.wk-card .wk-tile { background: var(--wk-surface-2); border-color: transparent; box-shadow: none; }
.wk-card .wk-capurl { background: var(--wk-surface-2); border-color: transparent; }
.wk-card .wk-capurl__value { background: var(--wk-bg); }
.wk-card .wk-renamebar { background: var(--wk-surface-2); border-color: transparent; }

/* Person-detail rows must stay INSIDE the card: grid items default to
   min-width:auto, so a long nowrap question forced the rows past the card
   edge. Let rows shrink and let the question text wrap instead. */
.wk-persondetail { min-width: 0; }
.wk-persondetail__list { min-width: 0; }
.wk-persondetail__list .wk-minirow { min-width: 0; }
.wk-persondetail__list .wk-minirow__name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    flex: 1 1 12rem;
}