/* Bottom sheets, shared by the app (index.html) and the Explore connections page (graph/index.html), so both look
   and behave the same. Each page defines the colours (--sheet, --leaf, --leaf-edge, --ink, --ink-soft, --vermilion),
   fonts (--ui, --tamil) and the pulli kolam image (--kolam) on :root, and adds its own rules after this file.
   Open a sheet by adding .on (and .on to .scrim for the dimmed backdrop). */
.scrim{position:fixed;inset:0;background:rgba(20,14,6,.45);z-index:9;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--sheet);border-radius:18px 18px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px));max-height:82%;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .25s ease;max-width:36rem;margin:0 auto}
.sheet.on{transform:none}
.sheet h2{font-family:var(--ui);font-weight:500;font-size:1.05rem;margin:0 0 14px}
@media (prefers-reduced-motion:reduce){.sheet,.scrim{transition:none}}

/* Reading text inside a sheet (About and sources, chapter notes, the graph's guide and details) */
.about{overflow-y:auto;margin:0 -20px;padding:0 20px;font-size:.9rem;line-height:1.6}
.about p{margin:0 0 14px;color:var(--ink-soft)}
.about dl{margin:0}
.about dt{font-weight:500;color:var(--ink);margin-top:12px}
.about dd{margin:2px 0 0;color:var(--ink-soft)}
.about a{color:var(--vermilion)}
.about a:focus-visible{outline:2px solid var(--vermilion);outline-offset:2px}
.about .note{margin-top:18px;font-size:.82rem}
.about h3{margin:22px 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vermilion)}
.about h3:first-child{margin-top:4px}
.about code{font:.88em/1 ui-monospace,Consolas,monospace;padding:2px 5px;border-radius:5px;background:color-mix(in srgb,var(--leaf-edge) 35%,transparent);white-space:nowrap}
.about [lang="ta"]{font-family:var(--tamil);font-size:.86rem;line-height:1.8}

/* .sheet-kolam on a sheet: a faint pulli kolam peeking in from the bottom-right corner (About and sources, the
   graph's sheet). Not plain .kolam: the app already uses that class for the small divider under each kural
   (36 px, hidden on small phones), and on a sheet it shrank About to a 36 px box (live for a few hours, 2026-11-11). */
.sheet-kolam{overflow:hidden}
.sheet-kolam::before{content:'';position:absolute;z-index:-1;pointer-events:none;right:0;bottom:0;width:min(70vw,360px);aspect-ratio:1;transform:translate(35%,30%);background:var(--ink-soft);opacity:.08;
  -webkit-mask:var(--kolam) center/contain no-repeat;mask:var(--kolam) center/contain no-repeat}