/* Layout: one calm column, sticky top bar, fixed bottom tabs. The zodiac dial on Home is the one bold element. */
:root {
  --bg: #F1F2F8;
  --surface: #FFFFFF;
  --surface2: #E8EAF4;
  --ink: #1A1C33;
  --muted: #565A78;
  --line: #D6D9EA;
  --brand: #2D3080;
  --on-brand: #FFFFFF;
  --gold: #C27B0A;
  --gold-text: #86500A;
  --jy: #3C40A0;
  --va: #9A4A2C;
  --line2: #B9BEDB;
  --moon: #E9E6F5;
  --sky: none;
  --stars: 0;
  --good: #1B7547;
  --good-bg: #DCF2E5;
  --warn: #8F5600;
  --warn-bg: #FAEACB;
  --bad: #AC2F1C;
  --bad-bg: #FADCD6;
  --shadow: 0 1px 2px rgba(26, 28, 51, .06), 0 4px 14px rgba(26, 28, 51, .06);
  --display: "Tiro Devanagari Sanskrit", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif Devanagari", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0C1F; --surface: #121538; --surface2: #1B1F4D; --ink: #ECE9F6; --muted: #A6AACB; --line: #2A2F66;
    --brand: #C7CAFF; --on-brand: #15173D; --gold: #F2B84B; --gold-text: #F2B84B; --jy: #A9ADFF; --va: #E69A72; --line2: #3A4180; --stars: .55; --moon: #E9E6F5; --sky: radial-gradient(130% 55% at 50% -8%, #232A78 0%, rgba(10,12,31,0) 62%), radial-gradient(90% 30% at 50% 108%, rgba(242,184,75,.12) 0%, rgba(10,12,31,0) 70%);
    --good: #55D68F; --good-bg: #16382A; --warn: #F0B04A; --warn-bg: #3B2E12; --bad: #FF8070; --bad-bg: #44201B;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0C1F; --surface: #121538; --surface2: #1B1F4D; --ink: #ECE9F6; --muted: #A6AACB; --line: #2A2F66;
  --brand: #C7CAFF; --on-brand: #15173D; --gold: #F2B84B; --gold-text: #F2B84B; --jy: #A9ADFF; --va: #E69A72; --line2: #3A4180; --stars: .55; --moon: #E9E6F5; --sky: radial-gradient(130% 55% at 50% -8%, #232A78 0%, rgba(10,12,31,0) 62%), radial-gradient(90% 30% at 50% 108%, rgba(242,184,75,.12) 0%, rgba(10,12,31,0) 70%);
  --good: #55D68F; --good-bg: #16382A; --warn: #F0B04A; --warn-bg: #3B2E12; --bad: #FF8070; --bad-bg: #44201B;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sky), var(--bg); background-attachment: fixed; color: var(--ink); font: 16px/1.55 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 96px; min-height: 100vh;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--stars, 0); background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 80px, #cfd4ff, transparent), radial-gradient(1.4px 1.4px at 160px 20px, #ffe9b8, transparent), radial-gradient(1px 1px at 230px 120px, #fff, transparent), radial-gradient(1px 1px at 60px 170px, #cfd4ff, transparent), radial-gradient(1.2px 1.2px at 190px 210px, #fff, transparent), radial-gradient(1px 1px at 280px 40px, #ffe9b8, transparent), radial-gradient(1px 1px at 310px 190px, #cfd4ff, transparent); background-size: 340px 250px; }
.wrap { position: relative; z-index: 1; }
.wrap { max-width: 680px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; max-width: 65ch; }
a { color: var(--brand); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
b { font-weight: 650; }

/* top bar */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg);
  display: flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 1px solid var(--line);
  margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
}
.top .ttl { flex: 1; min-width: 0; font-family: var(--display); font-size: 1.1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 12px; color: var(--ink); }
.ib:active { background: var(--surface2); }
.ib svg { width: 22px; height: 22px; }

/* bottom nav */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 4px max(8px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
}
.nav button { background: none; border: 0; padding: 6px 0 4px; display: grid; justify-items: center; gap: 2px; font-size: .72rem; color: var(--muted); min-height: 52px; border-radius: 12px; }
.nav button svg { width: 24px; height: 24px; }
.nav button[aria-current="page"] { color: var(--brand); font-weight: 650; }
.nav button[aria-current="page"] svg { color: var(--gold); }

main { padding-block: 18px 12px; display: grid; gap: 18px; }
section { display: grid; gap: 10px; min-width: 0; }
.sub { color: var(--muted); font-size: .92rem; }
.eyebrow { color: var(--muted); font-size: .85rem; }

/* cards and rows */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); min-width: 0; }
.list { display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; min-height: 56px; min-width: 0;
}
.row:active { background: var(--surface2); }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-weight: 600; display: block; }
.row .s { color: var(--muted); font-size: .88rem; display: block; }
.row .go { color: var(--muted); flex: none; }
.dot { font-variant-emoji: text; width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 650; background: var(--surface2); color: var(--ink); }
.dot.jy { background: color-mix(in srgb, var(--jy) 16%, var(--surface)); color: var(--jy); }
.dot.va { background: color-mix(in srgb, var(--va) 16%, var(--surface)); color: var(--va); }
.dot.ok { background: var(--good-bg); color: var(--good); }
.chip { display: inline-block; font-size: .75rem; padding: 2px 9px; border-radius: 99px; background: var(--surface2); color: var(--muted); white-space: nowrap; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--brand); color: var(--on-brand); font-weight: 650; text-decoration: none; }
.btn.sec { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.block { width: 100%; }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.btn:disabled { opacity: .5; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: flex; background: var(--surface2); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; min-height: 40px; border: 0; background: none; border-radius: 9px; color: var(--muted); font-weight: 600; padding: 0 8px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg button.jy[aria-pressed="true"] { color: var(--jy); }
.seg button.va[aria-pressed="true"] { color: var(--va); }

/* forms */
label.f { display: grid; gap: 4px; font-size: .88rem; color: var(--muted); min-width: 0; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; min-height: 46px; width: 100%; min-width: 0;
}
textarea { padding: 10px 12px; min-height: 90px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form .full { grid-column: 1 / -1; }

/* home */
.hero { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 6px 0 2px; }
.hero svg { width: min(78vw, 280px); height: auto; }
.hero .greet { font-family: var(--display); font-size: 1.5rem; }
.today { display: grid; gap: 4px; }
.rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ringcard { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 14px 8px; }
.ringcard svg { width: 84px; height: 84px; }
.ringcard .pct { font-family: var(--display); font-weight: 600; }
.fact { font-family: var(--display); font-size: 1.05rem; line-height: 1.45; }

/* lesson */
.lhead { display: grid; gap: 6px; }
.lhead .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prose { display: grid; gap: 10px; min-width: 0; }
.prose p { margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 1.25em; display: grid; gap: 6px; }
.prose h3 { margin-top: 10px; }
.note { background: var(--warn-bg); color: var(--ink); border-radius: 12px; padding: 12px 14px; font-size: .94rem; border-left: 4px solid var(--gold); }
.key { background: var(--surface2); border-radius: 12px; padding: 12px 14px; }
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface2); font-weight: 650; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; }

details.acc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
details.acc summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; cursor: pointer; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 1.3rem; }
details.acc[open] summary::after { content: "–"; }
details.acc .t { font-weight: 650; }
details.acc .s { color: var(--muted); font-size: .85rem; }
details.acc .sm { display: grid; min-width: 0; }
dl.kv { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 6px 10px; margin: 0; padding: 4px 14px 14px; font-size: .92rem; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* quiz */
.qbar { height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.qbar i { display: block; height: 100%; background: var(--gold); }
.opts { display: grid; gap: 8px; }
.opt { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 52px; }
.opt.right { background: var(--good-bg); border-color: var(--good); }
.opt.wrong { background: var(--bad-bg); border-color: var(--bad); }
.opt:disabled { color: inherit; }
.q { font-family: var(--display); font-size: 1.2rem; }
.score { font-family: var(--display); font-size: 2.6rem; text-align: center; }

/* flashcard */
.fc { min-height: 240px; display: grid; place-items: center; text-align: center; padding: 22px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); width: 100%; }
.fc .big { font-family: var(--display); font-size: 1.45rem; line-height: 1.3; }
.fc .hint { color: var(--muted); font-size: .85rem; margin-top: 10px; }
.fc.back { background: var(--surface2); }
.fc .big.sm { font-size: 1.1rem; font-family: var(--body); line-height: 1.5; }

/* charts, wheel */
.chartbox { display: grid; gap: 10px; justify-items: center; }
.chartbox svg { width: min(100%, 340px); height: auto; }
.hs { fill: transparent; stroke: none; cursor: pointer; }
.hs:hover, .hs.sel { fill: color-mix(in srgb, var(--gold) 28%, transparent); }
.cl { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.hn { font: 600 14px var(--body); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.sn { font: 11px var(--body); fill: var(--muted); text-anchor: middle; pointer-events: none; }
.info { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: .94rem; min-height: 96px; }
.info b.h { font-family: var(--display); font-size: 1.05rem; display: block; margin-bottom: 4px; }
.sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, 64px); gap: 4px; width: min(100%, 340px); }
.sc { background: var(--surface); border: 1px solid var(--ink); display: grid; place-items: center; text-align: center; padding: 2px; line-height: 1.15; font-size: .78rem; color: var(--ink); min-width: 0; }
.sc b { font-size: 1rem; }
.sc.sel { background: color-mix(in srgb, var(--gold) 30%, var(--surface)); }
.sc.lg { background: var(--surface2); }
.sc.mid { grid-area: 2 / 2 / 4 / 4; border: 0; background: none; color: var(--muted); font-size: .85rem; }
.wsec { stroke: var(--bg); stroke-width: 1.5; cursor: pointer; }
.wsec.main { fill: color-mix(in srgb, var(--gold) 26%, var(--surface)); }
.wsec.sub { fill: var(--surface2); }
.wsec.sel { fill: var(--gold); }
.wsec.ideal { fill: var(--good); } .wsec.ok { fill: var(--warn); } .wsec.avoid { fill: var(--bad); }
.wtxt { font: 600 12px var(--body); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.wsec.ideal + .wtxt, .wsec.ok + .wtxt, .wsec.avoid + .wtxt, .wsec.sel + .wtxt { fill: var(--bg); }

/* misc */
.tl { display: grid; gap: 6px; }
.tl .seg-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: .92rem; min-width: 0; }
.tl .seg-row.cur { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.tl .seg-row.bad { border-left: 4px solid var(--bad); }
.tl .seg-row.good { border-left: 4px solid var(--good); }
.big-num { font-family: var(--display); font-size: 1.6rem; }
.empty { text-align: center; color: var(--muted); padding: 24px 8px; }
.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-size: .9rem; z-index: 40; max-width: 90vw; }
.ck { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ck .q2 { font-weight: 600; }
.compass { display: grid; justify-items: center; gap: 8px; }
.compass svg { width: min(78vw, 280px); height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .fc { transition: transform .18s ease; }
  .fc:active { transform: scale(.985); }
  .qbar i { transition: width .25s ease; }
}
@media (min-width: 700px) { body { font-size: 17px; } }

/* ===== Drishti layer 2 ===== */
:root { --gold-soft: color-mix(in srgb, var(--gold) 22%, transparent); }
h1, h2 { letter-spacing: .005em; }
h1 { font-size: 1.75rem; }
.top { backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 82%, transparent); }
.card, .row { border-color: var(--line); }
.row:active, .btn:active { transform: scale(.992); }
.btn { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent) inset; }
.dot.va { background: color-mix(in srgb, var(--va) 18%, var(--surface)); }
.dv { font-family: var(--display); font-size: 1.75rem; color: var(--gold-text); letter-spacing: .02em; }

/* dial */
.dial { overflow: visible; filter: drop-shadow(0 0 18px rgba(242, 184, 75, .12)); }
.dial .mk circle { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.dial .mk text { fill: #1a1c33; font-family: var(--body); }
.dial .mk.moon circle { fill: var(--moon); }
.dial .sep { stroke: var(--line2); }
.dial .dt { stroke: var(--muted); }
.dial .ds { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .dial:not(.still) .ds { stroke-dashoffset: 1; animation: ddraw 1.3s cubic-bezier(.4, .1, .2, 1) forwards; }
  .dial:not(.still) .ds.d2 { animation-delay: .15s; } .dial:not(.still) .ds.d3 { animation-delay: .3s; } .dial:not(.still) .ds.d4 { stroke-dashoffset: 1; animation: ddraw .7s ease forwards; }
  .dial:not(.still) .dt { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ddraw .5s ease forwards; }
  .dial:not(.still) .dtx { opacity: 0; animation: dfade .6s ease forwards; }
  .dial:not(.still) .mk { transform-origin: 120px 120px; opacity: 0; animation: dsweep 1.9s cubic-bezier(.16, .8, .2, 1) 1.1s forwards; }
  .dial:not(.still) .mk.moon { animation-delay: 1.4s; animation-name: dsweepm; }
  @keyframes ddraw { to { stroke-dashoffset: 0; } }
  @keyframes dfade { to { opacity: 1; } }
  @keyframes dsweep { from { transform: rotate(-150deg); opacity: 0; } 20% { opacity: 1; } to { transform: rotate(0); opacity: 1; } }
  @keyframes dsweepm { from { transform: rotate(210deg); opacity: 0; } 20% { opacity: 1; } to { transform: rotate(0); opacity: 1; } }
  main.in-f { animation: inF .24s cubic-bezier(.2, .8, .2, 1); }
  main.in-b { animation: inB .24s cubic-bezier(.2, .8, .2, 1); }
  main.in-t { animation: inT .2s ease; }
  @keyframes inF { from { opacity: 0; transform: translateX(18px); } }
  @keyframes inB { from { opacity: 0; transform: translateX(-18px); } }
  @keyframes inT { from { opacity: 0; transform: translateY(6px); } }
  .ringcard svg circle:last-child { animation: rgrow 1s cubic-bezier(.3, .6, .2, 1) both; }
  @keyframes rgrow { from { stroke-dasharray: 0 214; } }
  .opt.right { animation: opop .35s ease; }
  .opt.wrong { animation: oshake .35s ease; }
  @keyframes opop { 40% { transform: scale(1.025); } }
  @keyframes oshake { 20% { transform: translateX(-5px); } 55% { transform: translateX(5px); } 85% { transform: translateX(-2px); } }
  .sheet { animation: sheetUp .28s cubic-bezier(.2, .8, .2, 1); }
  .shbg { animation: fadeIn .2s ease; }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
  @keyframes fadeIn { from { opacity: 0; } }
  .mls { transition: fill .15s ease; }
}

/* panchanga */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 1px; min-width: 0; }
.pc .k { color: var(--muted); font-size: .8rem; }
.pc b { font-family: var(--display); font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.pc .s { color: var(--muted); font-size: .8rem; }

/* moon lab */
.mlbox { justify-items: center; }
.mlbox > * { width: 100%; }
#ml-svg { width: min(100%, 360px); height: auto; margin: 0 auto; display: block; cursor: grab; }
.mls { fill: color-mix(in srgb, var(--surface2) 80%, var(--surface)); stroke: var(--bg); stroke-width: 1; }
.mls:nth-of-type(3n+1) { fill: color-mix(in srgb, var(--jy) 14%, var(--surface)); }
.mls.on { fill: var(--gold); }
.mln { fill: var(--muted); pointer-events: none; font-family: var(--body); }
.mls.on + * { }
#ml-svg text { pointer-events: none; }
input[type=range] { padding: 0; min-height: 36px; accent-color: var(--gold); }
.kvg { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 6px 10px; font-size: .92rem; }
.kvg span { color: var(--muted); } .kvg b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* glossary pop-up */
.gl { border-bottom: 1.5px dotted var(--gold); cursor: help; }
.gl:focus-visible { outline-offset: 1px; }
.sheetwrap { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; }
.shbg { position: absolute; inset: 0; background: rgba(5, 6, 20, .55); }
.sheet { position: relative; background: var(--surface); border-top: 1px solid var(--gold); border-radius: 20px 20px 0 0; padding: 10px max(18px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); display: grid; gap: 10px; max-width: 680px; width: 100%; margin: 0 auto; box-shadow: 0 -12px 40px rgba(0, 0, 0, .35); }
.sheet p { margin: 0; }
.grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line2); margin: 0 auto 4px; }

/* sources box */
.refbody { padding: 0 14px 14px; display: grid; gap: 8px; }
.refbody h3 { font-size: .98rem; margin-top: 4px; }
.refbody ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: .92rem; }
.refbody p { margin: 0; }
.refs { margin-top: -6px; }
.refbody .chip { justify-self: start; }