/* ==========================================================================
   Reading layer — long-form type + chrome for /docs, /blog, /resources.

   The v2 app system (tokens.css) is a product-UI scale: 14px body, dense
   spacing. Correct for worksheets, wrong for 2,000-word guides. This layer
   keeps the v2 colors/spacing/radius tokens but swaps in an editorial type
   scale: Public Sans 17px body, Fraunces display headings — the same pair
   the borrower Interactive Report uses, reused here to mark "content you
   read" vs "chrome you operate".

   Floor rules (CLAUDE.md §4.13): every load-bearing color is literal hex
   first, with the oklch token (or a literal oklch) second; positioning uses
   top/right/bottom/left longhands; nothing newer than ~2017 is structural.
   Hex equivalents mirror pricing_v2.css: accent #2971c6, hover #025eb8,
   soft #e5f3ff.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/publicsans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Prose — anything inside .reading is rendered markdown.
   -------------------------------------------------------------------------- */

.reading {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #33312c;
  color: var(--c-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.reading > * { max-width: 68ch; }

.reading h1,
.reading h2,
.reading h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 560;
  color: #33312c;
  color: var(--c-fg);
  letter-spacing: -0.015em;
  scroll-margin-top: 96px;
}
.reading h1 {
  font-size: 38px;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
}
.reading h2 {
  font-size: 26px;
  line-height: 1.25;
  margin: var(--s-12) 0 var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid #e8e5de;
  border-top-color: var(--c-border);
}
.reading h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.reading h3 {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0;
  margin: var(--s-8) 0 var(--s-2);
}

.reading p { margin: 0 0 var(--s-5); }
.reading ul, .reading ol { margin: 0 0 var(--s-5); padding-left: var(--s-6); }
.reading li { margin-bottom: var(--s-2); }
.reading li > ul, .reading li > ol { margin-top: var(--s-2); margin-bottom: 0; }

.reading a {
  color: #2971c6;
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.reading a:hover {
  color: #025eb8;
  color: var(--c-accent-hover);
}

.reading strong { font-weight: 650; }

.reading blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  border-left: 3px solid #2971c6;
  border-left-color: var(--c-accent);
  color: #6b6961;
  color: var(--c-fg-muted);
}
.reading blockquote p:last-child { margin-bottom: 0; }

.reading code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: #f4f2ee;
  background: var(--c-bg-sunk);
  border: 1px solid #e8e5de;
  border-color: var(--c-border);
  border-radius: var(--r-1);
  padding: 1px 5px;
}
.reading pre {
  background: #f4f2ee;
  background: var(--c-bg-sunk);
  border: 1px solid #e8e5de;
  border-color: var(--c-border);
  border-radius: var(--r-3);
  padding: var(--s-4) var(--s-5);
  overflow-x: auto;
  margin: 0 0 var(--s-5);
}
.reading pre code { background: none; border: 0; padding: 0; font-size: 14px; }

/* UI references: "click <kbd>Save</kbd>" */
.reading kbd {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  background: #ffffff;
  background: var(--c-panel);
  border: 1px solid #d9d5cc;
  border-color: var(--c-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-1);
  padding: 1px 6px;
  white-space: nowrap;
}

.reading table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0 0 var(--s-6);
  font-variant-numeric: tabular-nums;
}
.reading th {
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b6961;
  color: var(--c-fg-muted);
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid #d9d5cc;
  border-bottom-color: var(--c-border-strong);
}
.reading td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid #e8e5de;
  border-bottom-color: var(--c-border);
  vertical-align: top;
}

.reading img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-4);
  border: 1px solid #e8e5de;
  border-color: var(--c-border);
}

.reading hr {
  border: 0;
  border-top: 1px solid #e8e5de;
  border-top-color: var(--c-border);
  margin: var(--s-10) 0;
}

/* 16:9 video embed (docs getting-started, future posts) */
.reading-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-4);
  border: 1px solid #e8e5de;
  border-color: var(--c-border);
  margin: 0 0 var(--s-6);
}
.reading-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lead paragraph under a page title (set in the template, not markdown) */
.reading-lead {
  font-size: 20px;
  line-height: 1.55;
  color: #6b6961;
  color: var(--c-fg-muted);
  margin: 0 0 var(--s-8);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Docs shell — sidebar | article | on-this-page rail.
   -------------------------------------------------------------------------- */

.docs-shell {
  display: grid;
  /* Sidebar is 240px (not 220) so the longest nav title + its "Max" plan pill
   * — "Draft your email with AI" — stays on one line on laptop/desktop. Below
   * 920px the sidebar collapses into the full-width mobile disclosure, where
   * there's ample room and a pill wrap is fine. */
  grid-template-columns: 240px minmax(0, 1fr) 190px;
  grid-column-gap: var(--s-12);
  column-gap: var(--s-12);
  padding-top: var(--s-10);
  padding-bottom: var(--s-16);
}

.docs-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 76px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: var(--s-2);
}
.docs-section { margin-bottom: var(--s-6); }
.docs-section-label {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a877e;
  color: var(--c-fg-faint);
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-3);
}
.docs-section ul { list-style: none; margin: 0; padding: 0; }
.docs-nav-link {
  display: block;
  font-size: var(--fs-14);
  color: #6b6961;
  color: var(--c-fg-muted);
  text-decoration: none;
  padding: 5px var(--s-3);
  border-radius: var(--r-2);
  line-height: 1.4;
}
.docs-nav-link:hover {
  color: #33312c;
  color: var(--c-fg);
  background: #f7f5f1;
  background: var(--c-bg-soft);
}
.docs-nav-link[aria-current="page"] {
  color: #2971c6;
  color: var(--c-accent);
  background: #e5f3ff;
  background: var(--c-accent-soft);
  font-weight: 600;
}
/* "Max" pill on a nav link for a Max-only page. Same accent as the pricing
 * flagship badge. The hex line is load-bearing on the floor browser (§4.13):
 * without it the fill computes to transparent and the white text vanishes. */
.docs-plan-pill {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  color: var(--c-accent-fg);
  background: #2971c6;
  background: oklch(0.55 0.15 255);
}

/* Mobile disclosure — same nav include, shown only under 920px */
.docs-mobile-nav { display: none; }

.docs-article { min-width: 0; }
.docs-crumb {
  font-size: var(--fs-13);
  color: #8a877e;
  color: var(--c-fg-faint);
  margin: 0 0 var(--s-2);
}

.docs-toc {
  position: -webkit-sticky;
  position: sticky;
  top: 76px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  font-size: var(--fs-13);
}
.docs-toc-label {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a877e;
  color: var(--c-fg-faint);
  margin: 0 0 var(--s-2);
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li { margin: 0 0 var(--s-1); }
.docs-toc a {
  display: block;
  color: #6b6961;
  color: var(--c-fg-muted);
  text-decoration: none;
  padding: 3px 0 3px var(--s-3);
  border-left: 1px solid #e8e5de;
  border-left-color: var(--c-border);
  line-height: 1.4;
}
.docs-toc a:hover {
  color: #33312c;
  color: var(--c-fg);
  border-left-color: #d9d5cc;
  border-left-color: var(--c-border-strong);
}

/* Prev / next pager */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: var(--s-4);
  column-gap: var(--s-4);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid #e8e5de;
  border-top-color: var(--c-border);
  max-width: 68ch;
}
.docs-pager-link {
  display: block;
  text-decoration: none;
  border: 1px solid #e8e5de;
  border-color: var(--c-border);
  border-radius: var(--r-4);
  padding: var(--s-3) var(--s-4);
}
.docs-pager-link:hover {
  border-color: #d9d5cc;
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-1);
}
.docs-pager-link.is-next { text-align: right; grid-column: 2; }
.docs-pager-eyebrow {
  display: block;
  font-size: var(--fs-12);
  color: #8a877e;
  color: var(--c-fg-faint);
  margin-bottom: 2px;
}
.docs-pager-title {
  font-size: var(--fs-15);
  font-weight: 600;
  color: #2971c6;
  color: var(--c-accent);
}

/* Docs landing page — section cards */
.docs-index-head { max-width: 640px; margin-bottom: var(--s-10); }
.docs-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: var(--s-5);
  gap: var(--s-5);
}
.docs-index-card {
  background: #ffffff;
  background: var(--c-panel);
  border: 1px solid #e8e5de;
  border-color: var(--c-border);
  border-radius: var(--r-5);
  padding: var(--s-6);
  box-shadow: var(--sh-1);
}
.docs-index-card h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: var(--fs-18);
  font-weight: 560;
  margin: 0 0 var(--s-3);
}
.docs-index-card ul { list-style: none; margin: 0; padding: 0; }
.docs-index-card li { margin-bottom: var(--s-2); }
.docs-index-card a {
  color: #2971c6;
  color: var(--c-accent);
  text-decoration: none;
  font-size: var(--fs-14);
}
.docs-index-card a:hover { text-decoration: underline; }
.docs-index-card .docs-card-desc {
  font-size: var(--fs-13);
  color: #6b6961;
  color: var(--c-fg-muted);
  margin: 2px 0 0;
}

/* --------------------------------------------------------------------------
   Blog + resources shells — centered single column, no sidebar.
   -------------------------------------------------------------------------- */

.post-shell {
  max-width: 720px;
  margin: 0 auto;
  padding-top: var(--s-12);
  padding-bottom: var(--s-16);
}
.post-meta {
  font-size: var(--fs-13);
  color: #8a877e;
  color: var(--c-fg-faint);
  margin: 0 0 var(--s-8);
  font-variant-numeric: tabular-nums;
}
.post-back {
  display: inline-block;
  font-size: var(--fs-13);
  color: #6b6961;
  color: var(--c-fg-muted);
  text-decoration: none;
  margin-bottom: var(--s-6);
}
.post-back:hover { color: #2971c6; color: var(--c-accent); }

/* Blog index — featured hero + card grid */
.blog-shell {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: var(--s-16);
}
.blog-head { max-width: 640px; margin-bottom: var(--s-10); }

/* Shared meta row (category pill + date) and byline */
.blog-meta-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
}
.blog-pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2971c6;
  color: var(--c-accent);
  background: #e5f3ff;
  background: var(--c-accent-soft);
  padding: 3px 10px;
  border-radius: 999px;
}
.blog-meta-date {
  font-size: var(--fs-13);
  color: #8a877e;
  color: var(--c-fg-faint);
  font-variant-numeric: tabular-nums;
}
.blog-byline {
  font-size: var(--fs-13);
  color: #8a877e;
  color: var(--c-fg-faint);
  margin: var(--s-3) 0 0;
}

/* Monogram / image thumbnail */
.blog-media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #eef1f5;
  background: linear-gradient(135deg, #2971c6, #1b3f6b);
  aspect-ratio: 16 / 10;
}
.blog-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Default placeholder — the LendrTech mark centered on the gradient, shown
   until a post declares its own `image:`. */
.blog-media .blog-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: auto;
  opacity: 0.92;
}
.blog-media-hero .blog-logo { width: 88px; }

/* Featured hero — media beside a larger headline */
.blog-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  text-decoration: none;
  padding-bottom: var(--s-10);
  margin-bottom: var(--s-10);
  border-bottom: 1px solid #e8e5de;
  border-bottom-color: var(--c-border);
}
.blog-hero .blog-media-hero { aspect-ratio: 16 / 11; }
.blog-hero-title {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
  color: #33312c;
  color: var(--c-fg);
}
.blog-hero:hover .blog-hero-title { color: #2971c6; color: var(--c-accent); }
.blog-hero-desc {
  font-size: 17px;
  line-height: 1.6;
  color: #6b6961;
  color: var(--c-fg-muted);
  margin: 0;
}

/* Card grid — everything after the featured post */
.blog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8) var(--s-6);
}
.blog-card a { text-decoration: none; display: block; }
.blog-card .blog-media { margin-bottom: var(--s-4); }
.blog-card-title {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin: 0 0 var(--s-2);
  color: #33312c;
  color: var(--c-fg);
}
.blog-card a:hover .blog-card-title { color: #2971c6; color: var(--c-accent); }
.blog-card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: #6b6961;
  color: var(--c-fg-muted);
  margin: 0;
}
.blog-empty {
  color: #6b6961;
  color: var(--c-fg-muted);
  border-top: 1px solid #e8e5de;
  border-top-color: var(--c-border);
  padding-top: var(--s-8);
}

@media (max-width: 720px) {
  .blog-hero { grid-template-columns: 1fr; gap: var(--s-5); }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-hero-title { font-size: 28px; }
}

/* Resources — grouped link cards */
.res-group { margin-bottom: var(--s-10); }
.res-group h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 560;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-5);
}
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: var(--s-4);
  gap: var(--s-4);
}
.res-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  background: var(--c-panel);
  border: 1px solid #e8e5de;
  border-color: var(--c-border);
  border-radius: var(--r-4);
  padding: var(--s-5);
}
.res-card:hover {
  border-color: #d9d5cc;
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-1);
}
.res-card h3 {
  font-size: var(--fs-15);
  font-weight: 600;
  color: #2971c6;
  color: var(--c-accent);
  margin: 0 0 var(--s-1);
}
.res-card p {
  font-size: var(--fs-13);
  color: #6b6961;
  color: var(--c-fg-muted);
  margin: 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Legacy calculator widgets (re-skinned /blog/<Name> pages).
   Same ids/onclick wiring as before — this only styles the container.
   -------------------------------------------------------------------------- */

.reading-calc {
  background: #ffffff;
  background: var(--c-panel);
  border: 1px solid #e8e5de;
  border-color: var(--c-border);
  border-radius: var(--r-5);
  padding: var(--s-6);
  margin: var(--s-6) 0;
  box-shadow: var(--sh-1);
  max-width: 68ch;
}
.reading-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: var(--s-4);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.reading-calc label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 600;
  color: #6b6961;
  color: var(--c-fg-muted);
  margin-bottom: var(--s-1);
}
.reading-calc input[type="text"],
.reading-calc input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: #33312c;
  color: var(--c-fg);
  background: #ffffff;
  background: var(--c-panel);
  border: 1px solid #d9d5cc;
  border-color: var(--c-border-strong);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3);
}
.reading-calc-result {
  font-size: var(--fs-22);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-4);
}
.reading-calc table { font-size: var(--fs-13); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .docs-shell { grid-template-columns: 240px minmax(0, 1fr); }
  .docs-toc { display: none; }
}

@media (max-width: 920px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--s-6);
  }
  .docs-sidebar { display: none; }
  .docs-mobile-nav {
    display: block;
    margin-bottom: var(--s-6);
    border: 1px solid #e8e5de;
    border-color: var(--c-border);
    border-radius: var(--r-4);
    background: #ffffff;
    background: var(--c-panel);
  }
  .docs-mobile-nav summary {
    cursor: pointer;
    font-size: var(--fs-14);
    font-weight: 600;
    padding: var(--s-3) var(--s-4);
    list-style: none;
  }
  .docs-mobile-nav summary::-webkit-details-marker { display: none; }
  .docs-mobile-nav summary:after { content: " ▾"; color: #8a877e; }
  .docs-mobile-nav[open] summary {
    border-bottom: 1px solid #e8e5de;
    border-bottom-color: var(--c-border);
  }
  .docs-mobile-nav .docs-nav { padding: var(--s-3) var(--s-2); }

  .reading { font-size: 16px; }
  .reading h1 { font-size: 30px; }
  .reading h2 { font-size: 22px; }
  .reading-lead { font-size: 18px; }
  .docs-pager { grid-template-columns: 1fr; grid-row-gap: var(--s-3); row-gap: var(--s-3); }
  .docs-pager-link.is-next { grid-column: auto; text-align: left; }
}