/* Bhojpatra · the health library. A thin adapter over the Health Guides v3 sheet (kl-glass.css = journal.css subset):
   every colour, font, radius, glass layer and spacing step is a Guides token (--bg, --paper, --ink, --heading, --rule,
   --gold, --wire, --f-display, --f-read, --f-ui, --r-*, --s-*), so day and night follow the same data-theme contract.
   Glass stays on controls, chips, tiles and plates; paragraphs, evidence, sources and cautions sit on opaque paper. */

/* the golden sheets set a few page-wide names on body.bc-golden; on library pages the Guides' meaning wins
   (as pilot/guides_page.py does for /articles/) */
@layer bc-elements {
  :root body.kl-body.bc-golden { background: var(--bg) !important; color: var(--ink) !important; font: 400 var(--t-m)/1.55 var(--f-ui) !important; }
}
body.kl-body { --rule: inherit; --link: inherit; margin: 0; background: var(--bg); color: var(--ink); }
.kl-body { --kl-bark-a: #F4E9D2; --kl-bark-b: #E7D5B0; --kl-bark-edge: rgba(118, 88, 34, .32); --kl-word: rgba(118, 88, 34, .62); }
:root[data-theme="dark"] .kl-body { --kl-bark-a: #1B3427; --kl-bark-b: #12291F; --kl-bark-edge: rgba(217, 193, 144, .3); --kl-word: rgba(217, 193, 144, .6); }
.kl-page { position: relative; overflow-x: clip; }
.kl-page > main { position: relative; z-index: 1; }
.kl-mast { margin-bottom: 0; }

/* ---------- opening: short, with the search and the first choices on the first phone screen ---------- */
.kl-hero { position: relative; min-height: 0 !important; grid-template-rows: auto !important; padding: var(--s-6) 0 var(--s-5); }
.kl-hero__light { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kl-hero__sun { position: absolute; width: 34rem; height: 34rem; right: -12rem; top: -14rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--amber) / .22), rgb(var(--amber) / 0)); }
:root[data-theme="dark"] .kl-hero__sun { background: radial-gradient(closest-side, rgb(var(--amber) / .12), rgb(var(--amber) / 0)); }
.kl-hero__grid { position: relative; min-width: 0; }
.kl-hero { grid-template-columns: minmax(0, 1fr) !important; }
.kl-hero__copy { max-width: min(40rem, 100%); min-width: 0; width: auto !important; }
.kl-hero__copy > * { max-width: 100%; }
.kl-search { width: 100%; box-sizing: border-box; }
.kl-title { margin: var(--s-4) 0 var(--s-3); font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); max-width: 14ch; }
.kl-deck { margin: 0 0 var(--s-4); max-width: 36rem; font: 400 var(--t-lead)/1.6 var(--f-read); color: var(--ink-2); }
.kl-seal { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font: 400 .95rem/1 "Mukta", serif;
  color: var(--gold-ink); background: var(--bg-deep); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.kl-search { margin-top: var(--s-2); }
.kl-go { width: auto !important; padding: 0 1rem 0 1.1rem !important; gap: .45rem; border-radius: var(--r-pill) !important; display: inline-flex !important; align-items: center; }
.kl-go span { font: 600 var(--t-s)/1 var(--f-ui); letter-spacing: .02em; }
.kl-go svg { width: 1.1rem; height: 1.1rem; }

/* Bhojpatra art: bark leaves on the gold thread, the library's own mark (decorative, aria-hidden) */
.kl-art { position: absolute; right: max(-6rem, calc(50% - 40rem)); top: 1.5rem; width: min(34rem, 60vw); height: auto; opacity: .95; }
.kl-art--hub { top: auto; bottom: -1rem; width: min(30rem, 54vw); opacity: .7; }
.kl-art__bark { fill: url(#kl-bark); stroke: var(--kl-bark-edge); stroke-width: 1; }
.kl-art__line { stroke: var(--kl-bark-edge); stroke-width: 1.2; stroke-linecap: round; fill: none; opacity: .7; }
.kl-art__dash { stroke: var(--kl-bark-edge); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.kl-art__hole { fill: var(--bg); stroke: var(--kl-bark-edge); }
.kl-art__word { font: italic 600 19px var(--f-display); fill: var(--kl-word); }
.kl-art__thread { fill: none; stroke: var(--wire); stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
.kl-art__leaf { filter: drop-shadow(0 10px 14px rgb(var(--shadow-rgb, 38 26 14) / .12)); }
@media (max-width: 47.99rem) {
  .kl-art { width: 15rem; right: -5rem; top: -1rem; opacity: .45; }
  .kl-art--hub { width: 13rem; right: -4rem; bottom: auto; top: 0; opacity: .35; }
  .kl-hero { padding-top: var(--s-4); }
  .kl-deck { font-size: var(--t-m); }
}

.kl-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: var(--s-4) 0 0; font: 400 var(--t-s)/1.45 var(--f-ui); color: var(--ink-2); }
.kl-preview__pill { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 .7rem; border-radius: var(--r-pill);
  font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--alert); background: var(--alert-bg); box-shadow: inset 0 0 0 1px var(--alert-rule); }

/* ---------- section heads ---------- */
.kl-head { margin: 0 0 var(--s-4); }
.kl-h2 { margin: .35rem 0 0; font: 500 clamp(1.9rem, 1.3rem + 2vw, 2.9rem)/1.06 var(--f-display); color: var(--heading); letter-spacing: -.01em; }
.kl-areas, .kl-shelf { margin-top: var(--s-7); }
.kl-finder { margin-top: var(--s-5); }

/* ---------- eight care areas: compact tiles, name in words, count of reads ---------- */
.kl-care { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .kl-care { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kl-tile { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; padding: .9rem .95rem 1rem; min-height: 0; }
.kl-tile .care__main { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; }
.kl-tile .care__main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kl-tile .care__q { font: 600 1.18rem/1.15 var(--f-display); color: var(--heading); }
.kl-tile .care__name { font: 400 var(--t-s)/1.35 var(--f-ui); color: var(--ink-2); }
.kl-tile__n { grid-column: 2; justify-self: start; position: static !important; margin-top: .2rem; }
.kl-tile .ctile__icon { width: 2.6rem; height: 2.6rem; }
.kl-tile:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-halo); }
@media (max-width: 29.99rem) { .kl-tile .care__name { display: none; } .kl-tile { padding: .75rem .8rem; gap: .55rem; } .kl-tile .ctile__icon { width: 2.2rem; height: 2.2rem; } }

/* ---------- reader-task chips and results ---------- */
.kl-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--s-4) 0 0; }
.kl-filters .chip { min-height: 44px; }
.kl-status { min-height: 1.5em; margin: var(--s-3) 0 0; font: 600 var(--t-s)/1.4 var(--f-ui); color: var(--ink-2); }
.kl-results { margin-top: var(--s-3); }
.kl-results__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; margin-bottom: var(--s-4); }
.kl-results__head .kl-h2:focus { outline: none; }
.kl-more-wrap { margin: var(--s-4) 0 0; text-align: center; }
.kl-more, .kl-reset { min-height: 44px; }
.kl-empty { margin-top: var(--s-4); }
.kl-empty h3 { margin: 0; font: 600 var(--t-h3)/1.15 var(--f-display); color: var(--heading); }

/* ---------- the catalogue: the Guides' paper card, no picture ---------- */
.kl-grid { list-style: none; margin: 0; padding: 0; display: grid !important; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)) !important; }
.kl-grid > .gitem { display: block; }
.kl-card { height: 100%; display: flex !important; flex-direction: column; grid-template-columns: none !important; }
.kl-card .gcard__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.05rem 1.15rem 1.1rem !important; height: 100%; }
.kl-card .gcard__title { font-size: 1.36rem; }
.kl-card__s { margin: 0; font: 400 .98rem/1.55 var(--f-read); color: var(--ink-2); }
.kl-card .gcard__meta { margin-top: auto !important; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.kl-card { border-top: 3px solid rgb(var(--tint, var(--amber)) / .75); }
.kl-k { color: var(--gold-ink); }
.kl-hubtags { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.kl-hubtag { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.6rem; padding: 0 .55rem; border-radius: var(--r-pill);
  font: 600 var(--t-xs)/1 var(--f-ui); letter-spacing: .03em; color: var(--ink); background: rgb(var(--tint, var(--amber)) / .12); box-shadow: inset 0 0 0 1px var(--rule); }
.kl-hubtag .dot { flex: none; }
.kl-min { font: 400 var(--t-xs)/1.2 var(--f-ui); color: var(--ink-3); letter-spacing: .02em; }
.kl-row { margin-top: var(--s-6); }
.kl-row__t { display: flex; align-items: center; gap: .6rem; }
.kl-row__t a { color: var(--heading); text-decoration: none; }
.kl-row__t a:hover, .kl-row__t a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- longer reads from the Guides ---------- */
.kl-guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.kl-guide { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 1.1rem; border-radius: var(--r-l); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule); text-decoration: none; color: var(--ink); }
.kl-guide b { font: 600 1.25rem/1.2 var(--f-display); color: var(--heading); }
.kl-guide__k { font: 600 var(--t-xs)/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.kl-guide:hover b, .kl-guide:focus-visible b { text-decoration: underline; text-underline-offset: .2em; }
.kl-guide .dot { align-self: flex-start; }

/* ---------- care-area page ---------- */
.kl-hubhero { overflow: hidden; }
.kl-care-link { margin-top: var(--s-4); min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; }
.kl-care-link svg { width: 1rem; height: 1rem; }
.kl-group { margin-top: var(--s-6); }
.kl-group .hgroup__head { margin-bottom: var(--s-3); }

/* ---------- a read: plate (glass) for the title, paper for everything that is read ---------- */
.kl-ehead { padding-top: var(--s-4); }
.kl-plate { max-width: 52rem; }
.kl-etitle { margin: .4rem 0 .6rem; }
.kl-emeta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0; }
.kl-read { max-width: 52rem; padding-bottom: var(--s-8); }
.kl-answer { margin-top: var(--s-5); }
.kl-answer .answer__text p { font: 400 var(--t-read)/1.7 var(--f-read); color: var(--ink); margin: 0; }
.kl-state { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: var(--s-4) 0; }
.kl-state__more { font: 400 var(--t-s)/1.5 var(--f-ui); color: var(--ink-2); }
.kl-state__more summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: .2em; }
.kl-state__more ul { margin: .4rem 0; padding-left: 1.1rem; }
.kl-state__more code { font-size: .85em; overflow-wrap: anywhere; }
.kl-body-wrap { margin-top: var(--s-4); }
.kl-prose { background: var(--paper); border-radius: var(--r-l); padding: var(--s-2) var(--s-5) var(--s-5); box-shadow: inset 0 0 0 1px var(--rule); }
.kl-prose h2 { margin: var(--s-6) 0 var(--s-2); font: 600 var(--t-h3)/1.15 var(--f-display); color: var(--heading); }
.kl-prose p, .kl-prose li { font: 400 var(--t-read)/1.75 var(--f-read); color: var(--ink); }
.kl-prose .table-wrap { overflow-x: auto; margin: var(--s-3) 0; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--rule); }
.kl-prose table { border-collapse: collapse; width: 100%; font: 400 var(--t-s)/1.5 var(--f-ui); }
.kl-prose th, .kl-prose td { border-bottom: 1px solid var(--rule); padding: .6rem .75rem; text-align: left; vertical-align: top; color: var(--ink); }
.kl-prose th { color: var(--heading); }
.kl-prose mark.todo { background: var(--note-bg, #FBE7A8); color: var(--note-ink, #261F19); padding: 0 .3rem; border-radius: 4px; }
.kl-prose .bc-cite-n, .kl-sources .bc-cite-n { font: 600 .72rem/1 var(--f-ui); }
.kl-occ-h { margin: var(--s-6) 0 var(--s-3); font: 600 var(--t-h3)/1.15 var(--f-display); color: var(--heading); }
.kl-sources { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-l); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.kl-sources ol { margin: 0; padding-left: 1.4rem; font: 400 var(--t-s)/1.6 var(--f-ui); color: var(--ink-2); }
.kl-sources li { margin-bottom: .5rem; overflow-wrap: anywhere; }
.kl-sources a { color: var(--accent); }
.kl-onmain { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-l); background: var(--alert-bg); box-shadow: inset 4px 0 0 var(--alert-rule), inset 0 0 0 1px var(--rule); }
.kl-onmain h2 { margin: 0 0 .5rem; font: 600 var(--t-h3)/1.15 var(--f-display); color: var(--heading); }
.kl-onmain p, .kl-onmain li { font: 400 var(--t-m)/1.6 var(--f-ui); color: var(--ink); }
.kl-onmain__list { margin: .4rem 0; padding-left: 1.2rem; }
.kl-onmain a { color: var(--accent); }
.kl-onmain__book .btn { min-height: 44px; }
.kl-related { margin-top: var(--s-7); }
.kl-related .kl-h2 { margin-bottom: var(--s-4); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.kl-backs { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: var(--s-5); }
.kl-back { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--t-m)/1.2 var(--f-ui); color: var(--accent); }
.kl-foot { margin-top: var(--s-8); }
.kl-foot__mark { font: 400 2rem/1 "Mukta", serif; color: var(--gold); }
.kl-foot__small { font-size: var(--t-s); opacity: .85; }
.kl-main-link { text-decoration-style: dotted; }

/* reused golden blocks keep their own look; their cards sit on the library's paper in both themes */
.kl-golden { font-size: 1rem; }
:root[data-theme="dark"] .kl-golden .g-card, :root[data-theme="dark"] .kl-golden .bc-herb { color-scheme: dark; }

/* static reading mode for reused components: every page of a "book" shows, nothing waits for a swipe or JS;
   first layer so these win over the golden !important rules */
@layer kl-adapt {
  .kl-golden .g-pages { display: block !important; overflow: visible !important; scroll-snap-type: none !important; transform: none !important; }
  .kl-golden .g-page { display: block !important; position: static !important; opacity: 1 !important; transform: none !important; width: auto !important; max-width: none !important; margin: 0 0 14px !important; }
  .kl-golden .g-tome button[data-g-prev], .kl-golden .g-tome button[data-g-next], .kl-golden .g-tome-nav, .kl-golden .g-dots { display: none !important; }
  .kl-golden .bc-herbs { display: grid !important; gap: 16px !important; grid-template-columns: 1fr !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; list-style: none; }
  .kl-golden .bc-herb { position: static !important; transform: none !important; opacity: 1 !important; width: auto !important; max-width: none !important; margin: 0 !important; }
  .kl-golden.entry-content, .kl-golden .bc-step { max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: none !important; }
  .kl-golden .g-stack > .g-stack-i { position: static !important; top: auto !important; }
  .kl-golden .g-stack > .g-stack-i::after { display: none !important; }
  .kl-golden .bc-swipe-hint, .kl-golden [class*="swipe-hint"] { display: none !important; }
  /* the diagram's stage scrolls with the page on phones and at large text, so it never covers the explanation */
  @media (max-width: 47.99rem) { .kl-golden .bc-study__stage { position: relative !important; top: auto !important; } }
  .kl-golden .bc-pairs, .kl-golden .bc-crows, .kl-golden .g-deck { display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; scroll-snap-type: none !important; gap: 14px !important; padding: 0 !important; margin: 12px 0 !important; list-style: none; }
  .kl-golden .bc-pairs > li, .kl-golden .bc-crows > li, .kl-golden .g-deck > * { flex: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; scroll-snap-align: none !important; }
}

/* reduced motion, reduced transparency, forced colours */
@media (prefers-reduced-motion: reduce) { .kl-body *, .kl-body *::before, .kl-body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-transparency: reduce) { .kl-body .glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--paper) !important; } }
@media (forced-colors: active) {
  .kl-card, .kl-tile, .kl-guide, .kl-prose, .kl-sources, .kl-onmain, .kl-hubtag, .kl-preview__pill { border: 1px solid CanvasText; }
  .kl-art { display: none; }
  }

/* the reader head without a hero photo: crumbs, then the plate (no overlap); one column at every width */
.kl-ehead .a-head__wrap { margin-top: 0 !important; }
.kl-ehead .a-plate { display: block !important; }
.kl-ehead .kl-etitle { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); max-width: 22ch; }
/* night: the original source pills and evidence labels keep their meaning with readable contrast */
:root[data-theme="dark"] .kl-golden .bc-cite-k--trad { background: rgba(217, 193, 144, .14) !important; color: #E8D9B2 !important; border-color: rgba(217, 193, 144, .45) !important; }
:root[data-theme="dark"] .kl-golden .bc-ev { background: rgba(217, 193, 144, .16) !important; color: #F2E6C9 !important; }
:root[data-theme="dark"] .kl-golden .bc-cite-n { color: #F6F0E4 !important; }