/* The three views share the map and data controls but not a page grid. */
.first-screen { position: relative; display: grid; min-height: calc(100vh - 82px); border-bottom: 1px solid var(--line); }
.first-screen > .hero, .first-screen > .dashboard { display: contents; }
.first-screen .hero-primary, .first-screen .hero-index, .first-screen .left-panel,
.first-screen .map-stage, .first-screen .right-panel, .first-screen .lower-band { min-width: 0; }
.first-screen .hero-primary { padding: 26px 20px 22px 0; justify-content: flex-start; }
.first-screen .hero-index { padding: 26px 18px; }
.first-screen .left-panel, .first-screen .right-panel { border: 0; }
.first-screen .map-stage { min-height: 0; }
.first-screen .lower-band { min-height: 0; }
.first-screen .method-panel:not([hidden]) { position: fixed; top: 90px; right: 26px; z-index: 100; width: min(480px, calc(100% - 40px)); box-shadow: 0 18px 42px #0009; }
.first-screen .method-panel { padding-right: 34px; }
.method-close { position: absolute; top: 8px; right: 9px; background: none; border: 0; color: #bfd1d2; font-size: 22px; line-height: 1; padding: 1px 4px; }
.method-close:hover { color: #f3d49b; }
.first-screen .hero-caption { flex-wrap: wrap; gap: 5px 14px; }
.first-screen .hero-caption strong { font-size: 14px; }
.first-screen .hero-caption span { line-height: 1.5; }
.first-screen .period-wrap { margin-top: 11px; }
.first-screen #hero-period-control .period-wrap { display: block; }
.first-screen #hero-period-control .period-wrap > span { display: none; }
.first-screen .index-components { gap: 12px; }
.first-screen .right-insight { margin-top: auto; }

/* Overview: a map-first atlas with the two key numbers on the left. */
body[data-view="overview"] { --view-accent: #e9b969; }
body[data-view="overview"] .page-shell { background: radial-gradient(ellipse at 48% 31%, #173441 0%, #0a202b 31%, #071821 65%); }
body[data-view="overview"] .first-screen { grid-template-columns: minmax(275px, 20%) minmax(520px, 1fr) minmax(260px, 19%); grid-template-rows: 185px minmax(480px, 1fr) 155px; grid-template-areas: "order map ranking" "index map ranking" "trend trend trend"; }
body[data-view="overview"] .hero-primary { grid-area: order; border-right: 1px solid var(--line); }
body[data-view="overview"] .hero-measure #hero-orders { font-size: clamp(48px, 4vw, 76px); }
body[data-view="overview"] .hero-index { grid-area: index; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: linear-gradient(115deg, rgba(19,51,62,.42), transparent 90%); }
body[data-view="overview"] .hero-index .index-heading { flex-wrap: wrap; font-size: 12px; }
body[data-view="overview"] .hero-index .index-window { display: none; }
body[data-view="overview"] .hero-index .text-button { margin-left: 0; }
body[data-view="overview"] .index-core { display: block; margin: 18px 0 11px; padding: 0; }
body[data-view="overview"] .index-core #hero-index { font-size: clamp(62px, 5vw, 95px); text-shadow: 0 0 30px rgba(233,185,105,.19); }
body[data-view="overview"] .index-core .baseline { display: block; margin-top: 6px; }
body[data-view="overview"] .index-track { width: 100%; margin: 5px 0 17px; }
body[data-view="overview"] .index-components { display: flex; flex-direction: column; margin-top: 7px; gap: 18px; }
body[data-view="overview"] .component-top { font-size: 12px; }
body[data-view="overview"] .component-top strong { font-size: 20px; }
body[data-view="overview"] .component-track { height: 3px; }
body[data-view="overview"] .component-track span { height: 3px; }
body[data-view="overview"] .left-panel { display: none; }
body[data-view="overview"] .map-stage { grid-area: map; border-right: 1px solid var(--line); padding: 28px 24px 18px; background: radial-gradient(ellipse at center, rgba(34,79,88,.3), transparent 60%); }
body[data-view="overview"] .map-head h1 { font-size: clamp(27px, 2vw, 36px); }
body[data-view="overview"] .map-halo { border-color: rgba(232,184,106,.14); box-shadow: 0 0 0 80px rgba(233,185,105,.016), 0 0 0 160px rgba(233,185,105,.011); }
body[data-view="overview"] .map-canvas { min-height: 390px; }
body[data-view="overview"] .right-panel { grid-area: ranking; padding: 32px 0 20px 24px; display: flex; border-left: 0; }
body[data-view="overview"] .right-head h2 { font-size: 24px; }
body[data-view="overview"] .rank-row { padding-top: 16px; padding-bottom: 17px; }
body[data-view="overview"] .rank-name { font-size: 14px; }
body[data-view="overview"] .lower-band { grid-area: trend; display: grid; grid-template-columns: 21% 1fr 19%; border-top: 1px solid var(--line); }
body[data-view="overview"] .trend-chart { padding-top: 11px; }
body[data-view="overview"] .trend-chart svg { height: 76px; }
body[data-view="overview"] .lower-intro, body[data-view="overview"] .lower-aside { padding-top: 17px; }

/* Consumption: time, order volume and amount lead. The map becomes an inset. */
body[data-view="consumption"] { --view-accent: #f2a366; }
body[data-view="consumption"] .page-shell { background: radial-gradient(ellipse at 66% 20%, rgba(133,65,49,.17), transparent 40%), #071821; }
body[data-view="consumption"] .first-screen { grid-template-columns: minmax(270px, 19%) minmax(500px, 1fr) minmax(260px, 20%); grid-template-rows: 220px 260px minmax(340px, 1fr); grid-template-areas: "order wave wave" "details wave wave" "details map business"; }
body[data-view="consumption"] .hero-primary { grid-area: order; border-right: 1px solid var(--line); }
body[data-view="consumption"] .hero-measure #hero-orders { color: #f7c68d; font-size: clamp(48px, 4.2vw, 78px); }
body[data-view="consumption"] .hero-unit { color: #f3a66e; }
body[data-view="consumption"] .left-panel { grid-area: details; padding: 17px 20px 18px 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
body[data-view="consumption"] .left-panel .panel-top { margin: 0; }
body[data-view="consumption"] .left-panel .panel-top h2 { font-size: 23px; }
body[data-view="consumption"] .big-side-stat { margin-top: 22px; }
body[data-view="consumption"] .big-side-stat strong { color: #f5ac73; font-size: clamp(33px, 3vw, 53px); }
body[data-view="consumption"] .left-panel .panel-note { margin-top: 25px; }
body[data-view="consumption"] .hero-index { position: absolute; right: 18px; top: 16px; z-index: 4; display: flex; gap: 13px; align-items: center; padding: 8px 12px; border: 1px solid rgba(239,163,103,.24); background: rgba(8,27,37,.86); backdrop-filter: blur(10px); }
body[data-view="consumption"] .hero-index .index-heading { font-size: 11px; white-space: nowrap; }
body[data-view="consumption"] .hero-index .index-window,
body[data-view="consumption"] .hero-index .index-track, body[data-view="consumption"] .hero-index .index-components,
body[data-view="consumption"] .hero-index .baseline { display: none; }
body[data-view="consumption"] .hero-index .text-button { margin-left: 5px; font-size: 10px; }
body[data-view="consumption"] .hero-index .index-core { padding: 0; }
body[data-view="consumption"] .hero-index #hero-index { font-size: 33px; color: #f2bb7b; }
body[data-view="consumption"] .lower-band { grid-area: wave; display: flex; flex-direction: column; padding: 25px 24px 15px 28px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 53% 70%, rgba(237,105,68,.13), transparent 55%); }
body[data-view="consumption"] .map-stage { grid-area: map; padding: 19px 20px 13px; border-right: 1px solid var(--line); background: radial-gradient(ellipse at center, rgba(57,91,92,.17), transparent 68%); }
body[data-view="consumption"] .map-head h1 { font-size: 22px; }
body[data-view="consumption"] .map-control-bar { margin-top: 8px; }
body[data-view="consumption"] .map-canvas { min-height: 260px; }
body[data-view="consumption"] .map-scope-chip, body[data-view="consumption"] .map-depth-note { font-size: 9px; }
body[data-view="consumption"] .right-panel { grid-area: business; padding: 20px 0 12px 20px; display: flex; border-left: 0; }
body[data-view="consumption"] .right-head { margin-bottom: 8px; }
body[data-view="consumption"] .right-head h2 { font-size: 20px; }
body[data-view="consumption"] .right-panel .category-list { padding: 0; }
body[data-view="consumption"] .category-list .category-body { display: block; }
body[data-view="consumption"] .category-ring { width: 116px; height: 116px; margin: 8px auto 12px; }
body[data-view="consumption"] .category-ring::before { inset: 20px; }
body[data-view="consumption"] .category-list .category-legend > div { font-size: 11px; }
body[data-view="consumption"] .business-readout { display: flex; flex-direction: column; margin: 14px 0 6px; }
body[data-view="consumption"] .business-readout strong { color: #80d4c5; font-size: 28px; line-height: 1.2; font-weight: 550; }
body[data-view="consumption"] .business-readout > span:last-child { color: #9fb5b7; font-size: 11px; }
body[data-view="consumption"] .right-panel .value-line { padding: 7px 0; }
body[data-view="consumption"] .right-panel .track-copy { margin: 5px 0 0; }
.wave-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-right: 275px; }
.wave-heading h2 { font-size: clamp(25px, 2.1vw, 39px); margin: 6px 0 4px; font-weight: 550; }
.wave-heading p { color: #94aeb2; font-size: 11px; margin: 0; }
.wave-total { display: none; }
.wave-chart { flex: 1; display: flex; align-items: end; min-height: 0; }
.wave-chart svg { display: block; width: 100%; height: min(340px, 95%); overflow: visible; }
.wave-scroll-hint { display: none; }
.wave-guide { stroke: rgba(163,191,190,.12); stroke-width: 1; stroke-dasharray: 3 5; }
.wave-baseline { stroke: rgba(172,200,201,.31); stroke-width: 1; }
.wave-chart .hour-bar { fill: url(#wave-bar); opacity: .69; transform-box: fill-box; }
.wave-chart .hour-bar.is-peak { fill: #f5a366; opacity: .86; }
.wave-area { fill: url(#wave-fill); }
.wave-line { fill: none; stroke: #ffb479; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(246,129,79,.7)); }
.wave-peak { fill: #ffe0af; stroke: #ec7c4e; stroke-width: 3; }
.wave-peak-label { fill: #ffd2a3; font-size: 14px; font-weight: 600; paint-order: stroke; stroke: #0c202b; stroke-width: 5px; }
.wave-axis { fill: #8ca5aa; font-size: 14px; }
.wave-note { display: flex; align-items: center; gap: 18px; color: #e8aa7b; font-size: 10px; }
.wave-note span:nth-child(2) { color: #f4c38e; }
.wave-note p { margin: 0 0 0 auto; color: #809ba1; }

/* Supply: observed reach and the order-time ring take equal visual weight. */
body[data-view="supply"] { --view-accent: #88cee5; }
body[data-view="supply"] .page-shell { background: radial-gradient(ellipse at 39% 40%, rgba(28,92,130,.23), transparent 51%), #071821; }
body[data-view="supply"] .first-screen { grid-template-columns: minmax(425px, 41%) minmax(390px, 1fr) minmax(245px, 20%); grid-template-rows: 104px minmax(540px, 1fr) 155px; grid-template-areas: "title title index" "map dial metrics" "notes notes notes"; }
body[data-view="supply"] .hero-primary { grid-area: title; border-bottom: 1px solid var(--line); padding: 18px 10px 10px 0; }
body[data-view="supply"] .story-title { color: #edf4f3; font-size: clamp(36px, 3vw, 54px); line-height: 1.1; font-weight: 550; margin: 8px 0 0; letter-spacing: .04em; }
body[data-view="supply"] .hero-measure, body[data-view="supply"] .hero-caption, body[data-view="supply"] #hero-period-control { display: none; }
body[data-view="supply"] .hero-index { grid-area: index; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 15px; padding: 10px 0; }
body[data-view="supply"] .hero-index .index-heading { font-size: 11px; }
body[data-view="supply"] .hero-index .index-window,
body[data-view="supply"] .hero-index .index-track, body[data-view="supply"] .hero-index .index-components,
body[data-view="supply"] .hero-index .baseline { display: none; }
body[data-view="supply"] .hero-index .text-button { margin-left: 5px; font-size: 10px; }
body[data-view="supply"] .hero-index .index-core { padding: 0; }
body[data-view="supply"] .hero-index #hero-index { font-size: 37px; }
body[data-view="supply"] .map-stage { grid-area: map; padding: 22px 20px 15px 0; border-right: 1px solid var(--line); background: radial-gradient(ellipse at 46% 50%, rgba(33,122,165,.22), transparent 60%); }
body[data-view="supply"] .map-head h1 { font-size: clamp(23px, 1.8vw, 31px); }
body[data-view="supply"] .map-canvas { min-height: 370px; }
body[data-view="supply"] .map-halo { border-color: rgba(110,188,223,.16); box-shadow: 0 0 0 65px rgba(76,156,192,.025), 0 0 0 130px rgba(76,156,192,.017); }
body[data-view="supply"] .map-scope-chip .chip-pulse { background: #8ad6ed; box-shadow: 0 0 0 4px rgba(114,207,230,.13); }
body[data-view="supply"] .lower-band { grid-area: dial; display: flex; flex-direction: column; padding: 25px 22px 14px; border-right: 1px solid var(--line); background: radial-gradient(circle at 45% 57%, rgba(36,119,176,.2), transparent 58%); }
body[data-view="supply"] .right-panel { grid-area: metrics; display: flex; padding: 25px 0 17px 22px; }
body[data-view="supply"] .right-head h2 { font-size: 19px; }
body[data-view="supply"] .left-panel { grid-area: notes; display: grid; grid-template-columns: minmax(225px, .8fr) 2fr; align-items: center; gap: 25px; border-top: 1px solid var(--line); padding: 16px 0; }
body[data-view="supply"] .supply-foot-title h2 { font-size: 19px; margin: 4px 0; font-weight: 570; }
body[data-view="supply"] .supply-foot-title p { font-size: 11px; color: #93aaae; margin: 0; }
body[data-view="supply"] .supply-foot-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
body[data-view="supply"] .supply-foot-metrics .value-line { border: 0; display: flex; flex-direction: column; align-items: start; gap: 8px; padding: 0 0 0 15px; border-left: 1px solid var(--line); }
body[data-view="supply"] .supply-foot-metrics .value-line strong { color: #bce8f0; font-size: 21px; }
.dial-heading h2 { font-size: clamp(24px, 2vw, 36px); font-weight: 550; margin: 5px 0 4px; }
.dial-heading p { font-size: 11px; color: #8daeb9; margin: 0; }
.dial-chart { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 38px); min-height: 0; }
.service-dial { position: relative; width: min(58%, 390px); aspect-ratio: 1; flex: none; border-radius: 50%; padding: clamp(19px, 2.2vw, 35px); box-shadow: 0 0 0 1px rgba(91,178,217,.25), 0 0 0 9px rgba(38,117,150,.07), 0 0 40px rgba(46,150,218,.2); transition: filter .3s; }
.service-dial:hover { filter: brightness(1.15); }
.service-dial::before { content: ""; position: absolute; inset: -18px; border: 1px dashed rgba(120,194,220,.22); border-radius: 50%; pointer-events: none; }
.dial-core { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, #123344, #071b29 72%); border: 1px solid rgba(118,209,224,.37); box-shadow: inset 0 0 38px rgba(38,133,169,.23); }
.dial-core > span { color: #c0e2e7; font-size: 11px; }
.dial-core strong { color: #e6f8f6; font-size: clamp(48px, 4vw, 72px); line-height: 1.1; font-weight: 520; }
.dial-core strong span { color: #80c6df; font-size: 24px; }
.dial-core small { color: #7babb9; font-size: 10px; }
.dial-legend { width: min(35%, 240px); min-width: 125px; display: flex; flex-direction: column; gap: 14px; }
.dial-slot { display: grid; grid-template-columns: 6px 1fr auto; gap: 8px; align-items: center; border-bottom: 1px solid rgba(151,197,206,.13); padding-bottom: 9px; }
.dial-slot i { width: 5px; height: 22px; }
.dial-slot div { display: flex; flex-direction: column; }
.dial-slot strong { font-size: 12px; font-weight: 580; }
.dial-slot small { color: #7498a4; font-size: 9px; white-space: nowrap; }
.dial-slot em { color: #deedf0; font-size: 14px; font-style: normal; }
.dial-note { color: #759aa6; font-size: 10px; line-height: 1.55; margin: 5px 0 0; }
.supply-stat { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); padding: 14px 0 17px; }
.supply-stat span { color: #b6d3d8; font-size: 12px; }
.supply-stat strong { color: #9edbef; font-weight: 550; line-height: 1.1; font-size: clamp(48px, 3.6vw, 71px); margin: 5px 0; }
.supply-stat.is-night strong { color: #a9a5f0; }
.supply-stat small { color: #789aa6; font-size: 10px; }
.subset-track { height: 5px; background: #264454; margin-top: 22px; }
.subset-track span { display: block; height: 100%; background: linear-gradient(90deg, #79d5e6, #a6a1ef); }
.subset-copy { margin: 9px 0 20px; color: #9ab6bd; font-size: 11px; line-height: 1.55; }

@media (max-width: 1350px) {
  body[data-view="overview"] .first-screen { grid-template-columns: minmax(240px, 21%) minmax(420px, 1fr) minmax(230px, 21%); }
  body[data-view="consumption"] .first-screen { grid-template-columns: minmax(235px, 20%) minmax(390px, 1fr) minmax(225px, 21%); }
  body[data-view="supply"] .first-screen { grid-template-columns: minmax(350px, 40%) minmax(350px, 1fr) minmax(210px, 21%); }
  body[data-view="supply"] .dial-chart { gap: 15px; }
  body[data-view="supply"] .service-dial { width: 52%; }
}

@media (max-width: 1050px) {
  .first-screen { min-height: 0; }
  body[data-view="overview"] .first-screen { grid-template-columns: 270px minmax(0, 1fr); grid-template-rows: 175px 450px auto 150px; grid-template-areas: "order map" "index map" "ranking ranking" "trend trend"; }
  body[data-view="overview"] .right-panel { display: flex; flex-direction: row; gap: 18px; border-top: 1px solid var(--line); padding: 20px 0; }
  body[data-view="overview"] .right-head { width: 25%; }
  body[data-view="overview"] .rank-list { flex: 1; }
  body[data-view="overview"] .right-insight { display: none; }
  body[data-view="consumption"] .first-screen { grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: 210px 330px 370px; grid-template-areas: "order wave" "details wave" "map business"; }
  body[data-view="consumption"] .left-panel { overflow: hidden; }
  body[data-view="consumption"] .hero-index { right: 15px; top: 12px; }
  body[data-view="consumption"] .wave-heading { padding-right: 90px; }
  body[data-view="consumption"] .right-panel { padding-left: 16px; }
  body[data-view="supply"] .first-screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 110px 510px auto 145px; grid-template-areas: "title index" "map dial" "metrics metrics" "notes notes"; }
  body[data-view="supply"] .right-panel { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 20px; align-items: center; border-top: 1px solid var(--line); padding: 15px 0; }
  body[data-view="supply"] .right-panel .right-head, body[data-view="supply"] .right-panel .right-insight { display: none; }
  body[data-view="supply"] .right-panel .supply-stat { border-bottom: 0; border-right: 1px solid var(--line); padding: 0 15px 0 0; }
  body[data-view="supply"] .right-panel .supply-stat strong { font-size: 42px; }
  body[data-view="supply"] .right-panel .subset-track { width: 80px; margin: 0; }
  body[data-view="supply"] .right-panel .subset-copy { margin: 0; max-width: 130px; }
  body[data-view="supply"] .service-dial { width: 55%; }
}

@media (max-width: 760px) {
  .first-screen { display: flex !important; flex-direction: column; }
  .first-screen .hero-primary, .first-screen .hero-index, .first-screen .left-panel,
  .first-screen .map-stage, .first-screen .right-panel, .first-screen .lower-band { width: 100%; border-left: 0 !important; border-right: 0 !important; }
  .first-screen .hero-primary { padding: 18px 0 16px; }
  .first-screen .hero-measure #hero-orders { font-size: clamp(43px, 13vw, 61px) !important; }
  .first-screen .hero-index { position: static !important; padding: 17px 0 !important; border-top: 1px solid var(--line); }
  .first-screen .map-stage { min-height: 510px; padding: 21px 0 14px; border-top: 1px solid var(--line); }
  .first-screen .map-canvas { min-height: 365px; }
  .first-screen .right-panel, .first-screen .left-panel { min-height: 0; padding: 20px 0; border-top: 1px solid var(--line); }
  .first-screen .lower-band { min-height: 0; border-top: 1px solid var(--line); }
  body[data-view="overview"] .hero-primary { order: 1; }
  body[data-view="overview"] .hero-index { order: 2; }
  body[data-view="overview"] .map-stage { order: 3; }
  body[data-view="overview"] .right-panel { order: 4; display: block; }
  body[data-view="overview"] .right-head { width: auto; }
  body[data-view="overview"] .rank-list { display: flex; }
  body[data-view="overview"] .lower-band { order: 5; display: block; }
  body[data-view="overview"] .trend-chart { border: 0; padding: 14px 0; }
  body[data-view="overview"] .lower-aside { border-top: 1px solid var(--line); padding: 14px 0; }
  body[data-view="overview"] .index-components { gap: 13px; }
  body[data-view="consumption"] .hero-primary { order: 1; }
  body[data-view="consumption"] .left-panel { order: 2; }
  body[data-view="consumption"] .hero-index { order: 3; justify-content: space-between; }
  body[data-view="consumption"] .lower-band { order: 4; padding: 22px 0; }
  body[data-view="consumption"] .map-stage { order: 5; }
  body[data-view="consumption"] .right-panel { order: 6; }
  body[data-view="consumption"] .left-panel .panel-note { margin-top: 16px; }
  body[data-view="consumption"] .wave-heading { padding: 0; }
  body[data-view="consumption"] .wave-heading h2 { font-size: 25px; }
  .wave-chart { overflow-x: auto; margin: 12px 0; }
  .wave-chart svg { min-width: 650px; height: 250px; }
  .wave-scroll-hint { display: block; color: #b7896d; font-size: 10px; margin: -3px 0 12px; }
  .wave-note { flex-wrap: wrap; }
  .wave-note p { width: 100%; margin: 0; }
  body[data-view="consumption"] .category-list .category-body { display: flex; }
  body[data-view="consumption"] .category-ring { width: 100px; height: 100px; margin: 8px 18px 8px 0; }
  body[data-view="supply"] .hero-primary { order: 1; }
  body[data-view="supply"] .hero-index { order: 2; display: flex; justify-content: space-between; }
  body[data-view="supply"] .map-stage { order: 3; }
  body[data-view="supply"] .lower-band { order: 4; padding: 23px 0; min-height: 430px; }
  body[data-view="supply"] .right-panel { order: 5; display: flex; align-items: stretch; gap: 0; }
  body[data-view="supply"] .left-panel { order: 6; display: block; }
  body[data-view="supply"] .right-panel .right-head, body[data-view="supply"] .right-panel .right-insight { display: block; }
  body[data-view="supply"] .right-panel .supply-stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 15px 0; }
  body[data-view="supply"] .right-panel .supply-stat strong { font-size: 53px; }
  body[data-view="supply"] .right-panel .subset-track { width: 100%; margin-top: 17px; }
  body[data-view="supply"] .right-panel .subset-copy { max-width: none; margin: 7px 0 16px; }
  body[data-view="supply"] .supply-foot-metrics { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
  body[data-view="supply"] .service-dial { width: min(53%, 290px); }
  body[data-view="supply"] .dial-legend { width: 42%; }
}

@media (max-width: 420px) {
  body[data-view="supply"] .dial-chart { gap: 13px; }
  body[data-view="supply"] .service-dial { width: 49%; padding: 17px; }
  body[data-view="supply"] .dial-core strong { font-size: 42px; }
  body[data-view="supply"] .dial-legend { width: 48%; gap: 7px; }
  body[data-view="supply"] .dial-slot { gap: 4px; padding-bottom: 5px; }
  body[data-view="supply"] .dial-slot em { font-size: 11px; }
  body[data-view="supply"] .dial-slot small { font-size: 8px; }
}