/* Muhaya — Insights library: evidence cards, the library grid and filters,
   Muhaya's View and reading paths. Markup is rendered at build time from
   library-data.js (scripts/library.js). Unlike the rest of the site, these
   blocks use classes, not inline styles, so light/dark, RTL and responsive
   rules all live here. Loaded after muhaya-rtl.css. */

:root{
  --lib-ink:#121826;--lib-text2:#3b4252;--lib-muted:#5b6272;--lib-card:#FFFFFF;--lib-paper:#F0F0F0;
  --lib-line:rgba(18,24,38,.14);--lib-line-strong:rgba(18,24,38,.4);--lib-accent:#2F68FF;
  --lib-view-bg:#DDF7EE;--lib-view-rule:#10A36D;--lib-badge-bg:rgba(18,24,38,.06);--lib-ph-bg:#E6E2D6;
  --lib-shadow:0 1px 0 rgba(18,24,38,.06),0 22px 44px -26px rgba(18,24,38,.45);
  --lib-dot-book:#2F68FF;--lib-dot-article:#FF8C7A;--lib-dot-research:#16C79A;--lib-dot-reports:#121826;--lib-dot-guide:#E0A800;--lib-dot-media:#e0624d
}
html[data-theme="dark"]{
  --lib-ink:#ECEFF5;--lib-text2:#C3CAD7;--lib-muted:#A3ABBB;--lib-card:#161D2C;--lib-paper:#0E1320;
  --lib-line:rgba(236,239,245,.14);--lib-line-strong:rgba(236,239,245,.38);--lib-accent:#8EADFF;
  --lib-view-bg:#12302A;--lib-view-rule:#45D6A0;--lib-badge-bg:rgba(236,239,245,.08);--lib-ph-bg:#1F2738;
  --lib-shadow:0 0 0 1px rgba(236,239,245,.09),0 24px 44px -26px rgba(0,0,0,.75);
  --lib-dot-reports:#ECEFF5
}

.lib-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- section heads ---------- */
.lib-section-head{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:60px;align-items:end}
.lib-eyebrow{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.lib-section-intro{margin:0;font-size:18px;line-height:1.5;color:var(--lib-text2)}

/* ---------- shared bits ---------- */
.lib-kicker{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lib-ink)}
.lib-dot{display:inline-block;width:9px;height:9px;flex:none;background:var(--lib-dot-book)}
.lib-dot--article{background:var(--lib-dot-article);border-radius:2px}
.lib-dot--research{background:var(--lib-dot-research);border-radius:50%}
.lib-dot--reports{background:var(--lib-dot-reports)}
.lib-dot--guide{background:var(--lib-dot-guide);transform:rotate(45deg) scale(.85)}
.lib-dot--media{background:var(--lib-dot-media);border-radius:50% 50% 0 50%}
.lib-badges{display:flex;flex-wrap:wrap;gap:6px}
.lib-badge{display:inline-flex;align-items:center;font-size:12px;font-weight:600;line-height:1.3;padding:3px 8px;border-radius:3px;background:var(--lib-badge-bg);color:var(--lib-text2)}
.lib-badge--access{background:transparent;box-shadow:inset 0 0 0 1px var(--lib-line-strong)}
.lib-badge--peer{background:rgba(22,199,154,.16)}
.lib-badge--live{background:rgba(245,200,76,.28)}
.lib-pairs{margin:0;font-size:14px;line-height:1.5;color:var(--lib-text2)}
.lib-pairs>span:first-child{font-weight:700;color:var(--lib-ink)}
.lib-pairs a{color:var(--lib-accent)}

/* ---------- featured strip and key-figure blocks ---------- */
.lib-featured-title{text-transform:uppercase}
.lib-featured-meta{font-size:14px;line-height:1.5;margin-top:14px;opacity:.72}
.lib-featured-go a{color:#F5C84C;font-weight:700;font-size:15px}
.lib-featured-go a:hover{color:#F7F9FC}
.lib-dated a{text-decoration:underline;text-underline-offset:2px}
.lib-figure-dated{font-size:13px;line-height:1.5;margin-top:12px;opacity:.82}
.lib-figure-dated a{color:inherit}

/* ---------- evidence cards (inside the five insights) ---------- */
.lib-ev-list{display:flex;flex-direction:column;gap:10px}
.lib-ev{display:grid;gap:6px;justify-items:start;background:var(--lib-card);border-radius:4px;padding:16px 18px;box-shadow:var(--lib-shadow);color:var(--lib-ink)!important;text-decoration:none;transition:box-shadow .15s}
.lib-ev:hover,.lib-ev:focus-visible{box-shadow:0 0 0 2px var(--lib-accent),var(--lib-shadow)}
.lib-ev-title{font-weight:700;font-size:17px;line-height:1.3}
.lib-ev-meta,.lib-ev-basis{font-size:13px;line-height:1.45;color:var(--lib-muted)}
.lib-ev-go{font-weight:700;font-size:14px;color:var(--lib-accent);margin-top:2px}

/* ---------- Muhaya's View ---------- */
/* Our own one-sentence reading of why a source matters. It sits inside the
   source's card, after "What the source says", and must never read as the
   source's words: its own tinted panel and rule, a label that comes first,
   no quotation marks, and a different typographic voice from the summary. */
.lib-mview{display:flex;flex-direction:column;gap:6px;padding:12px 14px 13px;border-radius:4px;background:var(--lib-view-bg);border-inline-start:3px solid var(--lib-view-rule);color:var(--lib-ink)}
.lib-mview-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lib-mview-mark{display:inline-block;width:12px;height:2px;background:currentColor;align-self:center}
.lib-mview-text{margin:0;font-weight:600;font-stretch:92%;font-size:15.5px;line-height:1.45}
/* Inside the dark featured-book card. */
.lib-featured-mview{margin-top:22px;max-width:600px}
.lib-featured-mview .lib-mview{background:rgba(69,214,160,.12);border-inline-start-color:#45D6A0;color:#F7F9FC}
.lib-featured-meta--top{margin-top:18px!important}

/* ---------- featured source (featured strip) ---------- */
.lib-feature{display:flex;flex-direction:column;gap:10px;height:100%;color:var(--lib-ink)}
.lib-feature-title{margin:2px 0 0;font-weight:800;font-stretch:80%;font-size:28px;line-height:1.05;letter-spacing:-.015em}
.lib-feature .lib-says{margin-top:4px}
.lib-feature-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding-top:6px}
.lib-feature-more{font-weight:600;font-size:14px;color:var(--lib-muted)}
.lib-feature-more:hover{color:var(--lib-ink)}

/* ---------- filters ---------- */
.lib-filters{margin-top:36px;display:flex;flex-direction:column;gap:12px}
.lib-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lib-filter-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lib-muted);min-width:150px}
.lib-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--lib-line-strong);background:transparent;color:var(--lib-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.lib-chip:hover{border-color:var(--lib-ink)}
.lib-chip[aria-pressed="true"]{background:var(--lib-ink);border-color:var(--lib-ink);color:var(--lib-paper)}
.lib-chip:focus-visible,.lib-reset:focus-visible,.lib-more>summary:focus-visible,.lib-toggle input:focus-visible{outline:2px solid var(--lib-accent);outline-offset:2px}
.lib-count{font-weight:600;font-stretch:62%;opacity:.7}
.lib-more{display:flex;flex-direction:column;gap:12px}
.lib-more[open]{gap:12px}
.lib-more>summary{cursor:pointer;font-weight:700;font-size:15px;min-height:40px;display:inline-flex;align-items:center;color:var(--lib-ink)}
.lib-more>div+div{margin-top:12px}
.lib-toggle{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-size:15px;font-weight:600;cursor:pointer}
.lib-toggle input{width:18px;height:18px;margin:0;accent-color:var(--lib-accent)}
.lib-status{margin:4px 0 0;font-size:14px;color:var(--lib-muted)}
@media (min-width:701px){.lib-more>summary{display:none}}

/* ---------- library grid ---------- */
.lib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.lib-card{display:flex;flex-direction:column;background:var(--lib-card);color:var(--lib-ink);border-radius:4px;box-shadow:var(--lib-shadow);overflow:hidden;scroll-margin-top:96px}
.lib-card[hidden]{display:none}
.lib-card:target{box-shadow:0 0 0 2px var(--lib-accent),var(--lib-shadow)}
.lib-card-body{display:flex;flex-direction:column;gap:14px;padding:20px 22px 18px;flex:1}
.lib-src{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--lib-line)}
.lib-says{display:flex;flex-direction:column;gap:6px}
.lib-says-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lib-muted)}
.lib-title{margin:4px 0 0;font-weight:800;font-stretch:80%;font-size:26px;line-height:1.05;letter-spacing:-.015em}
.lib-subtitle{margin:-4px 0 0;font-size:15px;line-height:1.35;color:var(--lib-text2)}
.lib-meta{margin:0;font-size:14px;line-height:1.45;color:var(--lib-muted)}
.lib-basis{margin:0;font-size:14px;line-height:1.45;color:var(--lib-text2);padding-inline-start:10px;border-inline-start:2px solid var(--lib-line-strong)}
.lib-summary{margin:0;font-size:16px;line-height:1.5}
.lib-figure{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.lib-figure-n{font-weight:900;font-stretch:62%;font-size:56px;line-height:.9;letter-spacing:-.02em;color:var(--lib-accent)}
.lib-figure-measure{font-size:14px;line-height:1.4;font-weight:600}
.lib-figure-note{font-size:13px;line-height:1.4;color:var(--lib-muted)}
.lib-go{font-weight:700;font-size:15px;color:var(--lib-accent)}
.lib-foot{margin:auto 0 0;font-size:12px;line-height:1.5;color:var(--lib-muted)}
.lib-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lib-cover--loaded .lib-ph{visibility:hidden}
.lib-nocover .lib-cover-credit,.lib-nocover .lib-cover-sep{display:none}
.lib-empty{margin-top:20px;padding:28px;border:1px dashed var(--lib-line-strong);border-radius:4px;text-align:center}
.lib-empty p{margin:0 0 12px;font-size:17px}
.lib-reset{min-height:40px;padding:0 16px;border-radius:4px;border:1px solid var(--lib-ink);background:transparent;color:var(--lib-ink);font:inherit;font-weight:700;cursor:pointer}

/* Book covers: an Open Library image for the confirmed edition, over a
   typographic placeholder that shows whenever there is no image (or it fails). */
.lib-cover{position:relative;height:244px;display:grid;place-items:center;background:var(--lib-ph-bg)}
.lib-ph{width:138px;height:204px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:16px 13px;background:var(--lib-paper);border-top:5px solid var(--lib-accent);box-shadow:0 12px 24px -14px rgba(18,24,38,.55);text-align:left}
.lib-ph-title{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:72%;font-size:21px;line-height:1;text-transform:uppercase;overflow-wrap:anywhere}
.lib-ph-by{font-family:'Archivo',sans-serif;font-size:11px;font-weight:600;line-height:1.3;color:var(--lib-muted)}
.lib-cover img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:204px;width:auto;max-width:80%;object-fit:contain;box-shadow:0 12px 24px -12px rgba(18,24,38,.55);background:transparent}

/* ---------- reading paths ---------- */
.lib-paths{display:flex;flex-direction:column}
.lib-path{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px;align-items:baseline;padding:24px 0;border-top:1px solid var(--lib-ink)}
html[data-theme="dark"] .lib-path{border-top-color:rgba(236,239,245,.30)}
.lib-path-title{margin:0;font-weight:800;font-stretch:80%;font-size:32px;letter-spacing:-.015em;line-height:1.1}
.lib-path-intro{margin:6px 0 0;font-size:16px;color:var(--lib-muted)}
.lib-path-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lib-path-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);font-size:18px;line-height:1.35}
.lib-step-n{font-weight:700;font-stretch:62%;color:var(--lib-accent)}
.lib-step{display:flex;flex-direction:column;gap:2px}
.lib-step-kind{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lib-muted)}
.lib-step a{align-self:flex-start;color:var(--lib-ink);text-decoration:underline;text-decoration-color:var(--lib-line-strong);text-underline-offset:3px}
.lib-step a:hover{text-decoration-color:var(--lib-accent)}

/* ---------- RTL ---------- */
/* No tracking or capitals on Arabic labels; Arabic display text in Changa.
   English source titles and bylines keep Archivo and read left to right,
   aligned to the card's start (the right edge). */
[dir="rtl"] .lib-eyebrow,[dir="rtl"] .lib-kicker,[dir="rtl"] .lib-filter-label,[dir="rtl"] .lib-mview-label,[dir="rtl"] .lib-says-label,[dir="rtl"] .lib-step-kind{letter-spacing:normal;text-transform:none}
[dir="rtl"] .lib-eyebrow{font-weight:700}
[dir="rtl"] .lib-title:not(.lib-other-lang),[dir="rtl"] .lib-path-title{font-family:'Changa',sans-serif;font-stretch:normal;letter-spacing:normal;line-height:1.35}
[dir="rtl"] .lib-mview-text{font-stretch:normal;font-weight:600;font-size:15.5px;line-height:1.7}
[dir="rtl"] .lib-path-title{font-size:28px}
[dir="rtl"] .lib-other-lang{font-family:'Archivo',sans-serif}
[dir="rtl"] p.lib-other-lang,[dir="rtl"] h3.lib-other-lang,[dir="rtl"] .lib-ev-title.lib-other-lang{text-align:right}
[dir="rtl"] .lib-meta>.lib-other-lang,[dir="rtl"] .lib-ev-meta>.lib-other-lang,[dir="rtl"] .lib-featured-meta>.lib-other-lang{display:inline-block;max-width:100%}
[dir="rtl"] .lib-ev{justify-items:stretch}
[dir="rtl"] .lib-ev>*{justify-self:start}
[dir="rtl"] .lib-featured-title{font-family:'Archivo',sans-serif!important;line-height:.85!important}
/* The featured book title is the English original on Arabic pages too. Next
   to the wider Changa "46%" its longest word ("ORGANIZATION") would push the
   two-column strip past the page edge, so it scales with the viewport; and
   the phone-size cap muhaya-rtl.css removed (written for an Arabic title)
   applies again. */
@media (min-width:1101px){[dir="rtl"] [data-screen-label="Featured"] h2.lib-featured-title,[dir="rtl"] [data-screen-label="Insights"] h3.lib-featured-title{font-size:min(150px,8.2vw)!important}}
@media (max-width:700px){[dir="rtl"] [data-screen-label="Featured"] h2.lib-featured-title,[dir="rtl"] [data-screen-label="Insights"] h3.lib-featured-title{font-size:min(72px,calc((100vw - 128px) * .18))!important}}
[dir="rtl"] .lib-ph{direction:ltr}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  /* The handwritten note sits 30px above the statistic card; once the strip
     stacks, give it room so it no longer overlaps the featured book. */
  [data-screen-label="Featured"] .lib-stat-card{margin-top:22px}
  .lib-section-head{grid-template-columns:minmax(0,1fr);gap:20px}
  .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lib-filter-label{min-width:0;width:100%}
}

/* ---------- phone ---------- */
@media (max-width:700px){
  .lib-grid{grid-template-columns:minmax(0,1fr)}
  .lib-path{grid-template-columns:minmax(0,1fr);gap:16px}
  .lib-title{font-size:24px}
  .lib-figure-n{font-size:48px}
  .lib-chip{font-size:14px;padding:0 12px}
}

@media print{
  .lib-filters,.lib-empty{display:none!important}
  .lib-card[hidden]{display:flex!important}
}