/* =========================================================
   Pay(k)onnect Design System — Components
   Fresh primitives built on colors_and_type.css.
   Load AFTER colors_and_type.css.
   ========================================================= */

/* =================================================================
   1. BUTTONS
   ================================================================= */
.pk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1;
    padding: 10px 18px;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
    white-space: nowrap;
}
.pk-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pk-btn:active        { transform: translateY(1px); }
.pk-btn[disabled],
.pk-btn:disabled      { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Primary — calm solid indigo (uses the softened --brand, not the
   logo strand color). No glow on hover; just a half-shade darker. */
.pk-btn--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.pk-btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.pk-btn--primary:active{ background: var(--brand-active); }

/* Accent — emerald, used for confirming positive actions. Calmer
   tonal default; pair with --hero for a fully-saturated CTA. */
.pk-btn--accent {
    background: var(--accent-tint);
    border-color: var(--accent-border);
    color: var(--accent-fg-on-tint);
}
.pk-btn--accent:hover { background: var(--emerald-100); border-color: var(--accent); color: var(--emerald-900); }

/* Secondary — outline indigo on white. */
.pk-btn--secondary {
    background: #fff;
    border-color: var(--brand-border);
    color: var(--brand);
}
.pk-btn--secondary:hover { background: var(--brand-tint); border-color: var(--brand); }

/* Quiet — neutral ghost button. Most table-row affordances + topbar. */
.pk-btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--fg-default);
    font-weight: 600;
}
.pk-btn--quiet:hover { background: var(--bg-muted); color: var(--fg-strong); }

/* Tonal — soft fill, used for secondary CTAs and chip-like actions. */
.pk-btn--tonal {
    background: var(--brand-tint);
    border-color: transparent;
    color: var(--brand);
}
.pk-btn--tonal:hover { background: var(--brand-tint-2); }

/* Destructive — rose tonal. */
.pk-btn--danger {
    background: var(--rose-50);
    border-color: transparent;
    color: var(--rose-600);
}
.pk-btn--danger:hover { background: var(--rose-100); color: var(--rose-800); }

/* Hero — fully-saturated, only for the single most important CTA on a
   marketing page or stand-out empty-state. Reserve to one per screen. */
.pk-btn--hero {
    background: var(--brand-mark);
    border-color: var(--brand-mark);
    color: #fff;
    box-shadow: var(--shadow-brand-glow);
}
.pk-btn--hero:hover { background: var(--indigo-700); border-color: var(--indigo-700); }

/* Sizes */
.pk-btn--sm  { padding: 6px 12px; min-height: 32px; font-size: var(--fs-sm); border-radius: var(--r-sm); gap: 6px; }
.pk-btn--lg  { padding: 14px 22px; min-height: 48px; font-size: var(--fs-lg); border-radius: var(--r-md); }
.pk-btn--icon{ padding: 0; width: 36px; height: 36px; }

/* =================================================================
   2. BADGES & STATUS PILLS
   ================================================================= */
.pk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}
.pk-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.pk-badge--no-dot::before { display: none; }

.pk-badge--info    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-bd);    }
.pk-badge--success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-bd); }
.pk-badge--warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-bd); }
.pk-badge--error   { background: var(--error-bg);   color: var(--error-fg);   border-color: var(--error-bd);   }
.pk-badge--neutral { background: var(--slate-100);  color: var(--slate-700);  border-color: var(--slate-200);  }
.pk-badge--brand   { background: var(--brand-tint); color: var(--brand-fg-on-tint); border-color: var(--brand-border); }
.pk-badge--accent  { background: var(--accent-tint);color: var(--accent-fg-on-tint); border-color: var(--accent-border); }
.pk-badge--deep    { background: var(--deep-tint);  color: var(--deep-fg-on-tint); border-color: var(--teal-200); }

/* Solid variant — for high-emphasis labels (e.g. "LIVE" on a card) */
.pk-badge--solid {
    background: var(--fg-strong);
    color: #fff;
    border-color: transparent;
}
.pk-badge--solid.pk-badge--brand { background: var(--brand); color: #fff; }
.pk-badge--solid.pk-badge--accent{ background: var(--accent); color: #04261A; }

/* =================================================================
   3. CARD
   ================================================================= */
.pk-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.pk-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-hairline);
    background: var(--bg-surface);
}
.pk-card__header--tinted { background: var(--bg-surface-2); }
.pk-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--fg-strong);
    line-height: 1.2;
}
.pk-card__subtitle {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    margin-top: 2px;
}
.pk-card__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.pk-card__body { padding: 24px; }

/* Shared brand-tint icon tile used in card headers + collapsible panels */
.pk-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: var(--brand-tint);
    color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Required-field marker on labels */
.pk-field__req { color: var(--rose-500); margin-left: 2px; font-weight: 700; }

/* Card visual variants */
.pk-card--flat { box-shadow: none; }
.pk-card--brand-edge { border-top: 3px solid var(--brand); }

/* =================================================================
   4. INPUTS
   ================================================================= */
.pk-field { display: flex; flex-direction: column; gap: 6px; }
.pk-field__label {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg-strong);
}
.pk-field__help { font-size: var(--fs-xs); color: var(--fg-muted); }
.pk-field__error{ font-size: var(--fs-xs); color: var(--rose-600); font-weight: 500; }

.pk-input, .pk-select, .pk-textarea {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--fg-strong);
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: 10px 14px;
    min-height: 40px;
    width: 100%;
    box-shadow: var(--shadow-inset);
    transition: border-color .15s, box-shadow .15s;
}
.pk-input::placeholder { color: var(--fg-subtle); }
.pk-input:hover, .pk-select:hover, .pk-textarea:hover { border-color: var(--border-default); }
.pk-input:focus, .pk-select:focus, .pk-textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}
.pk-input--error { border-color: var(--rose-500); }
.pk-input--error:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--rose-500) 25%, transparent); }

.pk-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237B7F95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
}

.pk-input--with-icon { padding-left: 38px; }
.pk-input-wrap { position: relative; }
.pk-input-wrap > .pk-input-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--fg-subtle); font-size: 14px; pointer-events: none;
}

/* Password field with show/hide toggle.
   Structure:
     <div class="pk-password">
       <input class="pk-input" type="password">
       <button class="pk-password__toggle" aria-label="Show password" aria-pressed="false">
         <svg class="pk-password__eye">…</svg>
         <svg class="pk-password__eye-off">…</svg>
       </button>
     </div>
   The button toggles `aria-pressed` and swaps which icon is shown. */
.pk-password {
    position: relative;
    display: block;
}
.pk-password > .pk-input {
    padding-right: 48px;   /* leave room for the toggle button */
    font-variant-ligatures: none;
    letter-spacing: .02em;
}
.pk-password__toggle {
    position: absolute;
    top: 50%; right: 4px;
    transform: translateY(-50%);
    width: 36px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--fg-muted);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.pk-password__toggle:hover { background: var(--bg-muted); color: var(--fg-strong); }
.pk-password__toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    color: var(--brand);
}
.pk-password__toggle svg { width: 18px; height: 18px; display: block; }
.pk-password__toggle .pk-password__eye-off { display: none; }
.pk-password__toggle[aria-pressed="true"] .pk-password__eye     { display: none; }
.pk-password__toggle[aria-pressed="true"] .pk-password__eye-off { display: block; }
.pk-password__toggle[aria-pressed="true"] { color: var(--brand); }

/* Toggle (modern switch) */
.pk-toggle {
    --w: 36px; --h: 20px;
    position: relative; display: inline-block;
    width: var(--w); height: var(--h);
}
.pk-toggle input { opacity: 0; width: 0; height: 0; }
.pk-toggle__track {
    position: absolute; inset: 0;
    background: var(--slate-200);
    border-radius: var(--r-pill);
    transition: background .15s;
}
.pk-toggle__track::after {
    content: ""; position: absolute;
    top: 2px; left: 2px;
    width: calc(var(--h) - 4px); height: calc(var(--h) - 4px);
    background: #fff; border-radius: 50%;
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease;
}
.pk-toggle input:checked + .pk-toggle__track { background: var(--brand); }
.pk-toggle input:checked + .pk-toggle__track::after { transform: translateX(calc(var(--w) - var(--h))); }

/* =================================================================
   5. TABLE
   ================================================================= */
.pk-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pk-table thead th {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fg-muted);
    background: var(--bg-surface-2);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-hairline);
    white-space: nowrap;
}
.pk-table thead th:first-child { border-top-left-radius: var(--r-md); }
.pk-table thead th:last-child  { border-top-right-radius: var(--r-md); }
.pk-table tbody td {
    padding: 16px;
    font-size: var(--fs-md);
    color: var(--fg-default);
    border-bottom: 1px solid var(--border-hairline);
    vertical-align: middle;
}
.pk-table tbody tr:hover td { background: var(--bg-muted); }
.pk-table tbody tr:last-child td { border-bottom: none; }

/* =================================================================
   6. SEGMENTED CONTROL
   ================================================================= */
.pk-segmented {
    display: inline-flex;
    padding: 4px;
    background: var(--slate-100);
    border-radius: var(--r-pill);
}
.pk-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg-muted);
    background: transparent;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: color .15s, background .15s, box-shadow .15s;
    white-space: nowrap;
}
.pk-segmented__item:hover { color: var(--fg-strong); }
.pk-segmented__item.is-active {
    color: var(--fg-strong);
    background: #fff;
    box-shadow: var(--shadow-xs);
}

/* =================================================================
   7. KPI / STAT
   ================================================================= */
.pk-stat {
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--r-xl);
    padding: 24px;
    display: flex; flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.pk-stat__label {
    font-family: var(--font-eyebrow);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--fg-muted);
}
.pk-stat__value {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--fg-strong);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}
.pk-stat__delta { font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pk-stat__delta--up   { color: var(--emerald-600); }
.pk-stat__delta--down { color: var(--rose-600); }

/* =================================================================
   8. NAV ITEM (sidebar)
   ================================================================= */
.pk-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--fg-default);
    text-decoration: none;
    transition: background .12s, color .12s;
    cursor: pointer;
}
.pk-nav-item:hover { background: var(--bg-muted); color: var(--fg-strong); }
.pk-nav-item.is-active {
    background: var(--brand-tint);
    color: var(--brand);
}
.pk-nav-item.is-active .pk-nav-icon { color: var(--brand); }
.pk-nav-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-subtle); flex-shrink: 0; }
.pk-nav-item__badge {
    margin-left: auto;
    font-size: var(--fs-2xs);
    font-weight: 700;
    background: var(--brand);
    color: #fff;
    padding: 2px 8px;
    border-radius: var(--r-pill);
}

/* =================================================================
   9. BRAND MOTIF — the woven link.
   Inline decorative strokes echoing the logo, for empty states +
   section dividers. Use sparingly.
   ================================================================= */
.pk-weave {
    --w: 24px;
    display: inline-block;
    width: var(--w);
    height: calc(var(--w) * 1.2);
    background: linear-gradient(90deg, var(--indigo-600), var(--indigo-600) 33%, var(--emerald-500) 33%, var(--emerald-500) 66%, var(--teal-600) 66%);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='black' stroke-width='3'><path d='M6 4 L12 10 L18 4 M6 24 L12 18 L18 24 M2 8 L8 14 L2 20 M22 8 L16 14 L22 20'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='black' stroke-width='3'><path d='M6 4 L12 10 L18 4 M6 24 L12 18 L18 24 M2 8 L8 14 L2 20 M22 8 L16 14 L22 20'/></svg>") no-repeat center / contain;
}

/* Hairline divider matching brand color rhythm */
.pk-divider-brand {
    height: 2px;
    background: linear-gradient(90deg, var(--indigo-600), var(--emerald-500) 50%, var(--teal-600));
    border-radius: 2px;
}

/* =================================================================
   FACET FILTER BAR
   A row of dropdown/chip filters that layer on top of a result set —
   distinct from the search query form (which BUILDS the result set) and
   the toolbar (which refines within it). Use inside a card, above the table.
   ================================================================= */
.pk-filterbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-hairline);
    flex-wrap: wrap;
    background: var(--bg-surface-2);
}
.pk-filterbar__label {
    font: 700 11px var(--font-eyebrow);
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--fg-subtle);
    display: inline-flex; align-items: center; gap: 6px;
}
.pk-facet {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: #fff;
    font: 600 13px var(--font-body);
    color: var(--fg-default);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.pk-facet:hover { border-color: var(--border-default); color: var(--fg-strong); }
.pk-facet.is-on {
    background: var(--brand-tint);
    border-color: var(--brand-border);
    color: var(--brand-fg-on-tint);
}
.pk-facet__count {
    font-variant-numeric: tabular-nums;
    background: var(--slate-100); color: var(--fg-muted);
    border-radius: var(--r-pill); padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.pk-facet.is-on .pk-facet__count { background: #fff; color: var(--brand); }
.pk-facet__x { color: var(--fg-subtle); display: inline-flex; }
.pk-facet.is-on .pk-facet__x { color: var(--brand); }
.pk-facet-select {
    height: 34px; min-height: 34px; width: auto;
    padding: 4px 28px 4px 10px; font-size: 13px;
    border-radius: var(--r-md);
}
.pk-filterbar__clear {
    margin-left: auto;
    font: 600 13px var(--font-body);
    color: var(--fg-muted);
    background: transparent; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.pk-filterbar__clear:hover { color: var(--rose-600); }

/* Query search form — the structured multi-field panel that BUILDS a query.
   (Plan Search.) A grid of labeled fields ending in a search button. */
.pk-query-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
}
.pk-query-form__actions { display: flex; gap: 8px; align-items: flex-end; }

/* =================================================================
   TABLE TOOLBAR
   Search + export + entries-per-page row that sits above a .pk-table,
   inside a .pk-card (between header and table). Pairs with .pk-pagination.
   ================================================================= */
.pk-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-hairline);
    flex-wrap: wrap;
}
.pk-toolbar__search { position: relative; flex: 1 1 240px; min-width: 180px; max-width: 360px; }
.pk-toolbar__search .pk-input { min-height: 36px; padding-left: 36px; }
.pk-toolbar__search .pk-input-icon { left: 12px; }
.pk-toolbar__spacer { flex: 1; }
.pk-toolbar__group { display: inline-flex; align-items: center; gap: 8px; }
.pk-toolbar__group { display: inline-flex; align-items: center; gap: 8px; }
/* Export buttons — CSV (teal) / Excel (emerald), quiet outline */
.pk-export-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    background: #fff;
    font: 600 13px var(--font-body);
    color: var(--fg-default);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.pk-export-btn:hover { background: var(--bg-muted); border-color: var(--border-default); color: var(--fg-strong); }
.pk-export-btn--excel:hover { border-color: var(--emerald-300); color: var(--emerald-700); background: var(--emerald-50); }
.pk-export-btn--csv:hover   { border-color: var(--teal-300);   color: var(--teal-700);   background: var(--teal-50); }
.pk-export-btn svg { color: var(--fg-subtle); }
.pk-export-btn--excel:hover svg { color: var(--emerald-600); }
.pk-export-btn--csv:hover svg   { color: var(--teal-600); }
.pk-toolbar__entries {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm); color: var(--fg-muted);
    white-space: nowrap;
}
.pk-toolbar__entries select.pk-select {
    height: 36px; min-height: 36px; width: auto;
    padding: 4px 28px 4px 10px; font-size: 13px;
}

/* =================================================================
   PAGINATION
   For tables and any paged list. Pairs with .pk-table.
   ================================================================= */
.pk-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-hairline);
    background: var(--bg-surface-2);
    flex-wrap: wrap;
}
.pk-pagination__summary {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}
.pk-pagination__summary strong { color: var(--fg-strong); font-weight: 600; }
.pk-pagination__controls { display: inline-flex; align-items: center; gap: 4px; }
.pk-pagination__pages    { display: inline-flex; align-items: center; gap: 2px; margin: 0 4px; }
.pk-pagination__btn {
    min-width: 32px; height: 32px;
    padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: 600 13px var(--font-body);
    color: var(--fg-default);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    font-variant-numeric: tabular-nums;
}
.pk-pagination__btn:hover {
    background: var(--bg-muted);
    color: var(--fg-strong);
    border-color: var(--border-hairline);
}
.pk-pagination__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pk-pagination__btn.is-active {
    background: var(--brand-tint);
    color: var(--brand);
    border-color: var(--brand-border);
}
.pk-pagination__btn:disabled,
.pk-pagination__btn[aria-disabled="true"] {
    color: var(--fg-subtle);
    cursor: not-allowed;
    background: transparent;
    border-color: transparent;
}
.pk-pagination__ellipsis {
    color: var(--fg-subtle);
    padding: 0 6px;
    font-weight: 600;
}
.pk-pagination__size {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm);
    color: var(--fg-muted);
}
.pk-pagination__size select.pk-select {
    height: 32px; min-height: 32px;
    padding: 4px 28px 4px 10px;
    width: auto;
    font-size: 13px;
}

/* =================================================================
   SUB-NAV (contextual secondary navigation)
   The grouped rail shown inside a record context (e.g. a Plan):
   section labels + nav items, with a back-link + title header above.
   ================================================================= */
.pk-subnav { display: flex; flex-direction: column; gap: 18px; }
.pk-subnav__group { display: flex; flex-direction: column; gap: 1px; }
.pk-subnav__label {
    font: 700 11px var(--font-eyebrow);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--fg-subtle);
    padding: 0 10px;
    margin-bottom: 6px;
}
.pk-subnav__item {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    font: 600 14px var(--font-body);
    color: var(--fg-default);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.pk-subnav__item:hover { background: var(--bg-muted); color: var(--fg-strong); }
.pk-subnav__item.is-active { background: var(--brand-tint); color: var(--brand); }
.pk-subnav__item.is-active .pk-subnav__icon { color: var(--brand); }
.pk-subnav__icon { width: 18px; flex-shrink: 0; color: var(--fg-subtle); display: inline-flex; }
/* "Privileged" items (e.g. TPA Settings) tint plum to read as elevated */
.pk-subnav__item--admin { color: var(--plum-700); }
.pk-subnav__item--admin .pk-subnav__icon { color: var(--plum-500); }
.pk-subnav__item--admin:hover { background: var(--plum-100); color: var(--plum-700); }

/* Record-context header (back chevron + title + status badge) */
.pk-context-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 4px;
}
.pk-context-head__back {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    border: 1px solid var(--border-hairline);
    background: #fff;
    color: var(--fg-muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.pk-context-head__back:hover { background: var(--bg-muted); color: var(--fg-strong); }
.pk-context-head__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--fg-strong); letter-spacing: -.015em; }

/* Collapsible section card (the General Settings / Match Settings panels) */
.pk-collapse { }
.pk-collapse__head {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    user-select: none;
}
.pk-collapse__head .pk-collapse__icon {
    width: 36px; height: 36px; border-radius: var(--r-md);
    background: var(--brand-tint); color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pk-collapse__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--fg-strong); line-height: 1.2; }
.pk-collapse__sub   { font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.pk-collapse__chevron { margin-left: auto; color: var(--fg-subtle); transition: transform .18s ease; }
.pk-collapse.is-open .pk-collapse__chevron { transform: rotate(180deg); }
.pk-collapse__body { padding: 0 22px 22px; border-top: 1px solid var(--border-hairline); padding-top: 20px; }

/* Right-rail section switcher — labeled chip group (replaces cramped underline tabs).
   Long labels wrap gracefully; active chip is a soft brand fill. */
.pk-railnav { margin-bottom: 18px; }
.pk-railnav__label {
    font: 700 11px var(--font-eyebrow);
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--fg-subtle);
    margin-bottom: 10px;
}
.pk-railnav__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-railnav__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-soft);
    background: #fff;
    color: var(--fg-default);
    font: 600 13px var(--font-body);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
}
.pk-railnav__chip:hover { background: var(--bg-muted); color: var(--fg-strong); border-color: var(--border-default); }
.pk-railnav__chip.is-active {
    background: var(--brand-tint);
    color: var(--brand);
    border-color: var(--brand-border);
}
.pk-railnav__chip.is-active .pk-railnav__dot { background: var(--brand); }
.pk-railnav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-subtle); flex-shrink: 0; }

/* Right-rail tab strip (Advanced Settings / TruStage / 360 / Client Comm) */
.pk-railtabs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; }
.pk-railtabs a {
    font: 600 14px var(--font-body);
    color: var(--fg-muted);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
}
.pk-railtabs a:hover { color: var(--fg-default); }
.pk-railtabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* Disclosure row (Data Shaping / Record Exclusions sub-rows with chevron) */
.pk-disclosure {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--border-hairline);
    cursor: pointer;
    font: 600 14px var(--font-body);
    color: var(--fg-strong);
    transition: color .12s;
}
.pk-disclosure:first-of-type { border-top: none; }
.pk-disclosure:hover { color: var(--brand); }
.pk-disclosure__chevron { color: var(--fg-subtle); }

/* FontAwesome utility class (legacy compatibility) */
.fa {
    display: inline-block;
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}