/* ──────────────────────────────────────────────────────────────────────────
   reader.css — the "answer-first" reading layer for AEDO blog articles.

   Design intent, from first principles:
     1. The reader arrived with ONE question. Answer it on screen one.
     2. The calculator is the thing an AI Overview cannot copy. Lead with it.
     3. Keep the reader's own number visible while they read the explanation,
        so every paragraph is read in the context of their figure.
     4. Replace blind scrolling with deliberate jumping.
     5. Reveal depth on demand instead of paying for it in scroll height.

   This file styles markup created at runtime by reader.js. The underlying
   article HTML is never changed, so search engines still see the full linear
   document and JSON-LD.
   ────────────────────────────────────────────────────────────────────────── */

.rdr :where(.rdr-hide){display:none!important;}

/* ── 1. Section navigator ────────────────────────────────────────────────── */
.rdr-nav{
  position:sticky;top:0;z-index:60;
  margin:0 0 18px;padding:10px 0 9px;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid #e6ecf4;
}
.rdr-nav-scroll{
  display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:2px;
}
.rdr-nav-scroll::-webkit-scrollbar{display:none;}
.rdr-chip{
  flex:0 0 auto;border:1px solid #dbe4ef;background:#fff;color:#3d5878;
  font:600 12.5px/1 inherit;letter-spacing:.01em;
  padding:9px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.rdr-chip:hover{background:#f2f7fd;border-color:#bcd2ea;color:#1c3a5e;}
.rdr-chip[aria-current="true"]{background:#1366d6;border-color:#1366d6;color:#fff;}
.rdr-progress{height:2px;background:#1366d6;width:0;
  position:absolute;left:0;bottom:-1px;transition:width .12s linear;border-radius:0 2px 2px 0;}

/* ── 2. Answer card — the first screen ───────────────────────────────────── */
.rdr-answer{
  border:1px solid #dfe8f3;border-radius:16px;background:#fff;
  box-shadow:0 1px 2px rgba(16,38,66,.05),0 10px 28px -18px rgba(16,38,66,.35);
  padding:20px 22px 18px;margin:0 0 22px;
}
.rdr-answer-k{
  font:700 11px/1 inherit;letter-spacing:.09em;text-transform:uppercase;
  color:#c2410c;margin:0 0 9px;
}
.rdr-answer-a{font-size:16.5px;line-height:1.6;color:#0c1a2a;margin:0;font-weight:600;}
.rdr-answer-a strong{color:#0a4fa8;}
.rdr-answer-cta{
  display:flex;flex-wrap:wrap;gap:9px;margin-top:15px;padding-top:14px;
  border-top:1px dashed #e3e9f2;
}
.rdr-btn{
  border:0;cursor:pointer;font:700 13.5px/1 inherit;border-radius:10px;
  padding:11px 16px;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  transition:transform .12s,box-shadow .15s,background .15s;
}
.rdr-btn-primary{background:#1366d6;color:#fff;box-shadow:0 6px 16px -8px rgba(19,102,214,.9);}
.rdr-btn-primary:hover{background:#0f55b4;transform:translateY(-1px);}
.rdr-btn-ghost{background:#f2f6fb;color:#33507a;border:1px solid #dde6f1;}
.rdr-btn-ghost:hover{background:#e8f0fa;}

/* ── 3. Live result rail / bar ───────────────────────────────────────────── */
.rdr-rail{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:min(300px,calc(100vw - 36px));
  border-radius:16px;overflow:hidden;
  background:#0d1a2a;border:1px solid #22364e;
  box-shadow:0 20px 46px -18px rgba(4,12,24,.75);
  transform:translateY(18px);opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.rdr-rail.on{opacity:1;transform:translateY(0);pointer-events:auto;}
.rdr-rail-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid #1c2f45;
}
.rdr-rail-t{font:700 10.5px/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:#6f8dae;}
.rdr-rail-x{background:none;border:0;color:#6f8dae;font-size:17px;line-height:1;cursor:pointer;padding:0 2px;}
.rdr-rail-x:hover{color:#cfe0f5;}
.rdr-rail-body{padding:13px 14px 14px;}
.rdr-rail-v{font:800 22px/1.15 inherit;color:#fff;margin:0 0 3px;letter-spacing:-.01em;}
.rdr-rail-l{font-size:12px;color:#8ba3bf;line-height:1.5;margin:0;}
.rdr-rail-go{
  display:block;margin-top:11px;text-align:center;background:#1366d6;color:#fff;
  border-radius:9px;padding:9px 12px;font:700 12.5px/1 inherit;text-decoration:none;
}
.rdr-rail-go:hover{background:#2a7bea;}
button.rdr-rail-go{border:0;cursor:pointer;width:100%;font-family:inherit;}

/* The calculator hand-off box is styled by contact-modal.js (.bm-ho), which every post loads. */

@media(max-width:860px){
  .rdr-rail{left:12px;right:12px;bottom:12px;width:auto;}
  .rdr-rail-body{display:flex;align-items:center;gap:12px;}
  .rdr-rail-v{font-size:19px;margin:0;flex:0 0 auto;}
  .rdr-rail-l{flex:1 1 auto;}
  .rdr-rail-go{margin-top:0;flex:0 0 auto;padding:9px 14px;}
}
/* Phones: a long peso range ("₱1,626,790 – ₱3,047,000") pushed the send button off-screen
   (found 2026-09-19 at 375px). Let the row wrap so the button gets its own full-width line. */
@media(max-width:560px){
  .rdr-rail-body{flex-wrap:wrap;gap:4px 10px;}
  .rdr-rail-v{font-size:18px;}
  .rdr-rail-l{flex:1 1 120px;min-width:0;}
  .rdr-rail-go{flex:1 1 100%;min-height:40px;margin-top:6px;}
}

/* ── 4. Section cards + progressive disclosure ───────────────────────────── */
.rdr-sec{
  border:1px solid #e6ecf4;border-radius:14px;background:#fff;
  margin:0 0 14px;overflow:hidden;
}
.rdr-sec-h{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:16px 18px;font-family:inherit;
}
.rdr-sec-h:hover{background:#fafcfe;}
.rdr-sec-n{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:#eef4fc;
  color:#1366d6;font:800 12px/26px inherit;text-align:center;
}
.rdr-sec-t{flex:1 1 auto;font:700 16px/1.35 inherit;color:#0c1a2a;}
.rdr-sec-c{
  flex:0 0 auto;color:#8ba3bf;font-size:18px;line-height:1;
  transition:transform .2s ease;
}
.rdr-sec[open] .rdr-sec-c{transform:rotate(180deg);}
.rdr-sec-b{padding:0 18px 18px;}
.rdr-sec-b > :first-child{margin-top:0;}

/* collapsed state is height-based so content stays in the DOM and in the a11y tree
   until the user has explicitly chosen to hide it */
.rdr-sec-b[hidden]{display:none;}

/* ── 5. Table view switcher ──────────────────────────────────────────────── */
.rdr-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;}
.rdr-tab{
  border:1px solid #dbe4ef;background:#fff;color:#4a6785;
  font:600 12px/1 inherit;padding:8px 12px;border-radius:9px;cursor:pointer;
}
.rdr-tab[aria-selected="true"]{background:#0c1a2a;border-color:#0c1a2a;color:#fff;}

/* ── 6. Read-mode toggle ─────────────────────────────────────────────────── */
.rdr-mode{
  display:inline-flex;align-items:center;gap:0;border:1px solid #dbe4ef;
  border-radius:999px;overflow:hidden;background:#fff;margin-left:auto;flex:0 0 auto;
}
.rdr-mode button{
  border:0;background:none;cursor:pointer;font:600 11.5px/1 inherit;color:#5b7797;padding:8px 12px;
}
.rdr-mode button[aria-pressed="true"]{background:#0c1a2a;color:#fff;}

@media(max-width:560px){
  .rdr-answer{padding:17px 16px 15px;border-radius:14px;}
  .rdr-answer-a{font-size:15.5px;}
  .rdr-sec-h{padding:14px 14px;}
  .rdr-sec-b{padding:0 14px 15px;}
  .rdr-sec-t{font-size:15px;}
}

@media(prefers-reduced-motion:reduce){
  .rdr-rail,.rdr-sec-c,.rdr-progress,.rdr-btn{transition:none;}
}

/* ── 0. Containment ──────────────────────────────────────────────────────
   .article-wrap is a grid/flex item. Without min-width:0 a wide, non-shrinking
   child (the nav scroller) makes it resolve to max-content and the whole page
   scrolls sideways on mobile. This is scoped to .rdr so it cannot affect any
   page that does not load the reading layer. */
.rdr .article-wrap{min-width:0;}
.rdr .rdr-nav-scroll{min-width:0;max-width:100%;}
.rdr .rdr-chip{max-width:min(62vw,260px);overflow:hidden;text-overflow:ellipsis;}