/* LPB · Lebanon Price Board. "Ink & Brass" from the dollarlb app: one ink hero per page, subject accents,
   quiet surfaces, big tabular Latin numbers. RTL first; numbers stay LTR. */
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/readex-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/readex-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/readex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#F4F5F9; --s1:#FFFFFF; --s2:#EEF0F6; --s3:#E3E6EF;
  --t1:#14151F; --t2:#565B70; --t3:#656A81;
  --line:#E4E6EE; --outline:#C9CCD8; --ctl:#82879D; --on-primary:#FFFFFF;
  --primary:#6645B6; --blue:#3553CC; --link:#3553CC;
  --ink1:#2A1D6E; --ink2:#1C3497; --onink:#FFFFFF; --onink2:#C9CCF2;
  --brass:#E3B877; --brass-d:#8C5E1E;
  --up:#0B7A55; --down:#C2410C; --flat:#7C8197;
  --glow:#5B7BFF; --tint:#E3E8FF; --accent:#3553CC;
  --r-l:22px; --r-m:14px; --r-s:10px;
  --shadow:0 1px 2px rgba(20,21,31,.05),0 6px 24px -12px rgba(28,52,151,.18);
  --font:"Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  color-scheme:light;
}
/* Dark tokens: the visitor's choice (data-theme on <html>) wins over the system setting. */
:root[data-theme=dark]{
  --bg:#0C0F1D; --s1:#161A2B; --s2:#1E2336; --s3:#282E44;
  --t1:#ECEDF5; --t2:#A3A8BF; --t3:#8E94B1;
  --line:#252A3D; --outline:#3A4058; --ctl:#6A7192; --on-primary:#24115E;
  --primary:#B9A6FF; --blue:#9DB0FF; --link:#9DB0FF;
  --ink1:#30227A; --ink2:#1A3488;
  --brass-d:#E3B877;
  --up:#3FD49A; --down:#FF8A5B;
  --tint:#1E2650;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 8px 28px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0C0F1D; --s1:#161A2B; --s2:#1E2336; --s3:#282E44;
  --t1:#ECEDF5; --t2:#A3A8BF; --t3:#8E94B1;
  --line:#252A3D; --outline:#3A4058; --ctl:#6A7192; --on-primary:#24115E;
  --primary:#B9A6FF; --blue:#9DB0FF; --link:#9DB0FF;
  --ink1:#30227A; --ink2:#1A3488;
  --brass-d:#E3B877;
  --up:#3FD49A; --down:#FF8A5B;
  --tint:#1E2650;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 8px 28px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}}

/* subject accents */
.s-usd{--glow:#5B7BFF;--accent:#3553CC;--tint:#E3E8FF}
.s-gold{--glow:#C69A70;--accent:#8C5E1E;--tint:#F6E9D3}
.s-fuel{--glow:#14A38B;--accent:#0E7C69;--tint:#D5F2EC}
.s-gen{--glow:#F0A23B;--accent:#A85B00;--tint:#FCEBD2}
.s-syp{--glow:#2FA36B;--accent:#1D7A4E;--tint:#D9F1E4}
.s-fx{--glow:#9B6BFF;--accent:#6645B6;--tint:#ECE7FA}
.s-fx2{--glow:#E0527F;--accent:#B02A59;--tint:#FBE1EA}
:root[data-theme=dark] .s-usd{--accent:#9DB0FF;--tint:#1E2650}:root[data-theme=dark] .s-gold{--accent:#E3B877;--tint:#2E2414}:root[data-theme=dark] .s-fuel{--accent:#4FD6BC;--tint:#10302B}:root[data-theme=dark] .s-gen{--accent:#FFC170;--tint:#33240F}:root[data-theme=dark] .s-syp{--accent:#6FDCA3;--tint:#12301F}:root[data-theme=dark] .s-fx{--accent:#C8B6FF;--tint:#271F4D}:root[data-theme=dark] .s-fx2{--accent:#FF8DB0;--tint:#3A1726}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .s-usd{--accent:#9DB0FF;--tint:#1E2650}:root:not([data-theme=light]) .s-gold{--accent:#E3B877;--tint:#2E2414}:root:not([data-theme=light]) .s-fuel{--accent:#4FD6BC;--tint:#10302B}:root:not([data-theme=light]) .s-gen{--accent:#FFC170;--tint:#33240F}:root:not([data-theme=light]) .s-syp{--accent:#6FDCA3;--tint:#12301F}:root:not([data-theme=light]) .s-fx{--accent:#C8B6FF;--tint:#271F4D}:root:not([data-theme=light]) .s-fx2{--accent:#FF8DB0;--tint:#3A1726}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t1);font:400 16px/1.65 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
img,svg{display:block;max-width:100%}
h1,h2,h3{line-height:1.25;margin:0;font-weight:600;letter-spacing:-.01em}
h2{font-size:1.15rem}
p{margin:0}
table{border-collapse:collapse}
[dir=ltr]{unicode-bidi:isolate}
.wrap{width:100%;max-width:1040px;margin-inline:auto;padding-inline:16px}
.muted{color:var(--t2)}
.small{font-size:.85rem}
/* Hidden above the top (not pushed sideways: in RTL "start" is the right edge and would widen the page). */
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--s1);color:var(--t1);padding:8px 12px;border-radius:8px;z-index:9}
.skip:focus{top:8px}

/* header */
.top{background:var(--s1);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.logo{display:flex;align-items:center;gap:10px;color:var(--t1);text-decoration:none}
.mark{width:36px;height:36px}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text b{font-size:1.15rem;letter-spacing:.04em}
.logo-text small{color:var(--t2);font-size:.75rem}
.langs{display:flex;gap:4px}
.langs a{font-size:.85rem;color:var(--t2);text-decoration:none;padding:6px 10px;border-radius:999px;border:1px solid var(--line)}
.langs a:hover{color:var(--t1);border-color:var(--outline)}
.tabs{border-top:1px solid var(--line)}
.tabs-row{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-block:4px}
.tabs-row::-webkit-scrollbar{display:none}
.tabs a{flex:none;color:var(--t2);text-decoration:none;font-size:.92rem;padding:8px 12px;border-radius:10px;white-space:nowrap}
.tabs a:hover{color:var(--t1);background:var(--s2)}
.tabs a.on{color:var(--primary);background:var(--s2);font-weight:600}

/* app bar (Android only, revealed before paint) */
.appbar{background:linear-gradient(90deg,var(--ink1),var(--ink2));color:var(--onink)}
.appbar-row{display:flex;align-items:center;gap:12px;padding-block:8px}
.appbar img{border-radius:10px;flex:none}
.appbar p{flex:1;display:flex;flex-direction:column;line-height:1.3;font-size:.85rem;color:var(--onink2)}
.appbar p b{color:var(--onink);font-size:.95rem}
.appbar .x{background:none;border:0;color:var(--onink2);font-size:1.5rem;line-height:1;padding:4px 6px;cursor:pointer}

/* breadcrumbs */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0;padding:0;font-size:.85rem;color:var(--t2)}
.crumbs li+li::before{content:"/";margin-inline-end:6px;color:var(--t3)}
.crumbs a{color:var(--t2);text-decoration:none}
.crumbs a:hover{color:var(--t1);text-decoration:underline}

main{padding-bottom:56px}
main>*+*,main>div>*+*,.article>*+*{margin-top:24px}
@media (min-width:760px){main>*+*,main>div>*+*,.article>*+*{margin-top:32px}}
main>.blurb,main>.faq,main>.appcta{margin-top:40px}
@media (min-width:760px){main>.blurb,main>.faq,main>.appcta{margin-top:56px}}

/* hero: the ink board */
.hero{position:relative;overflow:hidden;margin-top:20px;border-radius:var(--r-l);padding:26px 22px 22px;color:var(--onink);
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--glow) 42%,transparent),transparent 60%),linear-gradient(135deg,var(--ink1),var(--ink2));
  box-shadow:var(--shadow)}
[dir=rtl] .hero{background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--glow) 42%,transparent),transparent 60%),linear-gradient(225deg,var(--ink1),var(--ink2))}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:rgba(255,255,255,.16)}
.hero-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.hero h1{font-size:clamp(1.25rem,2.6vw + .6rem,1.9rem);font-weight:600}
.hero-slim{padding-block:20px}
.stamp{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--onink2)}
.live{width:8px;height:8px;border-radius:50%;background:#3FD49A;box-shadow:0 0 0 3px rgba(63,212,154,.22)}
.stamp.stale .live{background:#F0A23B;box-shadow:0 0 0 3px rgba(240,162,59,.25)}
.board{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.board-4{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.board-4{grid-template-columns:repeat(4,1fr)}}
.cell{display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;border-radius:var(--r-m);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-top:2px solid var(--brass)}
.lbl{font-size:.85rem;color:var(--onink2)}
.num{font-size:clamp(1.7rem,5.5vw,2.9rem);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;direction:ltr;text-align:start}
[dir=rtl] .num{text-align:right}
.board-4 .num{font-size:clamp(1.3rem,4vw,1.9rem)}
.num-sm{font-size:clamp(1.05rem,3.2vw,1.35rem)}
.unit{font-size:.8rem;color:var(--onink2)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:18px}
.official{font-size:.88rem;color:var(--onink2)}
.official b{color:var(--onink);font-weight:600}
.hero-q{margin-top:16px;font-size:.82rem;color:var(--onink2);max-width:65ch}
.hero-q a{color:var(--brass)}
.hero .empty{margin-top:16px;color:var(--onink)}

/* change badge */
.delta{display:inline-flex;align-items:center;gap:5px;font-size:.88rem;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--onink)}
.delta.up .arr{color:#3FD49A}.delta.down .arr{color:#FF8A5B}.delta.flat .arr{color:var(--onink2);font-size:.6rem}
.delta .vs{color:var(--onink2)}
.chg{font-size:.78rem;margin-inline-start:4px;font-variant-numeric:tabular-nums}
.chg.up{color:var(--up)}.chg.down{color:var(--down)}.chg.flat{color:var(--flat)}

/* tiles: colored, one per subject */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:760px){.tiles{gap:16px}}
@media (min-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--r-m);text-decoration:none;color:var(--t1);
  background:linear-gradient(160deg,var(--tint),var(--s1) 85%);border:1px solid var(--line);overflow:hidden}
.tile::after{content:"";position:absolute;inset-block:12px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--accent)}
.tile:hover{border-color:var(--accent)}
.t-lbl{font-size:.82rem;color:var(--t2)}
.t-num{font-size:1.35rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent);direction:ltr}
[dir=rtl] .t-num{text-align:right}
.t-sub{font-size:.78rem;color:var(--t3)}

/* cards */
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;box-shadow:var(--shadow)}
@media (min-width:760px){.card{padding:26px 28px}}
.card>h2{margin-bottom:16px}
.more{margin-top:14px;font-size:.9rem}
.chart-box{color:var(--accent)}
.chart-box{max-width:820px;margin-inline:auto}
.chart{width:100%;height:auto;overflow:visible;direction:ltr}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .line{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round}
.chart .area{fill:currentColor;opacity:.09}
.chart .dot{fill:currentColor;stroke:var(--s1);stroke-width:2}
.chart text{font:500 17px var(--font);fill:var(--t2);direction:ltr}
.chart .mark{fill:var(--t1);font-weight:600}

/* tables */
.table-wrap{overflow-x:auto;margin-inline:-4px}
.t{width:100%;font-size:.95rem}
.t th,.t td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.t thead th{font-size:.8rem;color:var(--t2);font-weight:500;border-bottom-color:var(--outline)}
.t tbody th{font-weight:500}
.t td{font-variant-numeric:tabular-nums;white-space:nowrap}
[dir=rtl] .t td[dir=ltr]{text-align:right}
.t tr:last-child>*{border-bottom:0}
.t a{text-decoration:none}
.t a:hover{text-decoration:underline}
.t-fx .flag{display:inline-block;width:1.4em}
.t-fx small{color:var(--t3)}

/* converter + calculators */
.conv{border-top:3px solid var(--blue)}
.calc{border-top:3px solid var(--accent)}
.conv-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:end}
@media (min-width:640px){.conv-grid{grid-template-columns:1fr auto 1fr}.calc .conv-grid{grid-template-columns:1fr 1fr}}
.swap{display:none;color:var(--t3);font-size:1.4rem;padding-bottom:12px}
@media (min-width:640px){.swap{display:block}}
.field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--t2)}
.input-wrap{display:flex;align-items:center;background:var(--s2);border:1px solid var(--outline);border-radius:var(--r-s)}
.input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.input-wrap input{flex:1;min-width:0;background:none;border:0;padding:12px;font:600 1.25rem var(--font);color:var(--t1);font-variant-numeric:tabular-nums;outline:none}
.input-wrap b{padding-inline:12px;color:var(--t3);font-size:.85rem;font-weight:500}
select{font:500 1rem var(--font);color:var(--t1);background:var(--s2);border:1px solid var(--outline);border-radius:var(--r-s);padding:12px}
.check{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:.9rem;color:var(--t2)}
.conv-note{margin-top:14px;font-size:.82rem}
.calc-out{margin-top:14px;font-size:1.05rem}
.calc-out b{font-size:1.6rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}

/* buttons, chips, links */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:999px;background:var(--primary);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;white-space:nowrap}
.btn-brass{background:var(--brass);color:#2A1D00}
.btn-ghost{background:transparent;color:var(--t1);border:1px solid var(--outline)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.chips a{display:inline-block;padding:7px 12px;border-radius:999px;background:var(--s2);color:var(--t1);text-decoration:none;font-size:.9rem}
.chips a:hover{background:var(--s3)}
.links{margin:0;padding-inline-start:20px}
.links li+li{margin-top:6px}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.92rem}

/* app call to action */
.appcta{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:22px;border-radius:var(--r-l);
  background:linear-gradient(120deg,color-mix(in srgb,var(--brass) 28%,var(--s1)),var(--s1) 70%);border:1px solid var(--line)}
.appcta img{border-radius:16px}
.appcta h2{font-size:1.05rem}
.appcta p{font-size:.9rem;color:var(--t2);margin-top:4px}
.play{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:12px;background:#0B0D14;color:#fff;text-decoration:none}
.play svg{width:24px;height:24px}
.play span{display:flex;flex-direction:column;line-height:1.15}
.play small{font-size:.68rem;opacity:.8}
.play b{font-size:1rem}
@media (min-width:640px){.appcta{grid-template-columns:64px 1fr auto}.play{grid-column:auto}}

/* ad slot: reserved, labelled */
.ad{min-height:120px;padding:8px;border-radius:var(--r-m);background:var(--s2);text-align:center}
.ad-label{display:block;font-size:.7rem;color:var(--t3);margin-bottom:4px}

/* prose: guides, blurbs, pages */
.prose{max-width:70ch;font-size:1.02rem}
.prose>*+*{margin-top:1em}
.prose h2{font-size:1.3rem;margin-top:1.6em}
.prose h3{font-size:1.1rem;margin-top:1.3em}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li+li{margin-top:.35em}
.prose table{width:100%;font-size:.92rem;display:block;overflow-x:auto}
.prose th,.prose td{padding:8px;border-bottom:1px solid var(--line);text-align:start}
.prose th{color:var(--t2);font-weight:500}
.prose blockquote{margin-inline:0;padding:10px 14px;border-inline-start:3px solid var(--brass);background:var(--s2);border-radius:8px}
.blurb{padding:4px 2px}
.article{margin-top:20px}
.article-head h1{font-size:clamp(1.5rem,3vw + .6rem,2.2rem);max-width:30ch}
.article-head p{margin-top:8px}

/* guides list */
.guide-list{display:grid;gap:16px}
@media (min-width:760px){.guide-list{grid-template-columns:1fr 1fr}}
.guide-card{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r-l);background:var(--s1);border:1px solid var(--line);color:var(--t1);text-decoration:none}
.guide-card:hover{border-color:var(--primary)}
.guide-card h2{font-size:1.08rem;color:var(--primary)}
.guide-card p{color:var(--t2);font-size:.92rem}

/* faq */
.faq h2{margin-bottom:16px}
.faq details{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-m);padding:0 16px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--t3);font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq .prose{padding-bottom:14px;font-size:.96rem;color:var(--t2)}

/* footer */
.foot{background:var(--s1);border-top:1px solid var(--line);padding-top:36px;font-size:.9rem}
.foot-grid{display:grid;gap:28px}
@media (min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.foot nav{display:flex;flex-direction:column;gap:6px}
.foot nav a{color:var(--t2);text-decoration:none}
.foot nav a:hover{color:var(--t1);text-decoration:underline}
.foot-brand{font-size:1rem;margin-bottom:6px}
.foot p+p{margin-top:6px}
.copy{color:var(--t3);font-size:.8rem;padding-block:20px}

/* error page */
.err{min-height:80vh;display:flex;flex-direction:column;justify-content:center;gap:12px}
.err-code{font-size:4rem;font-weight:700;color:var(--primary);line-height:1}
.err-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.top,.appbar,.ad,.appcta,.foot,.tabs{display:none}}

/* theme switch */
.top-tools{display:flex;align-items:center;gap:8px}
.theme-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--t2);cursor:pointer;padding:0}
.theme-btn:hover{color:var(--t1);border-color:var(--outline)}
.theme-btn svg{width:18px;height:18px;display:none}
.theme-btn[data-mode=auto] .i-auto,.theme-btn[data-mode=light] .i-light,.theme-btn[data-mode=dark] .i-dark{display:block}

/* interactive charts */
.chart-box{position:relative}
.chart{cursor:crosshair;touch-action:pan-y;outline-offset:6px}
.chart .hover-line{stroke:var(--t3);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.chart .hover-dot{fill:var(--s1);stroke:currentColor;stroke-width:3}
.chart-tip{position:absolute;z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 12px;border-radius:12px;background:var(--t1);color:var(--bg);box-shadow:0 8px 24px -8px rgba(0,0,0,.35);white-space:nowrap}
.chart-tip b{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.chart-tip span{font-size:.75rem;opacity:.75}
.chart-tip[hidden]{display:none}

/* chart cards with range buttons */
.chart-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.chart-head h2{margin:0}
.range{display:inline-flex;padding:3px;border-radius:999px;background:var(--s2);gap:2px}
.range button{font:500 .82rem var(--font);color:var(--t2);background:none;border:0;padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.range button:hover{color:var(--t1)}

.chart-box[hidden]{display:none}
.chart-hint{margin-top:8px;text-align:center}
@media (hover:none){.chart-hint{display:block}}

/* costs: a rise is bad news (fuel, generator), so it reads in the warning colour */
.cost .chg.up{color:var(--down)}.cost .chg.down{color:var(--up)}

/* section tabs on phones: fade the edges so the scroll is obvious */
@media (max-width:759px){
  .tabs-row{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);padding-inline:12px}
}
@media (max-width:600px){.chart text{font-size:26px}.chart .mark{font-size:28px}}

/* touch targets: at least ~40px tall on phones */
@media (pointer:coarse){
  .range button{min-height:38px;padding-inline:14px}
  .foot nav a{padding-block:8px}
  .chips a{padding-block:10px}
  .crumbs a{display:inline-block;padding-block:6px}
}

/* "how long ago": a small pill after the update time */
.stamp{flex-wrap:wrap}
.ago{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.12);color:var(--onink);font-weight:500;white-space:nowrap}
.stamp.stale .ago{background:rgba(240,162,59,.22)}

/* ===== Design pass ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Everything around the board is quieter: hairline cards, no shared shadow, so only the board has depth. */
.card,.guide-card{box-shadow:none}
.hero{box-shadow:0 18px 40px -22px rgba(28,52,151,.55),0 2px 6px -2px rgba(20,21,31,.15)}

/* guide meta: labelled pairs instead of a dotted string */
.meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 0}
.meta div{display:flex;gap:6px}
.meta dt{font-weight:400}
.meta dd{margin:0;color:var(--t1)}

/* ===== Accessibility pass (WCAG 2.1 AA) ===== */
/* 1.4.11: control borders >= 3:1 against the card and the field in both themes */
.input-wrap,select{border-color:var(--ctl)}
/* 1.4.11: the chosen period is a solid fill, not a 1.1:1 tint */
.range button[aria-pressed=true]{background:var(--primary);color:var(--on-primary);box-shadow:none;font-weight:600}
/* 1.4.10 reflow at 320px: inputs and board cells may shrink, two-up boards stack on very narrow screens */
.conv-grid>*{min-width:0}
.input-wrap input{width:100%}
.cell{min-width:0}
@media (max-width:360px){.board:not(.board-4){grid-template-columns:1fr}}
/* 2.5.5: 44px targets on touch screens */
@media (pointer:coarse){.range button{min-height:44px}.theme-btn{width:44px;height:44px}}
/* Month archive summary: one sentence per line, airy */
.summary p{margin:0 0 .9rem;line-height:1.85}.summary p:last-child{margin-bottom:0}