/*
  Economy Desk — Theme B
  Independent editorial/market-card design layer inspired by modern finance dashboards.
  Theme A remains ui.css authority. This file is active only when html[data-layout="b"].
*/
html[data-layout="b"]{
  --b-card-radius:14px;
  --b-panel-shadow:0 8px 24px rgba(31,56,80,.075);
  --b-card-shadow:0 4px 14px rgba(31,56,80,.055);
}
html[data-layout="b"][data-theme="light"]{
  --bg:#f4f7fb;--panel:#ffffff;--panel2:#f7f9fc;--line:#e1e7ee;--text:#12243a;--muted:#748497;
  --shadow:var(--b-panel-shadow);
}
html[data-layout="b"] body{background:var(--bg)}
html[data-layout="b"] .topbar{height:66px;border-bottom:1px solid var(--line);box-shadow:none}
html[data-layout="b"][data-theme="light"] .topbar{background:rgba(255,255,255,.97)}
html[data-layout="b"] .brand img{width:38px;height:38px}
html[data-layout="b"] .brand b{font-size:14px}
html[data-layout="b"] .brand small{font-size:9px}
html[data-layout="b"] .desk-tabs{top:66px;min-height:48px;gap:26px;background:color-mix(in srgb,var(--panel) 96%,transparent);box-shadow:0 3px 12px rgba(20,45,70,.025)}
html[data-layout="b"] .desk-tabs button{min-height:48px;font-size:11px;font-weight:720}
html[data-layout="b"] .market-ticker{background:var(--bg);border-bottom:0;padding-block:8px 3px}
html[data-layout="b"] .ticker-track{gap:9px;padding-block:4px}
html[data-layout="b"] .ticker-item{border:0;border-radius:12px;background:var(--panel);box-shadow:var(--b-card-shadow);padding:10px 11px;min-height:70px}
html[data-layout="b"] .ticker-item strong{font-size:16px;letter-spacing:-.02em}
html[data-layout="b"] .ticker-item span,html[data-layout="b"] .ticker-item small{font-size:8px}
html[data-layout="b"] .ticker-customize-btn{border:0;background:var(--panel);box-shadow:var(--b-card-shadow);border-radius:9px}
html[data-layout="b"] .shell{padding-top:22px}

/* hero: finance newsroom, image-led but still editorial */
html[data-layout="b"] .hero-pro{margin-top:8px;grid-template-columns:minmax(0,.92fr) minmax(520px,1.35fr);grid-template-areas:"copy media" "side media";gap:14px 18px;min-height:390px;padding:14px;border:0;border-radius:18px;background:var(--panel);box-shadow:var(--b-panel-shadow)}
html[data-layout="b"] .hero-pro:after{display:none}
html[data-layout="b"] .hero-copy{align-self:end;padding:18px 22px 4px!important}
html[data-layout="b"] .hero-copy .eyebrow{font-size:9px;margin-bottom:8px}
html[data-layout="b"] .hero h1,html[data-layout="b"][data-theme="light"] .hero h1{font-size:clamp(31px,2.7vw,44px);line-height:1.22;letter-spacing:-.02em}
html[data-layout="b"] .hero-copy .lead{font-size:12px;line-height:1.8;max-width:690px;margin-top:10px}
html[data-layout="b"] .hero-media{min-height:390px;border-radius:14px}
html[data-layout="b"] .hero-side{padding:0 22px 18px;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:8px}
html[data-layout="b"] .hero-status,html[data-layout="b"] .hero-signal{min-height:76px;border:1px solid var(--line);background:var(--panel2);border-radius:10px}
html[data-layout="b"] .hero-signal strong{font-size:18px}

/* section system */
html[data-layout="b"] .priority-markets-block,html[data-layout="b"] .geo-watch-block,html[data-layout="b"] .overview-visuals,html[data-layout="b"] .section-block{margin-top:14px}
html[data-layout="b"] .section-block,html[data-layout="b"] .visual-panel,html[data-layout="b"] .chart-card,html[data-layout="b"] .editor-card{
  border:0;border-radius:16px;background:var(--panel);box-shadow:var(--b-panel-shadow);padding:17px;
}
html[data-layout="b"] .section-head{margin-bottom:12px}
html[data-layout="b"] .section-head h2,html[data-layout="b"] .visual-head h2{font-size:16px;letter-spacing:-.01em}
html[data-layout="b"] .section-head .micro{font-size:8px}
html[data-layout="b"] .eyebrow,html[data-layout="b"] .visual-kicker{font-size:9px;letter-spacing:.08em}

/* finance cards */
html[data-layout="b"] .priority-market-grid{gap:9px}
html[data-layout="b"] .priority-card,html[data-layout="b"] .indicator-card,html[data-layout="b"] .fx-card,html[data-layout="b"] .pulse-card,html[data-layout="b"] .official-rate-card,html[data-layout="b"] .geo-card,html[data-layout="b"] .source-card,html[data-layout="b"] .tool-card{
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:var(--b-card-radius);background:var(--panel);box-shadow:var(--b-card-shadow);
}
html[data-layout="b"] .priority-card{min-height:142px;padding:13px;border-top-width:1px}
html[data-layout="b"] .priority-card[data-tone="up"]{box-shadow:inset 0 3px 0 color-mix(in srgb,var(--good) 80%,transparent),var(--b-card-shadow)}
html[data-layout="b"] .priority-card[data-tone="down"]{box-shadow:inset 0 3px 0 color-mix(in srgb,var(--bad) 80%,transparent),var(--b-card-shadow)}
html[data-layout="b"] .priority-card[data-tone="warn"],html[data-layout="b"] .priority-card[data-tone="stale"]{box-shadow:inset 0 3px 0 color-mix(in srgb,var(--warn) 78%,transparent),var(--b-card-shadow)}
html[data-layout="b"] .priority-icon{width:34px;height:34px;border-radius:9px;background:var(--panel2)}
html[data-layout="b"] .priority-card>strong{font-size:24px}
html[data-layout="b"] .priority-card footer{border-top-color:color-mix(in srgb,var(--line) 72%,transparent)}
html[data-layout="b"] .indicator-grid{gap:9px}
html[data-layout="b"] .indicator-card{min-height:180px;padding:14px}
html[data-layout="b"] .indicator-card:hover,html[data-layout="b"] .indicator-card.selected{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 10px 26px rgba(31,56,80,.10)}
html[data-layout="b"] .big-number bdi{font-size:30px}
html[data-layout="b"] .geo-watch-grid{gap:9px}
html[data-layout="b"] .geo-card{padding:13px}
html[data-layout="b"] .geo-card header{border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}

/* editor alerts + movement: newsroom cards */
html[data-layout="b"] .overview-visuals{grid-template-columns:.92fr 1.25fr;gap:12px}
html[data-layout="b"] .overview-alert{border:0;border-radius:10px;background:var(--panel2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 75%,transparent);padding:11px}
html[data-layout="b"] .movement-card{border-radius:11px}
html[data-layout="b"] .live-pill{border-radius:5px;padding:4px 7px}

/* table flavor: compact white market grid, fixed hierarchy */
html[data-layout="b"] .country-table,html[data-layout="b"] .news-table{border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:none}
html[data-layout="b"] .country-head,html[data-layout="b"] .news-head{background:#f6f8fb;color:#697a8e;border-bottom:1px solid var(--line);font-size:8px;font-weight:800;letter-spacing:.04em}
html[data-layout="b"] .country-row,html[data-layout="b"] .news-row{background:var(--panel);border-top:1px solid #edf1f5}
html[data-layout="b"] .country-row:hover,html[data-layout="b"] .news-row:hover{background:#f8faff}
html[data-layout="b"] .country-row strong{font-size:13px}
html[data-layout="b"] .news-title strong{font-size:12px}
html[data-layout="b"] .news-title small{font-size:9px}
html[data-layout="b"] .news-row.has-image .news-visual{border-radius:9px}

/* secondary controls: clean rectangular finance UI */
html[data-layout="b"] .feed-tabs button,html[data-layout="b"] .country-quick-tabs button,html[data-layout="b"] .rate-quick-tabs button,html[data-layout="b"] .geo-news-tabs button,html[data-layout="b"] .source-quick-tabs button{
  border-radius:6px;min-height:32px;background:var(--panel2);border-color:transparent;font-size:10px;
}
html[data-layout="b"] .feed-tabs button.active,html[data-layout="b"] .country-quick-tabs button.active,html[data-layout="b"] .rate-quick-tabs button.active,html[data-layout="b"] .geo-news-tabs button.active,html[data-layout="b"] .source-quick-tabs button.active{
  background:color-mix(in srgb,var(--accent) 10%,var(--panel))!important;border-color:color-mix(in srgb,var(--accent) 34%,var(--line))!important;color:var(--text)!important;box-shadow:inset 0 -2px 0 var(--accent)!important;
}
html[data-layout="b"] .settings-panel{border-radius:14px;box-shadow:0 18px 55px rgba(25,50,75,.16)}
html[data-layout="b"] .layout-switch{background:#eef3f8;border-color:#dae3eb}
html[data-layout="b"] .layout-switch button.active{background:#fff}
html[data-layout="b"] .analysis-phase{box-shadow:var(--b-panel-shadow)}
html[data-layout="b"] .analysis-phase-grid article{border:0;background:var(--panel2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 78%,transparent)}

html[data-layout="b"][data-theme="dark"]{--b-panel-shadow:none;--b-card-shadow:none}
html[data-layout="b"][data-theme="dark"] .country-head,html[data-layout="b"][data-theme="dark"] .news-head{background:#111b25;color:var(--muted)}
html[data-layout="b"][data-theme="dark"] .country-row:hover,html[data-layout="b"][data-theme="dark"] .news-row:hover{background:#14212c}
html[data-layout="b"][data-theme="dark"] .layout-switch{background:var(--panel2);border-color:var(--line)}
html[data-layout="b"][data-theme="dark"] .layout-switch button.active{background:var(--panel)}

@media(max-width:1100px){
  html[data-layout="b"] .hero-pro{grid-template-columns:1fr 1fr;min-height:350px}
  html[data-layout="b"] .hero-media{min-height:350px}
}
@media(max-width:820px){
  html[data-layout="b"] .hero-pro{grid-template-columns:1fr;grid-template-areas:"media" "copy" "side";padding:10px}
  html[data-layout="b"] .hero-media{min-height:260px}
  html[data-layout="b"] .hero-copy{padding:10px 7px 0!important}
  html[data-layout="b"] .hero-side{padding:0 7px 8px;grid-template-columns:1fr}
  html[data-layout="b"] .overview-visuals{grid-template-columns:1fr}
}
@media(max-width:720px){
  html[data-layout="b"] .topbar{height:62px}
  html[data-layout="b"] .desk-tabs{top:62px}
  html[data-layout="b"] .hero-pro{border-radius:13px}
  html[data-layout="b"] .section-block,html[data-layout="b"] .visual-panel{border-radius:13px;padding:13px}
  html[data-layout="b"] .ticker-item{border-radius:10px}
}

/* S9-U — balanced priority-market card rhythm */
html[data-layout="b"] .priority-market-grid{grid-template-columns:repeat(7,minmax(0,1fr));align-items:stretch}
html[data-layout="b"] .priority-card{height:100%}
@media(max-width:1320px){html[data-layout="b"] .priority-market-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:920px){html[data-layout="b"] .priority-market-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){html[data-layout="b"] .priority-market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:390px){html[data-layout="b"] .priority-market-grid{grid-template-columns:1fr}}

/* S9-W — Theme B hero metrics: concise finance-card treatment */
html[data-layout="b"] .hero-side{grid-template-columns:150px minmax(0,1fr);gap:8px}
html[data-layout="b"] .hero-status,html[data-layout="b"] .hero-signal.compact{border:1px solid #e8edf2;background:#fff;box-shadow:none;border-radius:9px}
html[data-layout="b"] .hero-signal.compact.up{box-shadow:inset 0 2px 0 color-mix(in srgb,var(--good) 70%,transparent)}
html[data-layout="b"] .hero-signal.compact.down{box-shadow:inset 0 2px 0 color-mix(in srgb,var(--bad) 70%,transparent)}
html[data-layout="b"] .hero-media figcaption{inset-inline:14px;bottom:12px}
html[data-layout="b"] .hero-media figcaption span{font-size:10px}
html[data-layout="b"][data-theme="dark"] .hero-status,html[data-layout="b"][data-theme="dark"] .hero-signal.compact{background:var(--panel2);border-color:var(--line)}
@media(max-width:820px){html[data-layout="b"] .hero-side{grid-template-columns:1fr}}

/* S9-Y — hero status spacing refinement */
html[data-layout="b"] .hero-side{grid-template-columns:178px minmax(0,1fr)}
html[data-layout="b"] .hero-status{padding-inline:14px!important}
html[data-layout="b"] .hero-status>strong{font-size:13px;letter-spacing:-.01em}
html[data-layout="b"] .hero-status>small{font-size:6.8px}
@media(max-width:820px){html[data-layout="b"] .hero-side{grid-template-columns:1fr}}

/* S9-AB — Theme B phone spacing */
@media(max-width:540px){
  html[data-layout="b"] .topbar{height:60px!important;min-height:60px!important}
  html[data-layout="b"] .desk-tabs{top:60px!important}
  html[data-layout="b"] .hero-pro{padding:8px!important;gap:10px!important}
  html[data-layout="b"] .hero-media{min-height:225px!important}
  html[data-layout="b"] .hero-copy{padding:8px 4px 0!important}
  html[data-layout="b"] .hero-copy .lead{font-size:11px;line-height:1.65}
  html[data-layout="b"] .hero-side{padding:0 4px 6px!important;gap:7px!important}
  html[data-layout="b"] .hero-status,html[data-layout="b"] .hero-signal.compact{border-radius:8px}
  html[data-layout="b"] .section-block,html[data-layout="b"] .visual-panel{padding:11px!important}
}