/* 🫧 macro.html page concept "Bubble lab" (Audi 2026-10-17 picked A from three rendered concepts).
   Every box is a glass beaker on the shared sky: clear glass edge + a highlight down the left side.
   Indicator cards and dials hold a layer of liquid at the bottom, tinted by status (green calm · amber watch · red warning);
   cards that warn have a few bubbles rising slowly in that liquid only (never across text). Light theme = clear lab glass in daylight.
   Motion stops with the site pause button and prefers-reduced-motion. */
:is(.sg-box,article.ic,article.ec,.dial,figure.fig,section.act,.econ,.howto){position:relative;isolation:isolate;overflow:hidden}
:is(article.ic,article.ec,.dial){border-radius:18px 18px 30px 30px!important;--liq:rgba(120,170,255,.32)}
article.ic.ok{--liq:rgba(74,222,128,.30)}
:is(article.ic.hot,article.ec.bad){--liq:rgba(248,113,113,.46)}
article.ic.lv2{--liq:rgba(251,191,36,.40)}
/* liquid + bubbles share ::before (finance-family.css uses ::after for the left accent stripe on .ic) */
body :is(article.ic,article.ec,.dial)::before{content:'';position:absolute;left:0;right:0;bottom:0;top:auto;height:24px;z-index:-1;pointer-events:none;
  border-top:1px solid color-mix(in srgb,var(--liq) 70%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--liq) 40%,transparent),var(--liq) 60%)}
body :is(article.ic.hot,article.ec.bad)::before{
  background:radial-gradient(3px 3px at 18% 50%,rgba(255,255,255,.65),transparent) 0 100%/100% 200% no-repeat,radial-gradient(2.5px 2.5px at 46% 50%,rgba(255,255,255,.6),transparent) 0 100%/100% 200% no-repeat,
    radial-gradient(4px 4px at 72% 50%,rgba(255,255,255,.55),transparent) 0 100%/100% 200% no-repeat,radial-gradient(2px 2px at 88% 50%,rgba(255,255,255,.6),transparent) 0 100%/100% 200% no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--liq) 40%,transparent),var(--liq) 60%);
  animation:mlBub 6s linear infinite}
@keyframes mlBub{from{background-position:0 220%,0 260%,0 240%,0 280%,0 0}to{background-position:0 -120%,0 -80%,0 -100%,0 -60%,0 0}}
html[data-motion=paused] :is(article.ic,article.ec)::before{animation:none}
@media (prefers-reduced-motion:reduce){:is(article.ic,article.ec)::before{animation:none}}
/* 🌙 night lab */
html:not([data-theme=light]) :is(.sg-box,article.ic,article.ec,.dial,figure.fig,section.act,.econ,.howto){
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 45%),rgba(10,16,30,.62)!important;border:1px solid rgba(160,200,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 6px 0 14px -10px rgba(255,255,255,.4),0 20px 40px -24px rgba(0,0,0,.8)!important}
/* ☀️ day lab */
html[data-theme=light] :is(.sg-box,article.ic,article.ec,.dial,figure.fig,section.act,.econ,.howto){
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(240,248,255,.88))!important;border:1px solid #b9d3ee!important;
  box-shadow:inset 6px 0 14px -10px #fff,0 14px 30px -20px rgba(30,70,120,.35)!important}
html[data-theme=light] article.ic.ok{--liq:rgba(11,122,79,.22)}
html[data-theme=light] :is(article.ic.hot,article.ec.bad){--liq:rgba(184,50,31,.22)}
html[data-theme=light] article.ic.lv2{--liq:rgba(161,92,7,.22)}
html[data-theme=light] :is(article.ic,article.ec,.dial){--liq:rgba(29,111,165,.16)}

/* leave room for the liquid so the footer line never sits in it */
body :is(article.ic,article.ec,.dial){padding-bottom:calc(1rem + 26px)!important}
/* dial liquid = how many indicators warn: half or more red · some amber · none green */
.dial.lq-hot{--liq:rgba(248,113,113,.46)}.dial.lq-warm{--liq:rgba(251,191,36,.40)}.dial.lq-calm{--liq:rgba(74,222,128,.32)}
html[data-theme=light] .dial.lq-hot{--liq:rgba(184,50,31,.22)}html[data-theme=light] .dial.lq-warm{--liq:rgba(161,92,7,.22)}html[data-theme=light] .dial.lq-calm{--liq:rgba(11,122,79,.22)}
/* market strip (Audi 2026-10-17: "8bit 16bit อยู่ไม่ตรงตำแหน่งป่ะ"): the pixel sprite sat above the label in 2 of 6 tiles and
   pushed their numbers down; it now sits in the top-right corner of its tile so every label/number/chart lines up */
.mk-strip .mk{position:relative}
.mk-strip .mk [data-ak-px]{position:absolute;top:8px;right:10px;line-height:0}
.mk-strip .mk [data-ak-px] svg{width:26px;height:26px}
.mk-strip .mk-px>span:first-child{display:block;padding-right:34px}

/* 🕰️ past bubbles strip */
.pb{margin:18px 0 6px;padding:18px 20px;border-radius:18px}
html:not([data-theme=light]) .pb{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 45%),rgba(10,16,30,.62);border:1px solid rgba(160,200,255,.28)}
html[data-theme=light] .pb{background:linear-gradient(160deg,#fff,#f0f8ff);border:1px solid #b9d3ee}
.pb h3{margin:0;font:700 1.15rem Mitr,sans-serif}.pb-s{margin:4px 0 12px;font-size:.86rem;opacity:.85}
.pb-rows{display:grid;gap:10px}
.pb-r{display:grid;grid-template-columns:64px minmax(0,1fr) 52px minmax(0,1.3fr);align-items:center;gap:6px 14px}
.pb-r>b{font:700 .95rem Mitr,sans-serif}.pb-r small{font-size:.84rem;line-height:1.4}
.pb-t{position:relative;height:12px;border-radius:999px}
html:not([data-theme=light]) .pb-t{background:rgba(255,255,255,.1)}html[data-theme=light] .pb-t{background:#e3e7ef}
.pb-t i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:#8a94a8}
.pb-t i.t-r{background:#f0857a}.pb-t i.t-a{background:#e8cf6a}
.pb-r.now .pb-t i{background:linear-gradient(90deg,#c59738,#f0d28c)}
.pb-t u{position:absolute;top:-4px;bottom:-4px;width:2px;background:#f0d28c;translate:-1px 0}
.pb small.t-r{color:#f0857a}.pb small.t-a{color:#e8cf6a}
html[data-theme=light] .pb small.t-r{color:#b8321f}html[data-theme=light] .pb small.t-a{color:#a15c07}html[data-theme=light] .pb-t u{background:#a8781e}
.pb-v{font:700 .95rem Outfit,sans-serif;text-align:right}
.pb-n{margin:12px 0 0;font-size:.82rem;opacity:.85}
@media (max-width:640px){.pb-r{grid-template-columns:52px minmax(0,1fr) 44px}.pb-r small{grid-column:1/-1}}
/* the i button now holds 'ใช้ดู' + 'อ่านยังไง': make it findable */
.ic-btn[data-more]{font-weight:700;border-color:rgba(229,197,134,.55)!important;color:#E5C586!important}
html[data-theme=light] .ic-btn[data-more]{border-color:#c9a14e!important;color:#8a5a12!important}
.ic-btn[data-more]::after{content:' อ่านวิธีดู';font-size:.72rem;font-weight:600;margin-left:2px}
.ic-btn[data-more]{display:inline-flex!important;align-items:center;gap:4px;white-space:nowrap;font-style:normal!important;padding:0 .7rem!important}
.ic-btn[data-more]::after{font-style:normal}
/* light: status colour on the big number stays (the light adapter had turned pale red/green into plain ink) */
html[data-theme=light] article.ic.hot .ic-v,html[data-theme=light] article.ec.bad .ic-v{color:#b8321f!important}
html[data-theme=light] article.ic.lv2 .ic-v{color:#a15c07!important}
html[data-theme=light] article.ic.ok .ic-v{color:#0b7a4f!important}
html[data-theme=light] article.ic.ic.lv2 .ic-v{color:#a15c07!important}
.pb-r{grid-template-columns:86px minmax(0,1fr) 52px minmax(0,1.3fr)}
@media (max-width:640px){.pb-r{grid-template-columns:76px minmax(0,1fr) 44px}}