/* =====================================================================================================================
   PaySalaryLoan - legal & help pages (site-legal.css)

   Loaded after psl-site.css by: terms-and-conditions(.html|/), privacy-policy/, grievance-redressal/, fair-practices-code/,
   lending-partners/, faq/, contact-us/ and 404.html. Uses the --psl-* tokens only; classes are prefixed .lg-.

   - .lg-layout   long-form document: sticky "On this page" + policy links on desktop, chip row on phones (no script)
   - .lg-doc      readable prose (measure, rhythm, lists, tables, key/value table)
   - .lg-ladder   numbered escalation ladder (grievance matrix)
   - .lg-help     navy contact block under each document
   - .lg-search / .lg-topics   FAQ search box and topic list (the FAQ itself is .pl-faq from psl-site.css)
   - .lg-form     contact form fields (behaviour: assets/apply.js toggles .error.show and aria-invalid)
   - .lg-404      not-found hero and popular-page link groups
===================================================================================================================== */

/* ---------------------------------------------------------------- hero meta line + draft placeholders */
.lg-meta { margin: 0; font-size: .86rem; color: var(--psl-ink-3); }
.ph-light { padding: 0 5px; border-radius: 4px; color: var(--psl-amber); background: var(--psl-amber-50); }

/* ---------------------------------------------------------------- document layout */
.lg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.lg-side { display: contents; }               /* phones: the two navs become grid items placed around the document */
.lg-toc { order: 1; min-width: 0; }
.lg-doc { order: 2; min-width: 0; }
.lg-help { order: 3; }
.lg-related { order: 4; }
.lg-label { margin: 0 0 8px; font-size: var(--psl-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--psl-mint-600); }
.lg-toc ol, .lg-related ul { margin: 0; padding: 0; list-style: none; }

/* phones / tablets: "On this page" is a row of chips that scrolls inside itself */
.lg-toc ol { display: flex; gap: 8px; margin: 0 calc(-1 * var(--psl-gutter)); padding: 2px var(--psl-gutter) 8px; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.lg-toc li { flex: none; scroll-snap-align: start; }
.lg-toc a { display: inline-block; padding: 7px 12px; border-radius: var(--psl-pill); font-size: .84rem; font-weight: 600; white-space: nowrap;
    color: var(--psl-navy-800); background: #fff; border: 1px solid var(--psl-blue-200); text-decoration: none; }
.lg-toc a:hover { color: #fff; background: var(--psl-navy-800); border-color: var(--psl-navy-800); }

.lg-related { padding: 18px; border-radius: var(--psl-radius); background: var(--psl-blue-50); border: 1px solid var(--psl-line); }
.lg-related li + li { border-top: 1px solid var(--psl-line); }
.lg-related a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px; font-size: .92rem; font-weight: 600;
    color: var(--psl-ink); text-decoration: none; }
.lg-related a::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--psl-ink-3); border-top: 2px solid var(--psl-ink-3); transform: rotate(45deg); }
.lg-related a:hover { color: var(--psl-blue); }
.lg-related a[aria-current="page"] { color: var(--psl-blue); }
.lg-related a[aria-current="page"]::after { border-color: var(--psl-mint); }

/* ---------------------------------------------------------------- long-form prose */
.lg-doc { max-width: 72ch; font-size: 1rem; line-height: 1.75; color: var(--psl-ink-2); }
.lg-doc > p:first-child { font-size: 1.06rem; color: var(--psl-ink); }
.lg-doc h2 { position: relative; margin: 2.2em 0 .6em; padding-top: 1.1em; font-family: var(--psl-font-display); font-size: 1.22rem; font-weight: 800;
    line-height: 1.3; color: var(--psl-navy-900); border-top: 1px solid var(--psl-line); scroll-margin-top: calc(var(--psl-header-h) + 16px); }
.lg-doc h2::before { content: ""; position: absolute; top: -2px; left: 0; width: 36px; height: 3px; border-radius: 3px; background: var(--psl-grad-bar); }
.lg-doc p { margin: 0 0 1em; }
.lg-doc a { font-weight: 600; color: var(--psl-blue); text-underline-offset: 3px; }
.lg-doc ul { display: grid; gap: 8px; margin: 0 0 1.2em; padding: 0; list-style: none; }
.lg-doc ul li { position: relative; padding-left: 26px; }
.lg-doc ul li::before { content: ""; position: absolute; top: .62em; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--psl-mint); }
.lg-doc .pl-table-wrap { margin: 0 0 1.4em; }
.lg-doc .pl-table { line-height: 1.5; }

/* key / value table (lender details): label column on the left, stacked on phones */
.lg-kv { width: 100%; margin: 0 0 1.4em; border-collapse: collapse; font-size: .93rem; line-height: 1.5; border-radius: var(--psl-radius);
    overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--psl-line); }
.lg-kv th, .lg-kv td { display: block; padding: 0 16px; text-align: left; vertical-align: top; }
.lg-kv th { padding-top: 12px; font-size: .8rem; font-weight: 700; color: var(--psl-ink-3); }
.lg-kv td { padding-bottom: 12px; font-weight: 600; color: var(--psl-ink); overflow-wrap: anywhere; }
.lg-kv tr + tr { border-top: 1px solid var(--psl-line); }
.lg-kv tr:nth-child(odd) { background: var(--psl-blue-50); }

/* ---------------------------------------------------------------- escalation ladder (CSS counter: the level text stays in the HTML) */
.lg-ladder { position: relative; display: grid; gap: 14px; margin: 0 0 1.6em; padding: 0; list-style: none; counter-reset: lg-level; }
.lg-ladder::before { content: ""; position: absolute; top: 22px; bottom: 22px; left: 19px; width: 2px; background: linear-gradient(var(--psl-blue), var(--psl-mint)); }
.lg-ladder li { position: relative; padding: 14px 16px 14px 18px; margin-left: 56px; border-radius: var(--psl-radius); background: #fff;
    border: 1px solid var(--psl-line); counter-increment: lg-level; }
.lg-ladder li::before { content: counter(lg-level); position: absolute; top: 12px; left: -56px; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 50%; font-weight: 800; color: #fff; background: var(--psl-navy-800); box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--psl-blue-200); }
.lg-ladder li:last-child::before { background: var(--psl-mint-600); }
.lg-ladder b { display: block; margin-bottom: 4px; font-family: var(--psl-font-display); font-size: 1rem; color: var(--psl-ink); }
.lg-ladder li > span { display: block; font-size: .93rem; line-height: 1.6; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- contact block under a document */
.lg-help { display: grid; gap: 16px; max-width: 72ch; padding: 22px 20px; border-radius: var(--psl-radius-lg); color: #dbe6ff; background: var(--psl-grad-navy); }
.lg-help h2 { margin: 0 0 4px; font-family: var(--psl-font-display); font-size: 1.15rem; font-weight: 800; color: #fff; }
.lg-help p { margin: 0; font-size: .92rem; }
.lg-help ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lg-help li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--psl-radius-sm); background: rgba(255, 255, 255, .07); }
.lg-help li > svg { flex: none; margin-top: 2px; color: var(--psl-mint-on-navy); }
.lg-help li b { display: block; font-size: .92rem; color: #fff; }
.lg-help li span { display: block; font-size: .88rem; overflow-wrap: anywhere; }
.lg-help a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.lg-help a:hover { color: var(--psl-mint-on-navy); }

/* ---------------------------------------------------------------- FAQ page */
.lg-search { position: relative; max-width: 560px; margin-top: 18px; }
.lg-search svg { position: absolute; top: 50%; left: 16px; color: var(--psl-ink-3); transform: translateY(-50%); pointer-events: none; }
.lg-search input { width: 100%; height: 54px; padding: 0 16px 0 46px; border-radius: var(--psl-radius-sm); border: 1.5px solid #c3cbdc; background: #fff;
    font: inherit; font-size: 1rem; color: var(--psl-ink); transition: border-color .15s, box-shadow .15s; }
.lg-search input::placeholder { color: #7a849a; }
.lg-search input:focus { outline: 0; border-color: var(--psl-blue); box-shadow: 0 0 0 4px rgba(15, 98, 254, .15); }
.lg-topics { min-width: 0; }
.lg-topics__list { display: flex; gap: 8px; margin: 0 calc(-1 * var(--psl-gutter)); padding: 2px var(--psl-gutter) 8px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.lg-topics__list a { display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--psl-pill); font-size: .88rem;
    font-weight: 600; white-space: nowrap; color: var(--psl-navy-800); background: #fff; border: 1px solid var(--psl-blue-200); text-decoration: none; }
.lg-topics__list a:hover { border-color: var(--psl-blue); }
.lg-topics__list small { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--psl-pill); font-size: .74rem;
    font-weight: 700; color: var(--psl-blue); background: var(--psl-blue-100); }
.lg-groups { display: grid; gap: 32px; min-width: 0; }
.lg-group h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--psl-font-display); font-size: 1.2rem; font-weight: 800;
    color: var(--psl-navy-900); scroll-margin-top: calc(var(--psl-header-h) + 16px); }
.lg-group h2::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--psl-mint); }
.lg-group { scroll-margin-top: calc(var(--psl-header-h) + 16px); }
.lg-empty { margin: 0; padding: 18px; border-radius: var(--psl-radius); text-align: center; color: var(--psl-ink-2); background: var(--psl-blue-50); }

/* ---------------------------------------------------------------- contact page */
.lg-contact .pl-features > li { display: flex; flex-direction: column; align-items: flex-start; }
.lg-contact .pl-features p { margin-bottom: 10px; }
.lg-contact__links { display: grid; gap: 4px; margin: 0 0 6px; }
.lg-contact__links a { font-size: .88rem; font-weight: 700; color: var(--psl-navy-800); overflow-wrap: anywhere; text-underline-offset: 3px; }
.lg-contact__links a:hover { color: var(--psl-blue); }
.lg-contact small { font-size: .8rem; color: var(--psl-ink-3); }

.lg-form h2 { margin: 0 0 4px; font-family: var(--psl-font-display); font-size: 1.35rem; font-weight: 800; color: var(--psl-navy-900); }
.lg-form__sub { margin: 0 0 18px; font-size: .92rem; color: var(--psl-ink-3); }
.lg-field { margin-bottom: 14px; min-width: 0; }
.lg-field label { display: block; margin-bottom: 6px; font-size: .88rem; font-weight: 600; color: var(--psl-ink-2); }
.lg-field input, .lg-field select, .lg-field textarea { display: block; width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--psl-radius-sm);
    border: 1.5px solid #c3cbdc; background: #fff; font: inherit; font-size: 1rem; color: var(--psl-ink); transition: border-color .15s, box-shadow .15s; }
.lg-field textarea { min-height: 112px; resize: vertical; }
.lg-field input:focus, .lg-field select:focus, .lg-field textarea:focus { outline: 0; border-color: var(--psl-blue); box-shadow: 0 0 0 4px rgba(15, 98, 254, .15); }
.lg-field .pl-phone input { min-height: 0; height: 50px; border: 0; border-radius: 0; box-shadow: none; }
.lg-field [aria-invalid="true"], .lg-field .pl-phone:has([aria-invalid="true"]) { border-color: var(--psl-red); }
.lg-field .pl-phone [aria-invalid="true"] { border: 0; }
.lg-field .error { display: none; margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--psl-red); }
.lg-field .error.show { display: block; }
.lg-field-row { display: grid; gap: 0 14px; }
.lg-note { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 16px; padding: 10px 12px; border-radius: var(--psl-radius-sm); font-size: .85rem;
    color: var(--psl-ink-2); background: var(--psl-amber-50); }
.lg-note svg { margin-top: 2px; color: var(--psl-amber); }
.lg-success { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: var(--psl-radius-sm); font-weight: 600;
    color: var(--psl-mint-600); background: var(--psl-mint-50); }
.lg-form button[disabled] { opacity: .6; cursor: default; }
.lg-fail { margin-top: 14px; padding: 12px 14px; border-radius: var(--psl-radius-sm); font-weight: 600; color: var(--psl-red); background: #fdecec; }
.lg-success[hidden], .lg-fail[hidden] { display: none; }
.lg-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lg-optional { font-weight: 400; color: var(--psl-ink-3, #5b6478); }
.lg-check { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: start; }
.lg-field.lg-check input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--psl-blue); }
.lg-field.lg-check label { display: flex; align-items: center; min-height: 40px; margin: 0; font-weight: 500; }   /* 40px tap target */
.lg-check .error { grid-column: 2; }
.lg-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .02em; }

/* ---------------------------------------------------------------- 404 */
.lg-404 { text-align: center; }
.lg-404 .pl-lead { margin-left: auto; margin-right: auto; }
.lg-404 .pl-btns { justify-content: center; }
.lg-404__code { display: inline-block; margin-bottom: 8px; font-family: var(--psl-font-display); font-size: 4.5rem; font-weight: 800; line-height: 1;
    letter-spacing: -.04em; color: var(--psl-blue); background: var(--psl-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lg-links { display: grid; gap: 14px; }
.lg-links h3 { margin: 0 0 10px; font-family: var(--psl-font-display); font-size: 1rem; font-weight: 700; color: var(--psl-ink); }
.lg-links ul { margin: 0; padding: 0; list-style: none; }
.lg-links li + li { margin-top: 6px; }
.lg-links a { font-size: .92rem; font-weight: 600; color: var(--psl-navy-800); text-decoration: none; }
.lg-links a:hover { color: var(--psl-blue); text-decoration: underline; }
.lg-links .cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.lg-links .cols-2 li + li { margin-top: 0; }

/* ---------------------------------------------------------------- breakpoints */
@media (min-width: 576px) {
    .lg-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-help { padding: 26px 28px; }
    .lg-help ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg-kv th, .lg-kv td { display: table-cell; padding: 12px 16px; }
    .lg-kv th { width: 36%; font-size: .86rem; }
    .lg-404__code { font-size: 6rem; }
}
@media (min-width: 768px) {
    .lg-doc { font-size: 1.04rem; }
    .lg-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* FAQ: the topics sit in the 280px column of .pl-faq-wrap */
    .lg-topics { position: sticky; top: calc(var(--psl-header-h) + 20px); }
    .lg-topics__list { display: grid; gap: 4px; margin: 0; padding: 0; overflow: visible; }
    .lg-topics__list a { justify-content: space-between; padding: 10px 14px; border-radius: var(--psl-radius-sm); border-color: transparent; background: transparent; }
    .lg-topics__list a:hover { background: var(--psl-blue-50); border-color: var(--psl-blue-200); }
}
@media (min-width: 992px) {
    .lg-layout { grid-template-columns: 260px minmax(0, 1fr); column-gap: 56px; row-gap: 32px; align-items: start; }
    .lg-side { display: grid; gap: 20px; grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--psl-header-h) + 24px);
        max-height: calc(100vh - var(--psl-header-h) - 48px); overflow-y: auto; }
    .lg-doc, .lg-help { grid-column: 2; }
    .lg-doc { grid-row: 1; }
    .lg-help { grid-row: 2; }
    .lg-toc ol { display: grid; gap: 2px; margin: 0; padding: 0 0 0 2px; overflow: visible; border-left: 2px solid var(--psl-line); }
    .lg-toc a { display: block; padding: 6px 12px; margin-left: -2px; border: 0; border-left: 2px solid transparent; border-radius: 0; font-size: .86rem;
        font-weight: 500; line-height: 1.4; white-space: normal; color: var(--psl-ink-2); background: none; }
    .lg-toc a:hover { color: var(--psl-blue); background: none; border-left-color: var(--psl-blue); }
}

/* responsive audit: 14 px minimum text on phones */
@media (max-width: 767.98px) {
    .lg-meta, .lg-meta .ph-light, .lg-toc a, .lg-kv th, .lg-topics__list small, .lg-contact small, .lg-field .error, .lg-note, .lg-note span, .lg-label { font-size: .875rem; }
}
/* responsive audit: 40 px tap targets in the "On this page" / related lists */
.lg-toc a, .lg-related a, .lg-topics__list a, .lg-contact__links a { min-height: 40px; }
.lg-toc a { display: inline-flex; align-items: center; }
@media (min-width: 992px) { .lg-toc a { display: flex; } }