/* ────────────────────────────────────────────────────────────────────────
   Ashford Partners — book detail pages.

   Shared by every page in /book/. Pages are generated by
   .claude/build-books.py from books.js; this file holds their styles so the
   markup stays small and the browser caches one stylesheet across all books.

   Tokens mirror index.html — keep them in sync.
   ──────────────────────────────────────────────────────────────────────── */
  /* Ashford Partners — Book detail page (matches index.html's system) */
  :root {
    --canvas: #ffffff;
    --surface-soft: #f1f4f7;
    --ink-deep: #0a1317;
    --ink: #1c1e21;
    --charcoal: #444950;
    --steel: #5d6c7b;
    --stone: #8595a4;
    --hairline: #ced0d4;
    --hairline-soft: #dee3e9;
    --accent: #f97316;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --frame-w: 83%;
    --r-full: 100px;
    --s-xs: 8px; --s-sm: 10px; --s-md: 12px; --s-base: 16px; --s-lg: 20px; --s-xl: 24px; --s-xxl: 32px; --s-xxxl: 40px; --s-sec: 64px; --s-sec-lg: 80px;
    --font: "Inter", "Optimistic VF", Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
  body { background: var(--canvas); color: var(--ink-deep); font-family: var(--font); font-size: 16px; line-height: 1.5; letter-spacing: -0.16px; min-height: 100vh; display: flex; flex-direction: column; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }
  main { flex: 1; }

  .wrap { width: var(--frame-w); max-width: none; margin: 0 auto; }

  /* Top nav — same as the main page */
  .site-nav { background: var(--canvas); position: sticky; top: 0; z-index: 20; }
  .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-base); height: 72px; }
  .brand { display: flex; align-items: center; }
  .brand img { display: block; height: 21px; width: auto; }
  .nav-links { display: flex; align-items: center; gap: var(--s-xl); }
  .nav-links a { font-size: 15px; font-weight: 600; color: var(--steel); transition: color .15s; }
  .nav-links a:hover { color: var(--ink-deep); }
  .search { position: relative; display: flex; align-items: center; flex: 0 1 280px; margin-left: var(--s-xxl); margin-right: auto; }
  .search svg.mag { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--stone); pointer-events: none; }
  .search input { width: 100%; height: 38px; background: var(--canvas); color: var(--ink);
    border: 1px solid var(--ink-deep); border-radius: 5px; padding: 0 12px 0 34px;
    font-family: inherit; font-size: 14px; letter-spacing: -0.14px; outline: none;
    -webkit-appearance: none; appearance: none; }
  .search input::placeholder { color: var(--stone); }
  .search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .search input:focus { border-width: 2px; padding: 0 11px 0 33px; }

  /* Search results dropdown */
  /* The panel is allowed to grow past the input so long article titles have
     somewhere to go, capped so it never leaves the viewport. */
  .search-results { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    min-width: 100%; width: max-content; max-width: min(520px, calc(100vw - 32px));
    background: var(--canvas); border: 1px solid var(--ink-deep); border-radius: 5px;
    box-shadow: 0 18px 40px -20px rgba(10,19,23,0.4); overflow: hidden; max-height: 60vh; overflow-y: auto; }
  .search-results[hidden] { display: none; }
  .sr-group { padding: var(--s-xs) 0; }
  .sr-group + .sr-group { border-top: 1px solid var(--hairline-soft); }
  .sr-label { padding: 6px var(--s-base); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--stone); }
  .sr-item { display: flex; align-items: center; gap: var(--s-md); width: 100%; padding: 9px var(--s-base); text-align: left; }
  .sr-item:hover, .sr-item.is-active { background: var(--surface-soft); }
  .sr-item img { width: 30px; height: 39px; object-fit: cover; border-radius: 3px; flex: none; background: var(--ink-deep); }
  /* These must be block-level: overflow, text-overflow and min-width are all
     ignored on inline elements, so as spans the ellipsis never applied and the
     title was simply clipped by the panel edge. */
  .sr-item .sr-text { display: block; flex: 1; min-width: 0; }
  .sr-item .sr-title { display: block; font-size: 14px; font-weight: 600; color: var(--ink-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sr-item .sr-sub { display: block; font-size: 12.5px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sr-empty { padding: var(--s-base); font-size: 14px; color: var(--steel); }

  /* Breadcrumb */
  .crumb { padding: var(--s-lg) 0 0; font-size: 13.5px; color: var(--stone); display: flex; align-items: center; gap: 7px; }
  .crumb a:hover { color: var(--ink-deep); }
  .crumb svg { width: 13px; height: 13px; }

  /* ── Header card — cover + key facts, styled like the book listing ── */
  /* Header card — black, with a blue glow along the whole bottom edge
     fading upward */
  .book-head { margin-top: var(--s-base); padding: var(--s-xxxl);
    border-radius: 5px; overflow: hidden;
    background:
      linear-gradient(to top, rgba(56,110,255,0.34) 0%, rgba(56,110,255,0.12) 30%, transparent 62%),
      radial-gradient(120% 70% at 50% 108%, rgba(120,175,255,0.18), transparent 70%),
      #000;
    display: flex; gap: var(--s-xxxl); align-items: flex-start; }
  .head-cover { flex: 0 0 240px; border-radius: 5px; overflow: hidden; background: #000; }
  .head-cover img { display: block; width: 100%; height: auto; }
  .head-detail { flex: 1; min-width: 0; }
  h1 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; letter-spacing: -1.2px; line-height: 1.08; color: #fff; }
  .head-sub { margin-top: var(--s-md); font-size: 17px; color: #9aa9b8; line-height: 1.5; max-width: 62ch; }
  .facts { margin-top: var(--s-xl); display: flex; flex-wrap: wrap; gap: var(--s-md) var(--s-xxl); }
  .fact { font-size: 14px; }
  .fact .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #6f7e8d; }
  .fact .v { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-weight: 600; color: #fff; }

  .buy { display: inline-flex; align-items: baseline; gap: 7px; margin-top: var(--s-base);
    background: var(--ink-deep); color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: -0.14px;
    line-height: 1; border-radius: 5px; padding: 13px 18px; transition: background .15s, transform .1s; }
  .buy:hover { background: var(--charcoal); }
  .buy:active { transform: translateY(1px); }
  .buy .amz { height: 17px; width: auto; align-self: center; transform: translateY(2.5px); }
  .buy .amz .word { fill: #fff; }
  .buy .amz .smile { fill: var(--accent); }

  /* ── Body sections ── */
  .book-sections { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: var(--s-sec);
    padding: var(--s-sec) 0 var(--s-sec-lg); align-items: start; }
  section + section { margin-top: var(--s-xxxl); }
  h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.6px; }
  .prose { margin-top: var(--s-base); }
  .prose p { font-size: 16px; color: var(--charcoal); line-height: 1.65; }
  .prose p + p { margin-top: var(--s-base); }

  .bullets { margin-top: var(--s-base); list-style: none; }
  .bullets li { position: relative; padding-left: 22px; font-size: 16px; color: var(--charcoal); line-height: 1.6; }
  .bullets li + li { margin-top: var(--s-sm); }
  .bullets li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-deep); }

  /* Table of contents */
  .toc { margin-top: var(--s-base); border: 1px solid var(--hairline-soft); border-radius: 5px; overflow: hidden; }
  .toc li { list-style: none; display: flex; align-items: center; gap: var(--s-md);
    padding: var(--s-base) var(--s-lg); font-size: 15.5px; color: var(--ink-deep); }
  .toc li + li { border-top: 1px solid var(--hairline-soft); }
  .toc .n { font-size: 12.5px; font-weight: 700; color: var(--stone); min-width: 20px; }

  /* Sidebar */
  .side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--s-base); }
  .side-card { border: 1px solid var(--hairline-soft); border-radius: 5px; padding: var(--s-xl); background: var(--canvas); }
  .side-card h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
  .side-card p { margin-top: var(--s-sm); font-size: 14px; color: var(--charcoal); line-height: 1.55; }
  .side-card .btn-ghost { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s-base);
    font-size: 14px; font-weight: 700; color: #fff; border-radius: 5px; padding: 11px 16px;
    background: var(--blue); transition: background .15s, transform .1s; }
  .side-card .btn-ghost:hover { background: var(--blue-dark); }
  .side-card .btn-ghost:active { transform: translateY(1px); }

  /* Not found */
  .missing { text-align: center; padding: var(--s-sec-lg) 0; }
  .missing h1 { font-size: 28px; }
  .missing p { margin-top: var(--s-md); color: var(--steel); }
  .missing a { display: inline-block; margin-top: var(--s-lg); font-weight: 700; color: var(--ink-deep); border-bottom: 2px solid var(--accent); }

  /* Footer */
  .site-footer { border-top: 1px solid var(--hairline-soft); background: var(--canvas); }
  .site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-base); flex-wrap: wrap; padding-top: var(--s-xl); padding-bottom: var(--s-xl); }
  .site-footer .copy { font-size: 13.5px; color: var(--stone); }
  .site-footer nav { display: flex; gap: var(--s-lg); flex-wrap: wrap; }
  .site-footer a { font-size: 13.5px; font-weight: 600; color: var(--steel); }
  .site-footer a:hover { color: var(--ink-deep); }

  @media (max-width: 1020px) {
    .book-sections { grid-template-columns: 1fr; gap: var(--s-xxxl); }
    .side { position: static; flex-direction: row; flex-wrap: wrap; }
    .side-card { flex: 1 1 260px; }
  }
  @media (max-width: 920px) {
    .wrap { width: auto; max-width: 100%; padding: 0 var(--s-lg); }
    .book-head { flex-direction: column; padding: var(--s-xl); }
    .head-cover { flex: none; max-width: 180px; }
  }
  @media (max-width: 600px) {
    /* Phone only: smaller book cover on the detail pages */
    .head-cover { max-width: 130px; }
  }