/* macro.html · Web Standard v2 layer (2026-10-25, Audi: "ทำให้ออกมาในรูปแบบสไตล์การทำเว็ปเราแบบอัปเดตสกิลแล้ว").
   Loaded last. Tokens from ak-ui.css. Stage 1 = base only: capsule tabs (same language as the finance zone bar A),
   no box inside a box (group wrappers become labelled zones; the indicator cards inside stay the key-data boxes). */

/* tabs = colour-group capsules; the open tab fills with its colour */
html[data-theme] body.ff-macro .mb-tabs:not(#a){background:none!important;padding:.6rem 0!important}
html[data-theme] body.ff-macro .mb-tabs .seg:not(#a){display:inline-flex!important;gap:6px!important;padding:5px!important;border:0!important;border-radius:999px!important;background:rgba(8,15,30,.82)!important;box-shadow:inset 0 0 0 1px rgba(229,197,134,.18),0 10px 24px -14px rgba(0,0,0,.6)!important;backdrop-filter:blur(8px)}
html[data-theme] body.ff-macro .mb-tabs .seg button:not(#a){--g:var(--aku-primary);min-height:38px!important;padding:6px 16px!important;border:0!important;border-radius:999px!important;background:color-mix(in srgb,var(--g) 12%,transparent)!important;color:rgb(232,238,252)!important;box-shadow:none!important;font:600 .95rem/1.2 var(--aku-font-body)!important;transition:background 200ms,color 200ms,translate 200ms}
html[data-theme] body.ff-macro .mb-tabs .seg button[data-tab=rotation]:not(#a){--g:rgb(96,165,250)}
html[data-theme] body.ff-macro .mb-tabs .seg button[data-tab=sectors]:not(#a){--g:rgb(52,211,153)}
html[data-theme] body.ff-macro .mb-tabs .seg button:not(#a):hover{translate:0 -1px;background:color-mix(in srgb,var(--g) 26%,transparent)!important}
html[data-theme] body.ff-macro .mb-tabs .seg button.on:not(#a),html[data-theme] body.ff-macro .mb-tabs .seg button[aria-selected=true]:not(#a){background:var(--g)!important;color:rgb(8,15,30)!important;box-shadow:0 0 16px color-mix(in srgb,var(--g) 45%,transparent)!important}
html[data-theme=light] body.ff-macro .mb-tabs .seg:not(#a){background:rgba(255,255,255,.92)!important;box-shadow:inset 0 0 0 1px rgba(20,47,73,.12),0 8px 20px -12px rgba(20,35,60,.3)!important}
html[data-theme=light] body.ff-macro .mb-tabs .seg button:not(#a){color:var(--aku-text)!important;background:color-mix(in srgb,var(--g) 14%,transparent)!important}
html[data-theme=light] body.ff-macro .mb-tabs .seg button.on:not(#a),html[data-theme=light] body.ff-macro .mb-tabs .seg button[aria-selected=true]:not(#a){color:rgb(8,15,30)!important}

/* no box inside a box: group wrappers and the checklist / economy frames become boxless zones */
html[data-theme] body.ff-macro :is(.sg-box,.act,.econ):not(#a){border:0!important;background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
html[data-theme] body.ff-macro :is(.sg-box,.act,.econ):not(#a){margin-top:2rem!important;padding-top:1rem!important;border-top:1px solid color-mix(in srgb,var(--aku-line) 55%,transparent)!important}
html[data-theme] body.ff-macro .sg-box .subgrp:not(#a){font-size:1.15rem}

/* folded how-to (was an always-open box of 3 steps) */
html[data-theme] body.ff-macro details.howto:not(#a){border:0!important;background:none!important;padding:0!important;margin:.4rem 0 .8rem!important}
html[data-theme] body.ff-macro details.howto:not(#a)>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--aku-primary) 14%,transparent);color:var(--aku-text);font:600 .88rem/1.3 var(--aku-font-body)}
html[data-theme] body.ff-macro details.howto:not(#a)>summary::-webkit-details-marker{display:none}
html[data-theme] body.ff-macro details.howto:not(#a)>summary::after{content:"เปิด ▾";font-weight:600;font-size:.78rem;opacity:.8}
html[data-theme] body.ff-macro details.howto[open]:not(#a)>summary::after{content:"ปิด ▴"}
html[data-theme] body.ff-macro details.howto:not(#a) ol{margin:.6rem 0 0 1.1rem;color:var(--aku-copy)}

/* the Fed-funds / real-yield strip now sits inside the economy block */
html[data-theme] body.ff-macro .econ #grid-info:not(#a){margin-top:1rem}

/* rotation: the scatter is the one chart kept (bar list retired 2026-10-25) → full width */
html[data-theme] body.ff-macro .rot-grid:not(#a){grid-template-columns:minmax(0,1fr)!important}
html[data-theme] body.ff-macro details.howto.ec-i:not(#a){border-top:0!important;box-shadow:none!important}

/* muted inks lifted to the v2 copy tokens: the old dim grey was 3.7:1 on the cards (contrast_pixels 2026-10-25) */
html:not([data-theme=light]) body.ff-macro{--text-dim:var(--aku-copy);--text-muted:var(--aku-copy)}
html[data-theme=light] body.ff-macro{--text-dim:var(--aku-copy);--text-muted:var(--aku-copy)}

/* status chips keep their meaning colour but are inked per theme (the fixed red and dark green read 2.8–3.9:1) */
html:not([data-theme=light]) body.ff-macro :is(.st,.ec-lv,.sg-box .subgrp span[style],.ic-v small):not(#a){color:color-mix(in srgb,var(--lc,currentColor) 58%,rgb(255,255,255))!important}
html[data-theme=light] body.ff-macro :is(.st,.ec-lv,.sg-box .subgrp span[style],.ic-v small):not(#a){color:color-mix(in srgb,var(--lc,currentColor) 48%,rgb(0,0,0))!important}
html[data-theme=light] body.ff-macro details.more>summary:not(#a){color:var(--aku-text)!important}
html[data-theme=light] body.ff-macro .sg-box .subgrp span[style]:not(#a):not(#b){color:color-mix(in srgb,var(--lc,currentColor) 38%,rgb(0,0,0))!important}
/* chart label halos: dark halo only at night; daytime halo is white (light-theme scatter names smeared, 2026-10-25) */
html[data-theme=light] body.ff-macro :is(#rot-quad .q-name,#rot-path .q-name,#dual-chart .dl):not(#a){stroke:rgb(255,255,255)!important;stroke-width:3.5px}
html[data-theme=light] body.ff-macro #dual-chart .dl:not(#a){fill:rgb(110,72,6)!important}
html[data-theme] body.ff-macro #hm-legend span[style*="cc5a55"]:not(#a){color:rgb(0,0,0)!important}

/* ── stage 3 (Audi 2026-10-25: "ทำขั้น 3 เลย") ───────────────────────────────────────────────
   Indicator cards = compact rows (identity · value · where it sits vs history · trend · status); the full card opens in a
   dialog (core §3b-8/9: compact first, reasons behind a press; a detail adds what the row lacks). */
html[data-theme] body.ff-macro .sg-box .grid:not(#a){display:flex!important;flex-direction:column;gap:8px!important;grid-template-columns:none!important}
html[data-theme] body.ff-macro .sg-box article.ic:not(#a){display:grid!important;grid-template-columns:minmax(0,250px) 150px minmax(0,1fr) minmax(0,220px) 118px;grid-template-areas:"h v r s st";align-items:center;column-gap:18px;min-height:0!important;height:auto!important;padding:12px 16px 12px 18px!important;border-radius:14px!important;cursor:pointer;transition:translate 180ms var(--aku-ease),box-shadow 180ms}
html[data-theme] body.ff-macro .sg-box article.ic:not(#a)::before,html[data-theme] body.ff-macro .sg-box article.ic:not(#a)::after{display:none!important}
html[data-theme] body.ff-macro .sg-box article.ic:not(#a):hover{translate:0 -2px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--lc) 70%,transparent),0 12px 26px -14px rgba(0,0,0,.6)!important}
html[data-theme] body.ff-macro .sg-box article.ic .ic-h:not(#a){display:contents}
html[data-theme] body.ff-macro .sg-box article.ic .ic-h>div:not(#a){grid-area:h;min-width:0}
html[data-theme] body.ff-macro .sg-box article.ic .ic-h h3:not(#a){margin:0;font-size:1.02rem;line-height:1.3}
html[data-theme] body.ff-macro .sg-box article.ic .ic-sub:not(#a){margin:2px 0 0;font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html[data-theme] body.ff-macro .sg-box article.ic .st:not(#a){grid-area:st;justify-self:end}
html[data-theme] body.ff-macro .sg-box article.ic .ic-v:not(#a){grid-area:v;margin:0!important;font-size:1.7rem!important;line-height:1.1;white-space:nowrap}
html[data-theme] body.ff-macro .sg-box article.ic .rail:not(#a){grid-area:r;margin:0!important}
html[data-theme] body.ff-macro .sg-box article.ic .rail-e:not(#a){margin-top:2px}
html[data-theme] body.ff-macro .sg-box article.ic .spark:not(#a){grid-area:s;width:100%;height:34px;margin:0!important}
html[data-theme] body.ff-macro .sg-box article.ic :is(.delta,.verdict,.ic-f,.ic-more):not(#a){display:none!important}
/* a row with no rail keeps its verdict as the third column */
html[data-theme] body.ff-macro .sg-box article.ic:not(:has(.rail)) .verdict:not(#a){display:block!important;grid-area:r;margin:0;font-size:.85rem}
@media(max-width:760px){
  html[data-theme] body.ff-macro .sg-box article.ic:not(#a){grid-template-columns:1fr auto;grid-template-areas:"h st" "v s" "r r";row-gap:8px;column-gap:12px}
  html[data-theme] body.ff-macro .sg-box article.ic .spark:not(#a){width:120px;justify-self:end}
}
/* the detail dialog shows the whole original card */
html body .mc-dlg:not(#a){position:fixed;inset:0;margin:auto!important;border:0;padding:16px!important;background:transparent!important;max-width:min(600px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 40px);overflow:visible;color:var(--aku-text)}
html body .mc-dlg .mc-in:not(#a){max-height:calc(100dvh - 72px);overflow:auto}
.mc-dlg::backdrop{background:rgba(4,8,18,.62);backdrop-filter:blur(3px)}
.mc-dlg .mc-in{position:relative;border-radius:20px;padding:22px 22px 26px;background:linear-gradient(180deg,rgb(24,40,66),rgb(14,26,46));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--lc,var(--aku-primary)) 65%,transparent),0 30px 60px -20px rgba(0,0,0,.7)}
html[data-theme=light] .mc-dlg .mc-in{background:linear-gradient(180deg,rgb(255,255,255),rgb(244,248,252));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--lc,var(--aku-primary)) 60%,transparent),0 24px 48px -20px rgba(20,35,60,.35)}
.mc-dlg .mc-x{position:absolute;top:-16px;right:-16px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:var(--aku-primary);color:rgb(48,30,4);font:700 1.1rem/1 var(--aku-font-body);box-shadow:0 4px 12px rgba(0,0,0,.4)}
html[data-theme] body .mc-dlg article.ic:not(#a):not(#b){display:block!important;border:0!important;background:none!important;box-shadow:none!important;padding:0!important;cursor:default}
.mc-dlg article.ic::before,.mc-dlg article.ic::after{display:none!important}
.mc-dlg article.ic .ic-more{display:block!important}
.mc-dlg article.ic .ic-btn{display:none}
.mc-dlg .spark{width:100%;height:80px}
html[data-theme] body .mc-dlg article.ic .ic-btn:not(#a):not(#b){display:none!important}
html body .mc-dlg .mc-in:not(#a){overflow:visible}
html body .mc-dlg .mc-body:not(#a){max-height:calc(100dvh - 110px);overflow:auto}
html[data-theme=light] body.ff-macro .fine a:not(#a){color:rgb(110,72,6)!important}

/* infographics move (Audi 2026-10-25: "เวลาทำinfographicอยากให้มันมีanimationด้วย ไม่เอาแข็งทื่อ").
   macro-v2.js adds .mc-run when a block scrolls into view. Keyframes animate FROM a start state TO the real value
   (inline width/left), so the value never depends on the animation. Off for reduced motion and the pause button. */
@keyframes mcGrow{from{width:0}}
@keyframes mcSlide{from{left:2%;opacity:.2}}
@keyframes mcPop{from{opacity:0;transform:scale(.4)}}
@keyframes mcFade{from{opacity:0}}
@keyframes mcDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mc-run .seg-lv{transform-box:fill-box;transform-origin:center;animation:mcPop 520ms cubic-bezier(.2,.9,.3,1.2) both}
.mc-run svg a:nth-of-type(2) .seg-lv{animation-delay:60ms}.mc-run svg a:nth-of-type(3) .seg-lv{animation-delay:120ms}.mc-run svg a:nth-of-type(4) .seg-lv{animation-delay:180ms}
.mc-run svg a:nth-of-type(5) .seg-lv{animation-delay:240ms}.mc-run svg a:nth-of-type(6) .seg-lv{animation-delay:300ms}.mc-run svg a:nth-of-type(7) .seg-lv{animation-delay:360ms}
.mc-run svg a:nth-of-type(8) .seg-lv{animation-delay:420ms}
.mc-run .pb-t i{animation:mcGrow 1100ms cubic-bezier(.2,.8,.2,1) both}
.mc-run .pb-r:nth-child(2) .pb-t i{animation-delay:120ms}.mc-run .pb-r:nth-child(3) .pb-t i{animation-delay:240ms}.mc-run .pb-r:nth-child(4) .pb-t i{animation-delay:360ms}
.mc-run .pb-t u{animation:mcFade 500ms 900ms both}
.mc-run .rail-t b{animation:mcSlide 1000ms cubic-bezier(.2,.8,.2,1) both}
.mc-run svg [data-mc-draw]{stroke-dasharray:1;animation:mcDraw 1400ms cubic-bezier(.4,0,.2,1) both}
.mc-run svg [data-mc-fill]{animation:mcFade 900ms 500ms both}
.mc-run #rot-quad .q-pt{transform-box:fill-box;transform-origin:center;animation:mcPop 600ms cubic-bezier(.2,.9,.3,1.2) both}
.mc-run #rot-quad .q-pt:nth-of-type(odd){animation-delay:120ms}
@media(prefers-reduced-motion:reduce){.mc-run *{animation:none!important}}
html[data-motion=paused] .mc-run *{animation:none!important}