/* ==========================================================================
   Ken Property Tools — shared design system (Design v2.1 + hybrid direction)
   This file is deliberately generic: every class here is reusable across
   ANY journey (HDB upgrade, selling, buying, affordability, project
   comparison, individual project analysis) — nothing is named after or
   shaped around HDB Upgrade specifically. HDB Upgrade is the first use
   case that exercises this system, not the system's centre.
   Plain CSS, no build step, no framework — safe to edit directly.
   ========================================================================== */

:root{
  --bg:          #FAFAF8;
  --surface:     #FFFFFF;
  --ink:         #16213E;   /* navy — headings, big figures */
  --muted:       #6B7280;   /* secondary text */
  --line:        #ECE9E1;   /* hairline dividers, never boxes */
  --gold:        #A9822F;   /* restrained accent — labels, pins, rules */
  --gold-wash:   #F4EEE1;
  --wa:          #1C7A3E;   /* WhatsApp CTA only */
  --navy-soft:   #39456B;

  --serif:   "Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:    -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw: 1080px;
  --radius: 2px; /* almost square — editorial, not app-like */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--sans); }
body{ -webkit-font-smoothing:antialiased; line-height:1.5; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.kpt-shell{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
@media (max-width:640px){ .kpt-shell{ padding:0 20px; } }

/* ---- type -------------------------------------------------------------- */
.kpt-eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin:0 0 10px;
}
.kpt-h1{ font-family:var(--serif); font-weight:400; font-size:40px; line-height:1.15; margin:0 0 14px; color:var(--ink); }
.kpt-h2{ font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.25; margin:0 0 10px; color:var(--ink); }
.kpt-lede{ font-size:17px; color:var(--muted); margin:0 0 0; max-width:46ch; }
.kpt-body{ font-size:15px; color:var(--ink); }
.kpt-muted{ color:var(--muted); }
@media (max-width:640px){
  .kpt-h1{ font-size:30px; }
  .kpt-h2{ font-size:21px; }
}

/* ---- the one recurring diagnostic figure -------------------------------- */
.kpt-figure{ font-family:var(--serif); font-weight:400; color:var(--ink); font-size:56px; line-height:1.05; letter-spacing:-.01em; }
.kpt-figure .unit{ font-size:0.4em; color:var(--muted); font-family:var(--sans); margin-left:6px; }
@media (max-width:640px){ .kpt-figure{ font-size:40px; } }

/* ---- hairline rule — replaces card borders everywhere ------------------- */
.kpt-rule{ border:none; border-top:1px solid var(--line); margin:28px 0; }
.kpt-rule--gold{ border-top:1px solid var(--gold); width:40px; margin:0 0 18px; }

/* ---- layout section used by every analysis page -------------------------
   Deliberately NOT a 5-part fixed grid: a page includes only the spine
   sections it needs, in order, separated by hairlines. Omit any section
   (most often Ken's Take, if there's no real judgement to add) rather
   than rendering an empty box. */
.kpt-section{ padding:26px 0; }
.kpt-section:first-child{ padding-top:0; }

/* ---- position gauge ------------------------------------------------------
   Generic: works for one pin (a single analysis) or several (a comparison).
   Rendered by assets/js/kpt-components.js — these are just its styles. */
.kpt-gauge{ position:relative; width:100%; }
.kpt-gauge .track{ position:relative; height:2px; background:var(--line); border-radius:1px; margin:34px 0 10px; }
.kpt-gauge .zone-label{ position:absolute; top:-22px; font-size:11px; color:var(--muted); letter-spacing:.02em; }
.kpt-gauge .tick{ position:absolute; top:-3px; width:1px; height:8px; background:var(--line); }
.kpt-gauge .pin{ position:absolute; top:-7px; width:16px; height:16px; margin-left:-8px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px rgba(0,0,0,.05); }
.kpt-gauge .pin.gold{ background:var(--gold); }
.kpt-gauge .pin.navy{ background:var(--navy-soft); }
.kpt-gauge .pin-tag{ position:absolute; top:12px; font-size:12px; font-weight:600; white-space:nowrap; }
.kpt-gauge .pin-tag.gold{ color:var(--gold); }
.kpt-gauge .pin-tag.navy{ color:var(--navy-soft); }
.kpt-gauge .scale-end{ position:absolute; top:12px; font-size:11px; color:var(--muted); }
.kpt-gauge .scale-end.right{ right:0; }

/* ---- Ken's Take — the signature editorial component ---------------------
   Only ever rendered when there is real judgement to show (enforced by
   the renderer in kpt-components.js, which no-ops on empty content). */
.kpt-take{ display:flex; gap:16px; align-items:flex-start; margin:4px 0; }
.kpt-take img{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
.kpt-take blockquote{ margin:0; font-family:var(--serif); font-size:19px; line-height:1.45; font-style:italic; color:var(--ink); }
.kpt-take .byline{ margin-top:10px; font-family:var(--sans); font-style:normal; font-size:12px; color:var(--muted); letter-spacing:.02em; }
@media (max-width:640px){ .kpt-take blockquote{ font-size:17px; } }

/* ---- progressive disclosure ---------------------------------------------
   Native <details>/<summary> — zero JS required, works everywhere,
   keeps evidence/methodology off the first screen on mobile. */
.kpt-disclosure{ border-top:1px solid var(--line); padding:14px 0; }
.kpt-disclosure summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--navy-soft); list-style:none; }
.kpt-disclosure summary::-webkit-details-marker{ display:none; }
.kpt-disclosure summary::before{ content:"+ "; color:var(--gold); }
.kpt-disclosure[open] summary::before{ content:"– "; }
.kpt-disclosure .inner{ padding-top:14px; font-size:14px; color:var(--muted); }

/* ---- inputs — plain, ledger-style, never boxed form fields --------------- */
.kpt-field{ margin:0 0 22px; }
.kpt-field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.kpt-field input, .kpt-field select{
  width:100%; border:none; border-bottom:1px solid var(--line); background:transparent;
  font-family:var(--serif); font-size:22px; color:var(--ink); padding:4px 0 8px; outline:none;
}
.kpt-field input:focus, .kpt-field select:focus{ border-bottom-color:var(--gold); }
.kpt-quickread{ font-family:var(--serif); font-style:italic; color:var(--navy-soft); font-size:15px; min-height:1.6em; margin:4px 0 0; }

/* ---- CTAs ------------------------------------------------------------- */
.kpt-cta{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  padding:13px 22px; border-radius:999px; border:1px solid var(--ink); color:var(--ink);
  background:transparent; cursor:pointer;
}
.kpt-cta:hover{ background:var(--ink); color:var(--surface); }
.kpt-cta--wa{ border-color:var(--wa); color:var(--wa); }
.kpt-cta--wa:hover{ background:var(--wa); color:#fff; }
.kpt-cta--quiet{ border:none; color:var(--navy-soft); padding:0; font-weight:600; }
.kpt-cta--quiet:hover{ background:none; color:var(--gold); text-decoration:underline; }

/* ---- homepage router cards ---------------------------------------------- */
.kpt-router{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin:36px 0; }
.kpt-router a{ background:var(--surface); padding:30px 26px; display:block; transition:background .15s; }
.kpt-router a:hover{ background:var(--gold-wash); }
.kpt-router .tag{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.kpt-router h3{ font-family:var(--serif); font-weight:400; font-size:21px; margin:0 0 8px; }
.kpt-router p{ font-size:14px; color:var(--muted); margin:0; }
@media (max-width:760px){ .kpt-router{ grid-template-columns:1fr; } }

.kpt-header{ padding:40px 0 10px; }
.kpt-header .brand{ font-size:13px; font-weight:700; letter-spacing:.04em; }
.kpt-footer{ padding:40px 0 60px; font-size:12px; color:var(--muted); }

/* ---- additions for decision pages (generic — used by any analysis) ------ */
.kpt-gauge .band{ position:absolute; top:-3px; height:8px; background:var(--gold); opacity:.35; border-radius:4px; }
.kpt-gauge .pin.outline{ background:var(--surface); border:2px solid var(--navy-soft); }
.kpt-gauge{ padding-bottom:40px; }
.kpt-gauge .pin-tag.low{ top:32px; }
.kpt-header.kpt-shell{ padding:40px 24px 10px; }
.kpt-footer.kpt-shell{ padding:40px 24px 60px; }
@media (max-width:640px){ .kpt-header.kpt-shell,.kpt-footer.kpt-shell{ padding-left:20px; padding-right:20px; } }

/* Provenance tags: what kind of statement is this? */
.kpt-tag{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px; margin-right:8px; vertical-align:1px; white-space:nowrap; }
.kpt-tag--reg{ background:#E8ECF5; color:var(--navy-soft); }
.kpt-tag--ours{ background:var(--gold-wash); color:var(--gold); }
.kpt-tag--lender{ border:1px solid var(--gold); color:var(--gold); }

/* Light text choices instead of pills */
.kpt-qlabel{ font-size:13px; color:var(--muted); margin:26px 0 2px; }
.kpt-choices{ display:flex; gap:24px; flex-wrap:wrap; margin:2px 0 6px; }
.kpt-choice{ background:none; border:none; padding:6px 0; font:inherit; font-size:15px; color:var(--muted);
  cursor:pointer; border-bottom:2px solid transparent; }
.kpt-choice[aria-pressed="true"]{ color:var(--ink); font-weight:600; border-bottom-color:var(--gold); }
.kpt-twocol{ display:grid; grid-template-columns:1fr 2fr; gap:18px; }
.kpt-error{ font-size:12px; color:var(--gold); margin-top:4px; }

.kpt-note{ font-size:13px; color:var(--muted); margin:8px 0 0; line-height:1.55; }
.kpt-callout{ border-left:2px solid var(--gold); padding:2px 0 2px 14px; margin:18px 0 6px; font-size:14px; line-height:1.55; }
.kpt-callout strong{ font-weight:600; }
.kpt-group{ margin:20px 0 6px; font-size:13px; font-weight:600; color:var(--ink); }
.kpt-list{ margin:6px 0 0; padding-left:18px; font-size:14px; color:var(--muted); line-height:1.55; }
.kpt-list li{ margin:0 0 6px; }
.kpt-disclosure .inner .kpt-group:first-child{ margin-top:0; }

/* ---- consumer-facing result hierarchy (generic) ------------------------- */
.kpt-hero-head{ font-size:17px; font-weight:600; margin:14px 0 4px; color:var(--ink); }
.kpt-hero-sub{ font-size:15px; color:var(--muted); margin:0 0 10px; max-width:56ch; line-height:1.55; }
.kpt-quiet{ font-size:12.5px; color:var(--muted); margin:8px 0 0; line-height:1.5; }
.kpt-quiet a{ color:var(--navy-soft); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.kpt-quiet a:hover{ color:var(--gold); }
.kpt-actions{ display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; margin-top:18px; }
.kpt-actions .kpt-cta--quiet{ font-size:14px; }
.kpt-small{ font-size:13px; }
.kpt-steps{ list-style:none; margin:6px 0 0; padding:0; }
.kpt-steps li{ border-top:1px solid var(--line); padding:14px 0; display:flex; flex-direction:column; gap:3px; }
.kpt-steps li strong{ font-family:var(--serif); font-weight:400; font-size:18px; }
.kpt-steps li span{ font-size:14px; color:var(--muted); }
button.kpt-cta--quiet{ background:none; font-family:inherit; cursor:pointer; text-align:left; }
#result-root .kpt-rule{ margin:6px 0; }
#result-root .kpt-section{ padding:22px 0; }

/* ---- Ken identity: a quiet byline, never a banner ----------------------- */
.kpt-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.kpt-byline{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.kpt-byline img{ width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none; }
@media (max-width:640px){ .kpt-header{ padding-top:28px; } .kpt-byline{ width:100%; } }

/* ---- market landscape / trade-offs / shortlist (generic) ------------------ */
.kpt-testflag{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px dashed var(--gold); padding:6px 10px; margin:0 0 18px; display:inline-block; }
.kpt-land{ margin:14px 0 6px; }
.kpt-land .lead{ font-size:12px; font-weight:600; color:var(--gold); margin:0 0 6px; }
.kpt-land .row{ display:grid; grid-template-columns:250px 1fr; gap:14px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
.kpt-land .name{ font-size:13px; line-height:1.35; }
.kpt-land .name small{ display:block; color:var(--muted); font-size:12px; margin-top:1px; }
.kpt-land .lane{ position:relative; height:34px; }
.kpt-land .bar{ position:absolute; top:15px; height:8px; border-radius:4px; background:#C9CFE0; }
.kpt-land .bar.well{ background:var(--navy-soft); }
.kpt-land .bar.part{ background:#7B86AC; }
.kpt-land .bar.near, .kpt-land .bar.unusual{ background:transparent; border:1px solid #9AA3C0; }
.kpt-land .bar.unusual{ opacity:.6; }
.kpt-land .verdict{ position:absolute; top:-2px; font-size:11.5px; font-weight:600; white-space:nowrap; color:var(--muted); }
.kpt-land .verdict.well, .kpt-land .verdict.part{ color:var(--navy-soft); }
.kpt-land .you{ position:absolute; top:6px; bottom:-6px; border-left:2px solid var(--gold); }
.kpt-land .you.range{ border-left:none; background:var(--gold); opacity:.22; border-radius:2px; }
.kpt-land .axis{ display:grid; grid-template-columns:250px 1fr; gap:14px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); padding-top:6px; }
.kpt-land .axis .ticks{ position:relative; height:16px; }
.kpt-land .axis i{ position:absolute; font-style:normal; transform:translateX(-50%); }
.kpt-pair{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); padding:16px 0; }
.kpt-pair h4{ grid-column:1/-1; margin:0 0 10px; font-family:var(--serif); font-weight:400; font-size:18px; }
.kpt-pair .side{ padding-right:18px; }
.kpt-pair .side + .side{ padding-left:18px; padding-right:0; border-left:1px solid var(--line); }
.kpt-pair .side b{ display:block; font-size:13px; color:var(--navy-soft); margin-bottom:3px; }
.kpt-pair .side span{ font-size:14px; color:var(--muted); line-height:1.5; }
.kpt-slots{ border-top:1px solid var(--line); margin-top:12px; }
.kpt-slot{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.kpt-slot .role{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); padding-top:5px; }
.kpt-slot .pname{ font-family:var(--serif); font-size:19px; color:var(--ink); }
.kpt-slot .meta{ font-size:13px; color:var(--muted); margin:2px 0 6px; }
.kpt-slot .why{ font-size:14px; line-height:1.5; }
.kpt-slot .cost{ font-size:13px; color:var(--muted); margin-top:4px; }
.kpt-kenrow{ display:flex; gap:14px; align-items:center; margin:6px 0 4px; }
.kpt-kenrow img{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none; }
@media (max-width:640px){
  .kpt-land .row{ grid-template-columns:1fr; gap:2px; padding:12px 0; }
  .kpt-land .axis{ grid-template-columns:1fr; }
  .kpt-land .axis > div:first-child{ display:none; }
  .kpt-pair{ grid-template-columns:1fr; }
  .kpt-pair .side + .side{ padding-left:0; border-left:none; margin-top:12px; }
  .kpt-slot{ grid-template-columns:1fr; gap:4px; }
}

.kpt-land .name .v{ display:block; font-weight:600; font-size:12.5px; color:var(--muted); margin-top:1px; }
.kpt-land .name .v.well, .kpt-land .name .v.part{ color:var(--navy-soft); }
.kpt-land .lane{ height:28px; }
.kpt-land .bar{ top:10px; }
.kpt-land .you{ top:2px; bottom:-2px; }
.kpt-land .more{ position:absolute; right:0; top:4px; font-size:12px; color:var(--muted); }
@media (max-width:640px){ .kpt-land .lane{ height:22px; } .kpt-land .bar{ top:7px; } }

/* ---- WhatsApp CTA: a generic chat icon (no logo, no image asset, no dependency) ---- */
.kpt-cta--wa::before, .kpj .kpj-btn--wa::before{
  content:""; width:18px; height:18px; flex:none; margin-right:2px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-7.2L7 21.8c-.6.5-1.5.1-1.5-.7V18H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-7.2L7 21.8c-.6.5-1.5.1-1.5-.7V18H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.kpj .kpj-btn--wa{ gap:8px; }

/* ---- V10.2 identity: quiet "by Ken Tan" under the brand, and the personal footer ---- */
.kpt-brandblock{ display:flex; flex-direction:column; gap:3px; }
.kpt-by{ font-size:11.5px; line-height:1.2; letter-spacing:0; font-weight:400; color:var(--muted); opacity:.85; }
.kpt-footer .kpt-f-name{ margin:0 0 4px; font-size:15px; font-weight:600; color:var(--ink); }
.kpt-footer .kpt-f-line{ margin:2px 0; font-size:13.5px; line-height:1.5; color:var(--muted); }
.kpt-footer .kpt-f-line a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.kpt-footer .kpt-f-reg{ margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--muted); opacity:.85; }
.kpt-footer .kpt-f-dis{ margin:6px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted); opacity:.75; }
.kpt-footer .kpt-f-dis a{ color:inherit; }