/* ═══════════════════════════════════════════════════════════════════════════
   ki_auth.css — the sign-in pages and the policy documents (Session 58).

   Owns the `ka-` namespace. Linked from the page's {% block head_last %}, which
   base.html emits BEFORE ki.css — so nothing here may rely on arriving later
   than ki.css. Every rule either names a `ka-` class (nobody else declares one)
   or is prefixed `body.ki` to clear an equal-specificity ki.css rule.

   Pages: /login, /register, /forgot-password, /reset-password/<t>, /terms,
   /privacy, /refund, /child-safety, /legal/reaccept.

   ⚑ auth.css is NO LONGER LOADED by the four auth pages, and the `kp-auth` /
   `legal-page` wrappers are gone with it. That matters beyond tidiness:
   polish.css paints `body:has(.kp-auth)` and `body:has(.legal-page)` on the
   Session 44 charcoal ground, so keeping either class would have dragged the old
   dark page back underneath the new design.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE AUTH BODY: a form panel and a ruled information column ───────── */
body.ki .ka-body { padding: 48px 0 64px; }
.ka-grid {
  display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 0 56px; align-items: start;
}
.ka-info { border-left: 1px solid var(--ki-rule-2); padding-left: 40px; }
@media (max-width: 900px) {
  .ka-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ka-info { border-left: 0; padding-left: 0; border-top: 1px solid var(--ki-rule-2); padding-top: 28px; }
}
@media (max-width: 600px) { body.ki .ka-body { padding: 28px 0 44px; } }

body.ki .ka-form.ki-panel { padding: 28px 28px 26px; }
@media (max-width: 600px) { body.ki .ka-form.ki-panel { padding: 22px 18px; } }
.ka-form__title { margin: 0 0 6px; }
.ka-form__sub { margin: 0 0 22px; }
.ka-form form { margin: 0; }
.ka-labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ka-labelrow .ki-label { margin-bottom: 6px; }
.ka-labelrow a { font: 600 15px/1.4 var(--ki-sans); }

/* Password + its Show/Hide control. The button sits inside the field's right
   edge; the input reserves the room so typed text never runs under it. */
.ka-pw { position: relative; }
body.ki .ka-pw .ki-input { padding-right: 84px; }
.ka-reveal {
  position: absolute; top: 3px; right: 3px; bottom: 3px; min-width: 70px;
  padding: 0 12px; border: 0; border-left: 1px solid var(--ki-rule);
  background: var(--ki-blue-50); color: var(--ki-blue-dk);
  font: 700 14px/1 var(--ki-sans); cursor: pointer; border-radius: 0;
}
.ka-reveal:hover { background: var(--ki-blue-100); }
.ka-reveal:focus-visible { outline: 3px solid var(--ki-ochre); outline-offset: 1px; }

.ka-consent {
  border: 1px solid var(--ki-rule); background: var(--ki-ivory);
  padding: 14px 16px; margin: 4px 0 20px;
}
body.ki .ka-consent .ki-check { cursor: pointer; }
.ka-consent strong { color: var(--ki-ink); }

.ka-alt { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ki-rule); font: 400 15.5px/1.5 var(--ki-sans); color: var(--ki-ink-2); }

/* The information column: a heading, then rows between hairlines. */
.ka-info__h { margin: 0 0 12px; }
.ka-info__block + .ka-info__block { margin-top: 34px; }
.ka-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ki-ink); }
.ka-list > li { padding: 14px 0; border-bottom: 1px solid var(--ki-rule); font: 400 16px/1.55 var(--ki-sans); color: var(--ki-ink-2); }
.ka-list > li > b { display: block; font: 700 16px/1.4 var(--ki-serif); color: var(--ki-ink); margin-bottom: 4px; }
.ka-list p { margin: 0; }

/* Numbered steps: a serif numeral in the left gutter, the step beside it. */
.ka-steps { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ki-ink); counter-reset: ka-step; }
.ka-steps > li {
  counter-increment: ka-step; display: grid; grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 12px; padding: 14px 0; border-bottom: 1px solid var(--ki-rule);
  font: 400 16px/1.55 var(--ki-sans); color: var(--ki-ink-2);
}
.ka-steps > li::before { content: counter(ka-step); font: 700 24px/1.1 var(--ki-serif); color: var(--ki-ochre-ink); }
.ka-steps > li > div > b { display: block; font: 700 16px/1.4 var(--ki-serif); color: var(--ki-ink); margin-bottom: 2px; }

/* The live bank sample on /login, kept from the previous panel. */
.ka-sample__tag { font: 700 12.5px/1.3 var(--ki-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ki-ink-3); margin: 0 0 8px; }
.ka-sample__stem { font: 400 16px/1.55 var(--ki-sans); color: var(--ki-ink); margin: 0 0 12px; }
.ka-sample dl { margin: 0; border-top: 1px solid var(--ki-rule); }
.ka-sample dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--ki-rule); }
.ka-sample dt { font: 700 14px/1.45 var(--ki-sans); color: var(--ki-ink-3); }
.ka-sample dd { margin: 0; font: 400 15px/1.5 var(--ki-sans); color: var(--ki-ink-2); }
@media (max-width: 420px) { .ka-sample dl > div { grid-template-columns: 1fr; } }
.ka-quote { margin: 14px 0 0; padding-left: 16px; border-left: 3px solid var(--ki-ochre); font: italic 400 16px/1.55 var(--ki-serif); color: var(--ki-ink); }

/* ── 2. THE POLICY DOCUMENTS ────────────────────────────────────────────── */
body.ki .ka-legal { padding: 44px 0 64px; }
@media (max-width: 600px) { body.ki .ka-legal { padding: 28px 0 44px; } }
.ka-legal__doc { max-width: var(--ki-w-text); min-width: 0; }
.ka-legal__meta { margin-top: 12px; color: var(--ki-on-navy-2); font: 400 15px/1.5 var(--ki-sans); }

/* Contents: sticky on a wide screen; a disclosure above the document on a narrow
   one, so fourteen links do not stand between a phone and clause 1. */
.ka-toc summary { list-style: none; cursor: default; }
.ka-toc summary::-webkit-details-marker { display: none; }
.ka-toc .ki-toc a { font-size: 14.5px; padding: 8px 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); }
.ka-toc .ki-toc a .ka-toc__n { color: var(--ki-ochre-ink); font-weight: 700; }
.ka-toc .ki-toc a.is-here { color: var(--ki-blue); box-shadow: inset 3px 0 0 var(--ki-blue); padding-left: 10px; grid-template-columns: 30px minmax(0, 1fr); }
@media (min-width: 981px) {
  .ka-toc .ki-aside, body.ki .ka-legal .ki-aside { max-height: calc(100vh - 48px); overflow-y: auto; }
}
@media (max-width: 980px) {
  .ka-toc { border-top: 3px solid var(--ki-blue); border-bottom: 1px solid var(--ki-rule); }
  .ka-toc .ki-toc { border-top: 0; padding-top: 0; }
  .ka-toc summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
  .ka-toc summary::after { content: '+'; font: 400 24px/1 var(--ki-sans); color: var(--ki-blue); }
  .ka-toc[open] summary::after { content: '\2212'; }
  .ka-toc summary:focus-visible { outline: 3px solid var(--ki-ochre); outline-offset: 2px; }
}

/* The document: a policy, not a web page. Each numbered section opens on a
   hairline with its number in ochre ink. */
body.ki .ka-legal .legal-body h2 {
  font: 700 22px/1.32 var(--ki-serif); color: var(--ki-ink);
  margin: 40px 0 14px; padding-top: 22px; border-top: 1px solid var(--ki-rule-2);
  scroll-margin-top: 20px;
}
body.ki .ka-legal .legal-body h3 { font: 700 18px/1.35 var(--ki-serif); color: var(--ki-ink); margin: 26px 0 8px; scroll-margin-top: 20px; }
body.ki .ka-legal .legal-body p, body.ki .ka-legal .legal-body li { color: var(--ki-ink); }
body.ki .ka-legal .legal-body strong { color: var(--ki-ink); }
body.ki .ka-legal .legal-body ul li { margin: 8px 0; }
/* Sections the document does not number itself are numbered here, by counter,
   so no word of the body changes. Set by the TOC script (`ka-count`). */
.ka-count { counter-reset: ka-sec; }
.ka-count > h2 { counter-increment: ka-sec; }
.ka-count > h2::before { content: counter(ka-sec) ". "; color: var(--ki-ochre-ink); }
body.ki .ka-legal .legal-body .ka-num { color: var(--ki-ochre-ink); }

/* Other policies, at the foot of the document. */
.ka-policies { margin-top: 48px; border-top: 3px double var(--ki-ink); padding-top: 16px; }
body.ki .ka-policies ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
body.ki .ka-policies li { margin: 0; }
body.ki .ka-policies .ki-h4 { margin: 0; }
.ka-policies a { display: inline-flex; align-items: center; min-height: 36px; font: 600 15.5px/1.3 var(--ki-sans); color: var(--ki-blue); }
.ka-policies a[aria-current] { color: var(--ki-ink); text-decoration: none; }

/* ── 3. RE-ACCEPTANCE (signed in) ───────────────────────────────────────── */
.ka-scroll {
  max-height: 440px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--ki-rule-2); background: var(--ki-stone); padding: 20px 22px;
}
.ka-scroll:focus-visible { outline: 3px solid var(--ki-ochre); outline-offset: 2px; }
.ka-scroll .legal-body { font: 400 15px/1.65 var(--ki-sans); color: var(--ki-ink); }
.ka-scroll .legal-body h2 { font: 700 17px/1.35 var(--ki-serif); margin: 22px 0 8px; color: var(--ki-ink); }
.ka-scroll .legal-body h3 { font: 700 15px/1.35 var(--ki-serif); margin: 16px 0 6px; }
.ka-scroll .legal-body p, .ka-scroll .legal-body li { color: var(--ki-ink); }
.ka-scroll hr { border: 0; border-top: 3px double var(--ki-ink); margin: 32px 0; }
body.ki #reaccept-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── 4. PAGE-HEAD REPAIRS (shared defects, fixed here for these pages only) ──
   ⚑ `.ki-pagehead .ki-h1 { color: #fff }` (ki.css, 0,2,0) LOSES to style.css's
   `body.theme-parent h1` (0,1,2): measured, the h1 painted near-black on navy.
   The crumbs on navy also inherit `.ki-crumbs`' ink-3 grey, ~2.6:1 there. Both
   belong in ki.css; reported rather than edited, per the Session 58 brief. */
body.ki .ki-pagehead h1.ki-h1 { color: #fff; }
body.ki .ki-pagehead .ki-crumbs,
body.ki .ki-pagehead .ki-crumbs a { color: var(--ki-on-navy-2); }

/* Session 58 rhythm floor (audit_spacing.py): 12px inside a control, 8px between blocks. */
body.ki .ka-toc summary { padding-left: 12px; padding-right: 12px; }
body.ki .ka-reveal { padding-top: 12px; padding-bottom: 12px; }
@media (min-width: 981px) { body.ki .ka-toc summary { padding-left: 0; } }
body.ki .ka-reveal { top: 0; bottom: 0; right: 0; }
body.ki .ka-info b { display: block; margin-bottom: 8px; }
body.ki .ka-info dt { margin-bottom: 8px; }
body.ki .ka-info .ka-info__h + p.ki-small, body.ki .ka-info .ka-info__h + p { margin-top: 8px; }
/* two legacy warm inks that reached these pages (scratch_s44/audit_states.py, Session 58):
   style.css's bare `p { color: var(--ink-soft) }` and the legal sheet's --k-ink. */
body.ki .ka-info p { color: var(--ki-ink-2); }
body.ki .legal-body th, body.ki .legal-body .legal-filled { color: var(--ki-ink); }

/* ── 5. SESSION 59 — THE DOCUMENT ON THE PUBLIC BLUE ───────────────────────
   Dense policy text on #1A1F2E: the document is set on a raised sheet one step
   above the ground (--ki-panel, the landing's own card tint) with a hairline
   edge and a light-blue top rule, at the 720px measure, in warm-white ink. The
   sheet is what makes a 13,000-character read comfortable: it separates the
   text column from the contents rail and the page around it without a white
   island. Colour comes from tokens only; the safety devices are restyled in
   legal/_legal_doc_styles.html and only their specificity is defended here. */
body.ki .ka-legal .ka-legal__doc {
  background: var(--ki-panel); border: 1px solid var(--ki-rule);
  border-top: 3px solid var(--ki-blue);
  padding: 36px 48px 40px; box-sizing: border-box;
  max-width: calc(var(--ki-w-text) + 96px);
}
@media (max-width: 600px) { body.ki .ka-legal .ka-legal__doc { padding: 24px 18px 28px; } }
body.ki .ka-legal .legal-body p, body.ki .ka-legal .legal-body li { line-height: 1.7; }
/* the first heading of the sheet does not need a rule above it */
body.ki .ka-legal .ka-legal__doc > .legal-version + h2,
body.ki .ka-legal .ka-legal__doc > h2:first-child { border-top: 0; padding-top: 0; }
/* ⚑ the three document-wide ink rules above ((0,3,2)/(0,3,1)) would repaint the
   amber label, the green kids' headings and the table head. Defended here. */
body.ki .ka-legal .legal-body .legal-review-note strong,
body.ki .ka-legal .legal-body .legal-review-note b { color: #F2CF7E; }
body.ki .ka-legal .legal-body .legal-review-note { color: var(--ki-ink); }
body.ki .ka-legal .legal-body .legal-kids h2,
body.ki .ka-legal .legal-body .legal-kids h3 { color: #BFEFCC; }
body.ki .ka-legal .legal-body .legal-kids h2 { border-top: 0; padding-top: 0; margin-top: 0; }
body.ki .ka-legal .legal-body .legal-table th { color: var(--ki-head); }
body.ki .ka-legal .legal-body .legal-tbd { color: #FFD3C9; }
/* the page-head placeholder (ABN) sits on navy, outside the document */
body.ki .ka-legal__meta .legal-tbd { color: #FFD3C9; }
.ka-policies a[aria-current] { color: var(--ki-head); }
.ka-policies { border-top-color: var(--ki-rule-2); }

/* Session 63 — the signup consent block. Consecutive notice paragraphs need the 8px rhythm,
   and a <legend> sits ON the fieldset border unless floated into the padding box. */
.ka-consent .ki-small + .ki-small { margin-top: 8px; }
fieldset.ka-consent > legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; }
fieldset.ka-consent > legend + * { clear: both; }