/* ============================================================
   zaalt.mn — content-polish.css
   Content surfaces polish (laws, dictionary, guides, contracts,
   generator, credits, profile). Implements docs/design-system.md.
   Loaded AFTER app.css only on content templates; overrides are
   scoped under body.cp to win regardless of load order.
   ============================================================ */

/* ---------- Medallion icon chips (design-system §6.7) ---------- */
.cp-medallion {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-family: var(--z-serif);
    background: var(--z-gold);
    border: 1px solid rgba(116, 89, 10, .5);
    box-shadow: 0 2px 6px rgba(20, 41, 74, .14);
    color: var(--z-navy-deep);
}
.cp-medallion-sm {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
}

/* ---------- Panels (ivory paper cards) ---------- */
.cp-panel {
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow-sm);
}
.cp-panel-gold { border-color: var(--z-gold-hairline); }
.cp-panel-pad { padding: 1.75rem; }
.cp-panel-head {
    font-size: 1.15rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--z-navy);
    margin-bottom: 1rem;
}

/* ---------- Page-head band extras (search, meta pills) ---------- */
/* Merged white pill — same control as the home hero search */
.cp-head-search {
    background: #fff;
    border-radius: 2rem; /* full pill; inner button echoes the curvature */
    padding: .4rem;
    box-shadow: var(--z-shadow);
}
.cp-head-search .btn { border-radius: 2rem; }
.cp-head-search .form-control {
    border-radius: 2rem;
    padding: .55rem 1.1rem;
    border: none;
    background: transparent;
}
.cp-head-search .form-control:focus { box-shadow: none; }
.cp-head-search:focus-within { box-shadow: 0 0 0 .25rem rgba(176, 138, 46, .42), var(--z-shadow); }
.cp-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}
.cp-head-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 2rem;
    border: 1px solid rgba(176, 138, 46, .55);
    background: rgba(176, 138, 46, .14);
    color: rgba(255, 255, 255, .85);
    font-size: .8rem;
    font-weight: 600;
}
.cp-head-pill strong { color: var(--z-gold-soft); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Quiet gold outline button on the navy band (gold-text fails contrast on navy) */
.cp .page-head .btn-outline-gold {
    color: var(--z-gold-soft);
    border-color: rgba(176, 138, 46, .75);
}
.cp .page-head .btn-outline-gold:hover,
.cp .page-head .btn-outline-gold:focus {
    background: var(--z-gold);
    border-color: var(--z-gold);
    color: var(--z-navy-deep);
}

/* ---------- Shared pagination (laws / dictionary) ---------- */
.cp .pagination .page-link {
    color: var(--z-navy);
    border-radius: .5rem;
    margin: 0 .12rem;
    border-color: var(--z-border);
    background: var(--z-surface);
}
.cp .pagination .page-link:hover { background: var(--z-gold-tint); border-color: var(--z-gold-soft); }
.cp .pagination .page-item.active .page-link { background: var(--z-navy); border-color: var(--z-navy); color: #fff; }
.cp .pagination .page-item.disabled .page-link { background: transparent; color: var(--z-muted); }

/* ---------- Status badges: antique palette, never Bootstrap yellow (§4) ----------
   JS (contracts.js / credits-page.js) still injects .text-bg-warning /
   .text-bg-secondary — restyle them here instead of forking the scripts. */
.cp .badge.text-bg-warning {
    background: var(--z-gold-tint) !important;
    color: var(--z-gold-text) !important;
    border: 1px solid var(--z-gold-soft);
}
.cp .badge.text-bg-secondary {
    background: var(--z-bg) !important;
    color: var(--z-muted) !important;
    border: 1px solid var(--z-border);
}
.cp .badge { font-weight: 700; }

/* Ledger +/- amounts injected by credits-page.js use text-success/text-danger */
.cp .z-table .text-success { color: var(--z-success) !important; font-variant-numeric: tabular-nums; }
.cp .z-table .text-danger { color: #B4232A !important; font-variant-numeric: tabular-nums; }

/* Empty states inside table cells */
.cp td .empty-state { padding: 2rem 1rem; }

/* Date column stays on one line; .table-responsive provides the scroll */
.cp .z-table tbody td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================
   /laws — catalog
   ============================================================ */
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; }
.cat-chip {
    display: inline-block;
    padding: .35rem .85rem;
    border-radius: 2rem;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    color: var(--z-text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--z-dur-fast) var(--z-ease), background var(--z-dur-fast) var(--z-ease);
}
.cat-chip:hover { border-color: var(--z-gold); background: var(--z-gold-tint); color: var(--z-gold-text); }
.cat-chip.active { background: var(--z-navy); border-color: var(--z-navy); color: #fff; }
.cat-chip.active:hover { color: #fff; } /* keep active chip legible on hover */
.cat-chip .chip-count { color: var(--z-muted); font-weight: 500; }
.cat-chip.active .chip-count { color: rgba(255, 255, 255, .7); }
/* "Бусад ангилал" overflow chip — dashed gold outline */
.cat-chip-more { border-style: dashed; border-color: var(--z-gold-soft); color: var(--z-gold-text); }
.cat-more[open] > summary.cat-chip-more { border-color: var(--z-gold); background: var(--z-gold-tint); }

/* "Бусад" overflow menu for the long category tail (P3) */
.cat-more { position: relative; }
.cat-more > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.cat-more > summary::-webkit-details-marker { display: none; }
.cat-more[open] > summary.cat-chip { border-color: var(--z-navy); color: var(--z-navy); }
.cat-more-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + .4rem);
    left: 0;
    min-width: 320px;
    max-width: min(560px, 82vw);
    max-height: 340px;
    overflow-y: auto;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: .75rem;
    box-shadow: var(--z-shadow);
    padding: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Compact law index rows inside one ivory panel (P3) */
.law-index { overflow: hidden; }
.law-index .list-row { align-items: center; }
.law-index .list-row-title { line-height: 1.45; }
.law-index .list-row-title::first-letter { text-transform: uppercase; }

/* ---------- /laws hero: left intro + right stat pills + Лавлах tabs ---------- */
.cp .laws-hero { padding-top: 2.25rem; padding-bottom: 0; }
.cp .laws-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
}
.cp .laws-hero-intro { max-width: 640px; }
.cp .laws-hero-intro h1 { margin-bottom: .35rem; }
.cp .laws-hero-intro .page-head-sub { margin-bottom: 0; }
.cp .laws-hero-stats { padding-bottom: .3rem; }
.cp .laws-hero-search { max-width: 680px; margin-top: 1.1rem; }

/* Лавлах tab bar along the bottom of the navy band */
.cp .lavlakh-tabs { display: flex; gap: .25rem; margin-top: 1.5rem; overflow-x: auto; }
.cp .lavlakh-tab {
    padding: .65rem 1.1rem;
    color: rgba(255, 255, 255, .7);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    border-radius: .5rem .5rem 0 0;
    transition: background var(--z-dur-fast) var(--z-ease), color var(--z-dur-fast) var(--z-ease);
}
.cp .lavlakh-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.cp .lavlakh-tab.active {
    color: #fff;
    font-weight: 700;
    background: rgba(176, 138, 46, .12);
    border-bottom-color: var(--z-gold);
}

/* ---------- /laws list header + sort control ---------- */
.cp .laws-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}
.cp .laws-sort { font-size: .82rem; color: var(--z-muted); white-space: nowrap; }
.cp .laws-sort-opt { color: var(--z-muted); text-decoration: none; }
.cp .laws-sort-opt:hover { color: var(--z-gold-text); }
.cp .laws-sort-opt.active {
    color: var(--z-navy);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--z-gold);
    text-underline-offset: 2px;
}
.cp .law-dot { color: var(--z-border); }

/* ---------- Official law rows (medallion · title · meta · status flag) ---------- */
.cp .law-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--z-border);
    text-decoration: none;
    color: var(--z-text);
    transition: background var(--z-dur-fast) var(--z-ease);
}
.cp .law-row:last-child { border-bottom: 0; }
.cp .law-row:hover { background: var(--z-bg); }
.cp .law-row-medallion {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: .75rem;
    background: var(--z-gold);
    border: 1px solid rgba(116, 89, 10, .5);
    color: var(--z-navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--z-serif);
    font-size: 1.05rem;
    box-shadow: 0 2px 6px rgba(20, 41, 74, .14);
}
.cp .law-row-main { flex: 1; min-width: 0; }
.cp .law-row-titleline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .25rem;
}
.cp .law-row-title { font-size: .98rem; font-weight: 600; color: var(--z-navy); line-height: 1.4; }
.cp .law-row-title::first-letter { text-transform: uppercase; }
.cp .law-row:hover .law-row-title { color: var(--z-gold-text); }
.cp .law-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem .8rem;
    font-size: .8rem;
    color: var(--z-muted);
    font-variant-numeric: tabular-nums;
}
.cp .law-row-meta strong { color: var(--z-text); font-weight: 600; }
.cp .law-row-arrow { flex-shrink: 0; color: var(--z-gold); font-size: 1rem; }

/* Status flag pills — antique green / gold-tint / red */
.cp .law-flag {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 2rem;
    padding: .25rem .7rem;
    white-space: nowrap;
}
.cp .law-flag-ok  { background: var(--z-success-tint); color: var(--z-success); border: 1px solid rgba(46, 125, 91, .3); }
.cp .law-flag-rev { background: var(--z-gold-tint); color: var(--z-gold-text); border: 1px solid var(--z-gold-soft); }
.cp .law-flag-bad { background: #FBEDEE; color: #B4232A; border: 1px solid #EBD3D3; }

/* Mobile: rows wrap — medallion+title first, meta below, flag drops under meta */
@media (max-width: 575.98px) {
    .cp .law-row { flex-wrap: wrap; gap: .5rem .75rem; min-height: 44px; }
    .cp .law-row-main { flex: 1 1 calc(100% - 58px); }
    .cp .law-row-arrow { display: none; }
    .cp .law-flag { margin-left: 58px; }
    .cp .laws-list-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
}
/* Brand chip — gold outline (green exists nowhere in the palette) */
.badge-en {
    background: var(--z-gold-tint);
    border: 1px solid var(--z-gold-hairline);
    color: var(--z-gold-text);
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .5rem;
    border-radius: .5rem;
    vertical-align: 2px;
}
.popular-card {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    padding: 1rem 1.1rem;
    height: 100%;
    text-decoration: none;
    box-shadow: var(--z-shadow-sm);
    transition: box-shadow var(--z-dur-fast) var(--z-ease), transform var(--z-dur-fast) var(--z-ease);
}
.popular-card:hover { box-shadow: var(--z-shadow); transform: translateY(-2px); }
.popular-card .p-title { color: var(--z-navy); font-weight: 700; font-size: .92rem; line-height: 1.4; }
.popular-card .p-title::first-letter { text-transform: uppercase; }
.popular-card:hover .p-title { color: var(--z-gold-text); }
.popular-card .p-meta { color: var(--z-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* ============================================================
   /laws/{id} — law document view
   ============================================================ */
.cp .law-topbar { font-size: .85rem; color: var(--z-muted); }
.cp .law-topbar .law-back { color: var(--z-navy); font-weight: 600; text-decoration: none; }
.cp .law-topbar .law-back:hover { color: var(--z-gold-text); }
.cp .law-topbar .law-meta-item::before { content: "·"; margin-right: .75rem; color: var(--z-border); }

/* Official § seal above the masthead */
.cp .legal-doc .ld-seal {
    display: flex;
    width: 54px;
    height: 54px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--z-gold);
    border: 1px solid rgba(116, 89, 10, .5);
    color: var(--z-navy-deep);
    align-items: center;
    justify-content: center;
    font-family: var(--z-serif);
    font-size: 1.45rem;
    box-shadow: 0 2px 6px rgba(20, 41, 74, .14);
}

/* Status strip below the title (sans-serif inside the serif document) */
.cp .legal-doc .ld-status-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.4rem;
    font-family: var(--z-font);
}

/* Sidebar meta card (gold-tint) above the TOC */
.cp .law-meta-card {
    border: 1px solid var(--z-gold-hairline);
    border-radius: .75rem;
    background: var(--z-gold-tint);
    padding: .9rem 1rem;
    margin-bottom: 1rem;
}
.cp .law-meta-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem .7rem;
    font-size: .8rem;
}
.cp .law-meta-k { color: var(--z-gold-text); font-weight: 700; }
.cp .law-meta-v { color: var(--z-text); font-variant-numeric: tabular-nums; }
.cp .law-meta-v a { color: var(--z-navy); font-weight: 600; }
.cp .law-meta-valid { color: var(--z-success); font-weight: 700; }
.cp .law-meta-rev { color: var(--z-gold-text); font-weight: 700; }

.cp .law-toc {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    padding: 1.1rem 1.1rem;
}
.cp .law-toc .toc-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--z-muted);
    letter-spacing: .06em;
}
.cp .law-toc a {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* long chapter names never become paragraphs */
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: .32rem .5rem .32rem .65rem;
    border-left: 2px solid transparent;
    border-radius: 0 .5rem .5rem 0;
    color: var(--z-navy);
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}
.cp .law-toc a::first-letter { text-transform: uppercase; }
.cp .law-toc a:hover {
    background: var(--z-gold-tint);
    border-left-color: var(--z-gold);
    color: var(--z-navy);
}
/* TOC hierarchy: parts (ХЭСЭГ) strong navy · chapters navy · sub-chapters small, muted, deep indent */
.cp .law-toc a.toc-part { font-weight: 800; }
.cp .law-toc a.toc-sub {
    padding-left: 1.9rem;
    font-weight: 500;
    font-size: .78rem;
    color: var(--z-muted);
}
/* Scroll-spy current chapter (law-view.js) */
.cp .law-toc a.active {
    background: var(--z-gold-tint);
    border-left-color: var(--z-gold);
    color: var(--z-navy);
}

/* Floating back-to-top (law-view.js injects it on long documents) */
.back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.5rem;
    z-index: 1040;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--z-gold-hairline);
    background: var(--z-navy);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    box-shadow: var(--z-shadow);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--z-dur-med) var(--z-ease), background var(--z-dur-fast) var(--z-ease);
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--z-navy-deep); }
.back-to-top:focus-visible { outline: none; box-shadow: var(--z-ring), var(--z-shadow); }
@media print { .back-to-top { display: none !important; } }

/* Sticky "current chapter" pill (law-view.js) — keeps readers oriented in long laws */
.law-chapter-pill {
    position: fixed;
    left: 1.25rem;
    bottom: 1.5rem;
    z-index: 1040;
    max-width: min(52ch, 62vw);
    background: var(--z-navy);
    color: #fff;
    border: 1px solid var(--z-gold-hairline);
    border-radius: 2rem;
    padding: .42rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: var(--z-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--z-dur-med) var(--z-ease);
}
.law-chapter-pill.show { opacity: 1; }
@media print { .law-chapter-pill { display: none !important; } }
.cp details.toc-mobile {
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    padding: .75rem 1rem;
}
.cp details.toc-mobile summary { font-weight: 700; color: var(--z-navy); cursor: pointer; }
.cp details.toc-mobile a::first-letter { text-transform: uppercase; }

/* ============================================================
   /dictionary
   ============================================================ */
.abc-rail {
    position: sticky;
    top: 62px;
    z-index: 20;
    background: var(--z-bg);
    padding: .8rem 0;
    border-bottom: 1px solid var(--z-border);
    margin-bottom: 1.5rem;
}
.abc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.abc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .4rem;
    border-radius: .6rem;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    color: var(--z-navy);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: background var(--z-dur-fast) var(--z-ease), border-color var(--z-dur-fast) var(--z-ease);
}
.abc-chip:hover { border-color: var(--z-navy); color: var(--z-navy); }
.abc-chip.active { background: var(--z-navy); border-color: var(--z-navy); color: #fff; }
.abc-chip.disabled { opacity: .35; pointer-events: none; }

/* Two-column masonry of compact term rows (P5) */
.dict-cols { columns: 2 420px; column-gap: 1.5rem; }
.term-card {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    padding: 1rem 1.2rem;
    margin-bottom: .9rem;
    box-shadow: var(--z-shadow-sm);
}
.term-card .term-name { color: var(--z-navy); font-weight: 700; font-size: 1rem; }
.term-card .term-def { color: var(--z-text); font-size: .9rem; line-height: 1.65; }
.term-card .term-src {
    color: var(--z-muted);
    font-size: .78rem;
    border-top: 1px dashed var(--z-border);
    padding-top: .5rem;
    margin-top: .65rem;
}
.term-card .term-src::before { content: "Эх сурвалж: "; font-weight: 700; }

/* ============================================================
   /guides + /guides/{slug}
   ============================================================ */
.cp .guide-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--z-navy); line-height: 1.35; }
.cp .guide-card:hover h3 { color: var(--z-gold-text); }

/* step-number medallion in step-card heads (P6) */
.cp .gv-step-title { font-size: 1.08rem; }
.cp .gv-step-head { align-items: center; }
.cp .gv-step-no {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--z-serif);
    font-size: 1.15rem;
    font-weight: 700;
    background: var(--z-gold);
    border: 1px solid rgba(116, 89, 10, .5);
    color: var(--z-navy-deep);
}
.cp .gv-step.done .gv-step-no { background: var(--z-success); border-color: var(--z-success); color: #fff; }
.cp .gv-step-head .gv-check { margin-left: auto; }

/* ============================================================
   /contracts
   ============================================================ */
/* Compact dropzone: the page's one true CTA, not a void */
.cp .upload-zone { padding: 1.5rem 1.5rem 1.75rem; }
.cp .upload-zone .upload-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(176, 138, 46, .12);
    color: var(--z-gold-text);
    font-size: 1.5rem;
    line-height: 1;
}
/* Guest history: one quiet line instead of a tall empty panel */
.cp .cz-login-note {
    padding: .8rem 1.1rem;
    font-size: .9rem;
    color: var(--z-text);
}
.cp .cz-login-note a { color: var(--z-navy); font-weight: 700; }
.cp-balance-strip { display: inline-flex; align-items: center; gap: .5rem; }
.cp-balance-strip[hidden] { display: none; }
.cp .feat-card {
    padding: 1.5rem 1.35rem;
    border: 1px solid var(--z-gold-hairline) !important; /* !important: markup carries .border-0 */
}
.cp .feat-card h3 { font-size: 1rem; font-weight: 700; color: var(--z-navy); }
.cp .feat-card .cp-medallion { margin-bottom: .9rem; }
.cp .feat-card .cp-medallion svg { width: 22px; height: 22px; }
/* Explicit browse button inside the dropzone (zone click opens the picker) */
.cp .upload-zone .upload-browse-btn { pointer-events: none; }

/* Equal-height card titles: 2-line reserve so body baselines align across a row */
@media (min-width: 576px) {
    .cp .feat-card h3,
    .cp .guide-card h3,
    .cp .gen-type-card h5 { min-height: 2.7em; }
}

/* ============================================================
   /contracts/{id} — report
   ============================================================ */
.cp .report-h {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--z-navy);
    margin-bottom: 1rem;
}
.cp .report-h .cp-medallion-sm { width: 34px; height: 34px; font-size: .95rem; }
.cp .report-h .report-h-count { color: var(--z-muted); font-weight: 400; font-size: .85rem; }
.cp .report-kicker {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--z-gold-text);
    margin-bottom: .5rem;
}

/* ============================================================
   /generator
   ============================================================ */
.cp .gen-type-card { display: flex; flex-direction: column; }
.cp .gen-type-card h5 { font-size: 1.1rem; font-weight: 700; color: var(--z-navy); }
.cp .gen-type-card .cp-medallion { margin-bottom: 1rem; }
/* Card CTA = gold text-link, same voice as .guide-card-cta on /guides */
.cp .gen-type-card .gen-type-cta {
    margin-top: auto;
    align-self: flex-start;
    font-size: .875rem;
    font-weight: 600;
    color: var(--z-gold-text);
}
.cp .gen-type-card:hover h5 { color: var(--z-gold-text); }
.gen-recent-panel { overflow: hidden; }

/* ============================================================
   /credits + /profile (account)
   ============================================================ */
.cp .account-head { margin: 2.5rem 0 2rem; }
.cp .account-head .page-title { margin-bottom: .35rem; }
.cp .account-head .account-head-sub { color: var(--z-muted); margin-bottom: 0; font-size: .95rem; }

.cp .price-card .plan-name {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--z-muted);
    margin-bottom: .75rem;
}
.cp .price-card.featured .plan-name { color: rgba(255, 255, 255, .72); }
.cp .balance-inline { font-size: 2rem; font-weight: 800; color: var(--z-navy); font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ============================================================
   /profile — redesigned "Миний булан" (design frames 1a / 1b)
   ============================================================ */
.min-w-0 { min-width: 0; }

/* --- Identity header --- */
.cp .pf-identity {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 2.5rem 0 2rem;
}
.cp .pf-avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--z-gold);
    border: 1px solid rgba(116, 89, 10, .5);
    box-shadow: 0 2px 6px rgba(20, 41, 74, .14);
    color: var(--z-navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--z-serif);
    font-weight: 700;
    font-size: 1.6rem;
}
.cp .pf-name {
    font-family: var(--z-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--z-navy);
    letter-spacing: 0;
    margin: 0 0 .2rem;
}
.cp .pf-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .9rem;
    color: var(--z-muted);
    font-size: .9rem;
}
.cp .pf-dot { color: var(--z-border); }

/* --- Layout grid: 1fr / 340px on desktop, reordered single column on mobile --- */
.cp .pf-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.cp .pf-col { display: flex; flex-direction: column; gap: 1.5rem; }

/* --- Cards --- */
.cp .pf-card {
    background: var(--z-surface);
    border: 1px solid var(--z-gold-hairline);
    border-radius: 1rem;
    box-shadow: var(--z-shadow-sm);
    padding: 1.75rem;
}
.cp .pf-card-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--z-navy);
    margin: 0 0 1.25rem;
}
.cp .pf-glyph {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--z-gold);
    border: 1px solid rgba(116, 89, 10, .5);
    color: var(--z-navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--z-serif);
    font-size: .95rem;
}
.cp .pf-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cp .pf-phone-row { display: flex; align-items: center; gap: .75rem; }
.cp .pf-phone-group { flex: 0 0 260px; }
.cp .pf-phone-help { font-size: .78rem; color: var(--z-muted); line-height: 1.5; margin: 0; }

/* --- Password card (details: collapsible on mobile, forced open on desktop) --- */
.cp .pf-pass > .pf-pass-summary { list-style: none; cursor: pointer; }
.cp .pf-pass > .pf-pass-summary::-webkit-details-marker { display: none; }
.cp .pf-pass-summary { margin-bottom: 0; }
.cp .pf-pass-title { margin-right: auto; }
.cp .pf-chevron { color: var(--z-gold); font-size: 1.1rem; }
.cp .pf-pass-sub { color: var(--z-muted); font-size: .875rem; margin: .9rem 0 1.25rem; }

/* --- Balance card (featured, navy) --- */
.cp .pf-balance-card {
    background: var(--z-navy);
    border: 1.5px solid var(--z-gold);
    border-radius: 1rem;
    box-shadow: var(--z-shadow-lg);
    padding: 1.5rem;
}
.cp .pf-balance-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--z-gold-soft);
    margin-bottom: .6rem;
}
.cp .pf-balance-amount { display: flex; align-items: baseline; gap: .35rem; margin-bottom: 1.1rem; }
.cp .pf-balance-amount .tnum { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1.1; }
.cp .pf-balance-cur { color: rgba(255, 255, 255, .75); font-size: 1.1rem; }
.cp .pf-topup { margin-bottom: .75rem; }
.cp .pf-history-link {
    display: block;
    text-align: center;
    color: var(--z-gold-soft);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--z-dur-fast) var(--z-ease);
}
.cp .pf-history-link:hover { color: #fff; }

/* --- Quick links card --- */
.cp .pf-quicklinks {
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: 1rem;
    box-shadow: var(--z-shadow-sm);
    overflow: hidden;
}
.cp .pf-ql-head {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--z-muted);
    padding: 1rem 1.25rem .5rem;
}
.cp .pf-ql-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--z-border);
    text-decoration: none;
    color: var(--z-navy);
    font-weight: 600;
    font-size: .92rem;
    transition: background var(--z-dur-fast) var(--z-ease), color var(--z-dur-fast) var(--z-ease);
}
.cp .pf-ql-row:hover { background: var(--z-gold-tint); color: var(--z-gold-text); }
.cp .pf-ql-arrow { color: var(--z-gold); }

/* --- Logout card --- */
.cp .pf-logout-card {
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: 1rem;
    box-shadow: var(--z-shadow-sm);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cp .pf-logout-caption { color: var(--z-muted); font-size: .85rem; line-height: 1.5; }
.cp .pf-logout-btn { flex-shrink: 0; }

/* --- Desktop: two columns, password card forced open --- */
@media (min-width: 992px) {
    .cp .pf-grid { display: grid; grid-template-columns: 1fr 340px; align-items: start; }
    /* Reveal the password body even when the <details> is collapsed.
       Legacy engines (Firefox / older Chromium) hide it with display:none;
       modern Chromium/Safari hide it via content-visibility on ::details-content
       — override both so the card always reads as an open section on desktop. */
    .cp .pf-pass > :not(.pf-pass-summary) { display: block; }
    .cp .pf-pass::details-content { content-visibility: visible; block-size: auto; }
    .cp .pf-pass-summary { pointer-events: none; }
    .cp .pf-chevron { display: none; }
    .cp .pf-pass-sub { margin-left: 2.7rem; }
}

/* --- Mobile: single column, spec order (identity → balance → links → info → password → logout) --- */
@media (max-width: 991.98px) {
    .cp .pf-col { display: contents; }
    .cp .pf-balance-card { order: 2; }
    .cp .pf-quicklinks { order: 3; }
    .cp .pf-info { order: 4; }
    .cp .pf-pass { order: 5; }
    .cp .pf-logout-card { order: 6; }
    .cp .pf-field-grid { grid-template-columns: 1fr; }
    .cp .pf-phone-row { flex-direction: column; align-items: stretch; gap: .5rem; }
    .cp .pf-phone-group { flex: 1 1 auto; }
    .cp .pf-info .btn, .cp .pf-pass .btn { width: 100%; }
    .cp .pf-logout-btn { min-height: 44px; }
}

@media (max-width: 575.98px) {
    .cp .pf-identity { gap: .9rem; margin: 1.75rem 0 1.25rem; }
    .cp .pf-avatar { width: 52px; height: 52px; font-size: 1.35rem; }
    .cp .pf-name { font-size: 1.35rem; }
    .cp .pf-card { padding: 1.25rem; }
}

@media (max-width: 575.98px) {
    .cp-medallion { width: 46px; height: 46px; font-size: 1.25rem; }
    .cp .account-head { margin: 1.75rem 0 1.5rem; }
    /* the wrapped letter rail is too tall to pin on phones */
    .abc-rail { position: static; }
}

/* ============================================================
   /cases — T2 outcome explorer («Танайхтай төстэй хэргүүд»)
   ============================================================ */
.cp .cases-disclaimer {
    font-size: .82rem;
    color: var(--z-muted);
    background: rgba(176, 138, 46, .06);
    border: 1px dashed var(--z-gold-soft, #d8c48a);
    border-radius: .5rem;
    padding: .6rem .9rem;
}
.cp .outcome-stats-card {
    background: #fff;
    border: 1px solid rgba(20, 41, 74, .1);
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(20, 41, 74, .05);
}
.cp .outcome-headline { font-size: .85rem; color: var(--z-muted); }
.cp .outcome-headline strong { color: var(--z-navy); font-size: 1rem; }
.cp .outcome-bars { display: flex; flex-direction: column; gap: .3rem; }
.cp .outcome-bar-row {
    display: grid;
    grid-template-columns: 220px 1fr 110px;
    align-items: center;
    gap: .75rem;
    padding: .3rem .45rem;
    border-radius: .4rem;
    text-decoration: none;
    color: inherit;
    font-size: .84rem;
}
.cp .outcome-bar-row:hover, .cp .outcome-bar-row.active { background: rgba(176, 138, 46, .07); }
.cp .ob-track {
    height: 10px;
    background: rgba(20, 41, 74, .07);
    border-radius: 999px;
    overflow: hidden;
}
.cp .ob-fill { display: block; height: 100%; border-radius: 999px; }
.cp .ob-ok    { background: #2e7d4f; }
.cp .ob-warn  { background: var(--z-gold, #b08a2e); }
.cp .ob-bad   { background: #a53d3d; }
.cp .ob-muted { background: #8a97a8; }
.cp .ob-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp .ob-pct { color: var(--z-muted); font-size: .78rem; }

.cp .case-list { display: flex; flex-direction: column; gap: .55rem; }
.cp .case-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid rgba(20, 41, 74, .09);
    border-radius: .6rem;
    padding: .8rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cp .case-row:hover { border-color: var(--z-gold-soft, #d8c48a); box-shadow: 0 2px 8px rgba(20, 41, 74, .07); }
.cp .case-row-title { font-size: .92rem; font-weight: 600; color: var(--z-navy); margin-bottom: .2rem; }
.cp .case-row-meta { font-size: .76rem; color: var(--z-muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.cp .case-chip {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    color: var(--z-navy);
    background: rgba(20, 41, 74, .06);
    border-radius: 999px;
    padding: .12rem .55rem;
}
.cp .outcome-pill {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .22rem .65rem;
    white-space: nowrap;
}
.cp .outcome-pill-ok    { color: #1e6b3a; background: rgba(46, 125, 79, .1); border: 1px solid rgba(46, 125, 79, .3); }
.cp .outcome-pill-warn  { color: #8a6d24; background: rgba(176, 138, 46, .1); border: 1px solid var(--z-gold-soft, #d8c48a); }
.cp .outcome-pill-bad   { color: #9c2b2b; background: rgba(165, 61, 61, .08); border: 1px solid rgba(165, 61, 61, .3); }
.cp .outcome-pill-muted { color: var(--z-muted); background: rgba(20, 41, 74, .05); border: 1px solid rgba(20, 41, 74, .12); }

.cp .case-text { font-size: .92rem; line-height: 1.7; word-break: break-word; }

@media (max-width: 575.98px) {
    .cp .outcome-bar-row { grid-template-columns: 1fr; gap: .2rem; }
    .cp .ob-num { text-align: left; }
    .cp .case-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
}