/* Book / document detail — the 'new' arm of the bookdet experiment.
 *
 * A SKIN over the existing markup, scoped under .bk2. See the note at the top
 * of document.php for why: ~15 inline onclick handlers, two modals and a
 * download gate whose rules live elsewhere. The reading and the download
 * decision are the product here, so typography and the action block carry it.
 *
 * Colours stated outright — design-system.css styles bare p/h1..h6/a, and an
 * element rule beats an inherited value. */

.bk2{
  --b2-ink:#0a0a0a; --b2-paper:#fff; --b2-dim:#5c626b; --b2-lab:#6b7280;
  --b2-hair:#e6e6e6; --b2-blue:#1a3aff; --b2-green:#0f7a4a;
  background:var(--b2-paper); color:var(--b2-ink);
}
.bk2 *{box-sizing:border-box}

/* ── heading block ──────────────────────────────────────────────────────── */
.bk2 h1,.bk2 .document-title{font-size:clamp(26px,3.8vw,44px);line-height:1.14;
  letter-spacing:-.035em;font-weight:800;color:var(--b2-ink)}
.bk2 h2{font-size:clamp(20px,2.4vw,28px);line-height:1.2;letter-spacing:-.03em;
  font-weight:800;color:var(--b2-ink)}
.bk2 h3{font-size:17px;font-weight:800;letter-spacing:-.015em;color:var(--b2-ink)}
.bk2 p{color:#1a1d21;line-height:1.68}

/* Square everything the old design rounded, without hunting each class. */
.bk2 .card,.bk2 .panel,.bk2 .box,.bk2 .doc-card,.bk2 .document-card,
.bk2 .modal-content,.bk2 .badge,.bk2 .chip,.bk2 .tag,
.bk2 input,.bk2 textarea,.bk2 select,.bk2 button,.bk2 .btn,
.bk2 img,.bk2 .thumb,.bk2 .cover{border-radius:0}

/* ── buttons ────────────────────────────────────────────────────────────── */
.bk2 .btn{font-weight:800;border-radius:0;border:2px solid var(--b2-ink);
  background:var(--b2-paper);color:var(--b2-ink);box-shadow:none}
.bk2 .btn:hover{background:var(--b2-ink);color:#fff}
.bk2 .btn-primary{background:var(--b2-ink);color:#fff;border-color:var(--b2-ink)}
.bk2 .btn-primary:hover{background:#252525;border-color:#252525;color:#fff}
.bk2 .btn-outline{background:transparent;color:var(--b2-ink);border-color:var(--b2-ink)}
.bk2 .btn-outline:hover{background:var(--b2-ink);color:#fff}
.bk2 .btn-large{padding:14px 24px;font-size:14.5px}
.bk2 .btn-sm{padding:8px 14px;font-size:12.5px}
/* Admin controls stay visually secondary — they are not the page's purpose. */
.bk2 .btn-admin{border:1px solid var(--b2-hair);background:#fafafa;color:var(--b2-dim);
  font-weight:700;font-size:12px}
.bk2 .btn-admin:hover{background:var(--b2-ink);color:#fff;border-color:var(--b2-ink)}

/* ── meta, tags, chips ──────────────────────────────────────────────────── */
.bk2 .badge,.bk2 .chip,.bk2 .tag{border:1px solid var(--b2-hair);background:var(--b2-paper);
  color:var(--b2-dim);font-weight:700;font-size:12px;padding:5px 11px}
.bk2 .badge:hover,.bk2 .tag:hover{border-color:var(--b2-ink);color:var(--b2-ink)}

/* ── content body ───────────────────────────────────────────────────────── */
.bk2 .document-content,.bk2 .doc-content,.bk2 .summary-content,.bk2 .extended-content{
  font-size:16.5px;line-height:1.72;color:#1a1d21}
.bk2 .document-content a,.bk2 .doc-content a{color:var(--b2-blue);font-weight:700;
  text-decoration:underline;text-underline-offset:3px}
.bk2 blockquote{border-left:4px solid var(--b2-ink);padding-left:18px;margin:22px 0;
  color:var(--b2-dim);font-style:normal}
.bk2 code{background:#f2f2f2;border-radius:0;padding:2px 6px}
.bk2 pre{background:#f6f6f6;border:1px solid var(--b2-hair);border-radius:0;padding:16px;overflow-x:auto}

/* ── modals ─────────────────────────────────────────────────────────────── */
.bk2 .modal-content{border:2px solid var(--b2-ink);border-radius:0;box-shadow:none}
.bk2 .modal-close{border-radius:0;color:var(--b2-lab)}
.bk2 .modal-close:hover{color:var(--b2-ink)}

/* ── what next (new markup, appended after </main>) ─────────────────────── */
.bk2-after{border-top:2px solid #0a0a0a;margin-top:clamp(36px,5vw,60px);
  padding:clamp(32px,5vw,54px) 0 clamp(40px,6vw,70px);background:#fff}
.bk2-after-in{max-width:1000px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.bk2-join{border:2px solid #0a0a0a;border-left-width:10px;border-left-color:#1a3aff;
  padding:22px 24px;margin-bottom:24px}
.bk2-join-t{font-size:clamp(18px,2.2vw,25px);font-weight:800;letter-spacing:-.03em;
  margin:0;color:#0a0a0a;line-height:1.2}
.bk2-join-p{font-size:14px;line-height:1.55;color:#5c626b;margin:9px 0 0;max-width:62ch}
.bk2-btn{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:800;
  text-decoration:none;padding:12px 20px;border:2px solid #0a0a0a;background:#0a0a0a;
  color:#fff;border-radius:0}
.bk2-btn:hover{background:#252525;border-color:#252525;color:#fff;text-decoration:none}
.bk2-next{display:grid;grid-template-columns:1fr;border:2px solid #0a0a0a}
@media (min-width:820px){ .bk2-next{grid-template-columns:repeat(3,1fr)} }
.bk2-next-c{display:block;padding:20px 22px;text-decoration:none;color:#0a0a0a;
  border-bottom:1px solid #e6e6e6}
.bk2-next-c:last-child{border-bottom:0}
@media (min-width:820px){
  .bk2-next-c{border-right:1px solid #e6e6e6;border-bottom:0}
  .bk2-next-c:last-child{border-right:0}
}
.bk2-next-c:hover{background:#f6f6f6;text-decoration:none;color:#0a0a0a}
.bk2-next-c b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em}
.bk2-next-c span{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:#5c626b}

/* The language switch used flag emoji — banned in first-party chrome, and they
   render differently on every platform anyway. Replaced with the language code,
   which is what the control actually means. */
.bk2 .flag{display:inline-block;min-width:22px;padding:1px 5px;margin-right:6px;
  border:1px solid var(--b2-hair);font-size:10.5px;font-weight:800;letter-spacing:.06em;
  color:var(--b2-lab);line-height:1.5}

/* ── old-stylesheet leftovers ────────────────────────────────────────────────
   Three classes the documents stylesheet still owns inside .bk2: two 9999px
   pills on the old pale-blue (#dbeafe / #2563eb) and a rounded related-card.
   Found by sweeping computed styles on the rendered page. */
.bk2 .document-type-badge,.bk2 .related-category{border-radius:0;background:var(--b2-ink);
  color:#fff;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  border:0}
.bk2 .related-card{border-radius:0;border:2px solid var(--b2-ink);box-shadow:none;
  background:var(--b2-paper)}
.bk2 .related-card:hover{background:#f6f7ff}

/* ── AI summary blocks, flat arm ────────────────────────────────────────────
   These carried the old design language into the new arm: navy quote cards,
   blue left rails, rounded corners and drop shadows, sitting inside a page that
   is otherwise square ink-on-paper. The markup is shared between arms, so the
   only way to reskin them is to scope on .bk2 — the class document.php already
   sets when the arm is 'new'.

   Everything below is the same system as the rest of the flat arm: square, one
   hairline, ink for structure, a single orange accent, no shadows. */

.bk2 .summary-section{
  background:#fff; border:1px solid #e6e6e6; border-left:3px solid #0a0a0a;
  border-radius:0; box-shadow:none; padding:20px 22px; margin-bottom:16px;
}
.bk2 .summary-header{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 14px; padding:0; border:0; background:none;
}
.bk2 .summary-header h3, .bk2 .summary-section > h3, .bk2 .summary-section > h4{
  margin:0; font-size:15px; font-weight:800; letter-spacing:-.01em; color:#0a0a0a;
}
/* Vietnamese: stacked diacritics reach ~0.92em above the baseline, so prose
   here needs more leading than a Latin-tuned default. */
.bk2 .summary-content{font-size:14px; line-height:1.75; color:#4b5563}
.bk2 .summary-content li{margin-bottom:7px}
.bk2 .summary-content strong, .bk2 .summary-content b{color:#0a0a0a; font-weight:700}

/* The quote cards were dark navy on a white page — the single loudest thing in
   the screenshot, and the only dark surface on it. A quote needs to read as a
   quote, not as a panel: a rule on the leading edge and room to breathe. */
.bk2 .key-quote{
  background:#fafafa; color:#0a0a0a; border:0; border-left:3px solid #e8501e;
  border-radius:0; box-shadow:none; padding:13px 16px; margin:0 0 10px;
  font-size:14px; line-height:1.7; font-style:normal;
}
.bk2 .key-quote::before, .bk2 .key-quote::after{content:none}
.bk2 .key-quote:last-child{margin-bottom:0}

.bk2 .ai-summary{background:none; border:0; border-radius:0; box-shadow:none; padding:0}
.bk2 .ai-badges{display:flex; gap:7px; flex-wrap:wrap; margin-left:auto}
.bk2 .ai-badge{
  background:none; color:#9aa1ab; border:1px solid #e6e6e6; border-radius:0;
  padding:2px 8px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}

/* Anything still rounded or shadowed inside these blocks is old chrome that has
   not been named individually. Flatten it rather than leave one stray card. */
.bk2 .summary-section *{border-radius:0 !important; box-shadow:none !important}