.monthly-prices-page .content-page { display:grid; gap:24px; }
.monthly-report-hero { align-items:flex-start; }
.monthly-status { flex:0 0 auto; padding:9px 14px; border-radius:999px; font-size:.78rem; font-weight:800; }
.monthly-status.is-complete { color:#23752e; background:#e8f6e9; }
.monthly-status.is-preliminary { color:#8a5a00; background:#fff3d7; }
.monthly-area-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.monthly-area-card { display:grid; gap:24px; }
.monthly-area-title { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.monthly-area-title h2 { margin:4px 0 0; }
.monthly-area-title strong { color:var(--ui-green-dark); font-size:clamp(1.35rem,3vw,2rem); white-space:nowrap; }
.monthly-price-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); overflow:hidden; }
.monthly-price-facts div { padding:18px; border-bottom:1px solid var(--ui-line); }
.monthly-price-facts div:nth-child(odd) { border-right:1px solid var(--ui-line); }
.monthly-price-facts div:nth-last-child(-n+2) { border-bottom:0; }
.monthly-price-facts dt { color:var(--ui-copy); font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.monthly-price-facts dd { margin:7px 0 0; color:var(--ui-ink); font-weight:800; }
.monthly-comparison { margin:0; padding:16px 18px; border-left:3px solid var(--ui-green); background:#f1f8f2; }
.monthly-day-link { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:auto; padding-top:16px; color:var(--ui-green-dark); font-weight:800; text-decoration:none; border-top:1px solid var(--ui-line); }
.monthly-day-link:hover { color:var(--ui-green); }
.monthly-day-link span { font-size:1.25rem; transition:transform .18s ease; }
.monthly-day-link:hover span { transform:translateX(4px); }
.monthly-data-notice { display:flex; align-items:flex-start; gap:10px; padding:16px 18px; color:var(--ui-ink); border-left:3px solid #4776a8; border-radius:var(--ui-radius-sm); background:#eef5fb; }
.monthly-data-notice span { color:var(--ui-copy); }
.monthly-daily-development { display:grid; gap:14px; }
.monthly-daily-legend { display:flex; justify-content:flex-end; gap:18px; color:var(--ui-copy); font-size:.8rem; font-weight:800; }
.monthly-daily-legend span { display:flex; align-items:center; gap:7px; }
.monthly-daily-legend span::before { content:""; width:12px; height:12px; border-radius:3px; background:var(--ui-green); }
.monthly-daily-legend .is-dk2::before { background:#4776a8; }
.monthly-daily-chart-scroll { max-width:100%; overflow-x:auto; scrollbar-gutter:stable; }
.monthly-daily-chart { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(25px,1fr); gap:5px; min-width:930px; min-height:330px; padding:24px 14px 0 66px; border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); background:repeating-linear-gradient(to bottom,#fff 0,#fff 67px,#e7edf2 68px); }
.monthly-daily-scale { position:absolute; top:20px; bottom:52px; left:10px; display:flex; flex-direction:column; justify-content:space-between; width:52px; color:var(--ui-muted); font-size:.66rem; font-weight:700; text-align:right; pointer-events:none; }
.monthly-daily-group { display:grid; grid-template-rows:auto auto; min-width:0; }
.monthly-daily-bars { display:flex; align-items:flex-end; justify-content:center; gap:2px; min-width:0; height:270px; border-bottom:2px solid #afbdc9; }
.monthly-daily-bars.is-empty { align-items:flex-end; }
.monthly-daily-empty { width:70%; height:28px; margin-bottom:1px; border:2px dashed #c9d4dc; border-radius:4px 4px 1px 1px; background:rgba(237,243,247,.5); }
.monthly-daily-bar { position:relative; width:min(11px,45%); height:100%; color:var(--ui-green); }
.monthly-daily-bar.is-dk2 { color:#4776a8; }
.monthly-daily-bar.is-negative { color:#ba3a32; }
.monthly-daily-bar svg { display:block; width:100%; height:100%; overflow:visible; }
.monthly-daily-bar rect { fill:currentColor; vector-effect:non-scaling-stroke; }
.monthly-daily-bar:focus-visible { border-radius:4px; outline:3px solid rgba(39,117,46,.32); outline-offset:2px; }
.monthly-daily-bar span { position:absolute; left:50%; top:4px; z-index:2; display:none; width:max-content; padding:5px 7px; color:#fff; border-radius:5px; background:var(--ui-ink); font-size:.7rem; font-weight:800; transform:translateX(-50%); }
.monthly-daily-bar:hover span,.monthly-daily-bar:focus-visible span,.monthly-daily-bar.is-revealed span { display:block; }
.monthly-daily-label { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 1px 13px; color:var(--ui-copy); font-size:.7rem; font-weight:800; text-align:center; }
.monthly-daily-label small { color:#8b9aa6; font-size:.5rem; font-weight:800; line-height:1.1; }
.monthly-daily-label.is-unavailable { color:#8b9aa6; }
.monthly-daily-caption { margin:0; color:var(--ui-copy); font-size:.82rem; }
.monthly-method { display:grid; gap:12px; }
.monthly-summary { display:grid; gap:12px; }
.monthly-summary h2,.monthly-summary p { margin:0; }
.monthly-method h2 { margin:4px 0 0; }
.monthly-method p { margin:0; max-width:900px; }
.monthly-personal { display:grid; gap:20px; }
.monthly-personal-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:14px; }
.monthly-personal-form label { display:grid; gap:7px; color:var(--ui-ink); font-weight:800; }
.monthly-personal-form label span { color:var(--ui-copy); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; }
.monthly-personal-form select { width:100%; min-height:48px; padding:0 42px 0 14px; color:var(--ui-ink); border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); background:#fff; }
.monthly-personal-result { display:grid; gap:18px; padding:22px; border-left:4px solid var(--ui-green); border-radius:var(--ui-radius-sm); background:linear-gradient(110deg,#f4faf5,#f7fbff); }
.monthly-personal-result-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.monthly-personal-result-head div { display:grid; gap:5px; }
.monthly-personal-result-head span,.monthly-personal-result-head p,.monthly-personal-caption { color:var(--ui-copy); }
.monthly-personal-result-head strong { color:var(--ui-ink); font-size:clamp(1.7rem,4vw,2.5rem); }
.monthly-personal-result-head p { max-width:520px; margin:0; }
.monthly-personal-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); overflow:hidden; background:rgba(255,255,255,.72); }
.monthly-personal-facts div { padding:16px; border-right:1px solid var(--ui-line); }
.monthly-personal-facts div:last-child { border-right:0; }
.monthly-personal-facts dt { color:var(--ui-copy); font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.monthly-personal-facts dd { margin:7px 0 0; color:var(--ui-ink); font-weight:800; }
.monthly-personal-caption,.monthly-personal-notice { margin:0; }
.monthly-personal-notice { padding:15px 17px; color:var(--ui-copy); border-left:3px solid #4776a8; border-radius:var(--ui-radius-sm); background:#eef5fb; }
.monthly-personal-notice.is-error { color:#8b2d25; border-left-color:#ba3a32; background:#fff0ee; }
.monthly-section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }
.monthly-section-heading h2 { margin:4px 0 0; }
.monthly-section-heading > p { max-width:570px; margin:0; }
.monthly-archive-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.monthly-archive-grid a { display:grid; gap:3px; padding:18px; color:var(--ui-ink); text-decoration:none; border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); background:#fff; }
.monthly-archive-grid a:hover { border-color:var(--ui-green); box-shadow:var(--ui-shadow-sm); }
.monthly-archive-grid span { text-transform:capitalize; }
.monthly-archive-grid strong { font-size:1.15rem; }
.monthly-archive-grid em { color:#8a5a00; font-size:.75rem; font-style:normal; font-weight:800; }
.monthly-archive-grid em.is-limited { color:#315f8e; }
.monthly-year-list { display:grid; gap:12px; }
.monthly-year { border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); background:#fff; overflow:hidden; }
.monthly-year summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; list-style:none; color:var(--ui-ink); }
.monthly-year summary::-webkit-details-marker { display:none; }
.monthly-year summary:hover { background:var(--ui-soft); }
.monthly-year summary strong { font-size:1.2rem; }
.monthly-year summary span { color:var(--ui-copy); font-size:.86rem; }
.monthly-year summary i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ui-green-soft); color:var(--ui-green); font-size:1.1rem; font-style:normal; font-weight:800; transition:transform .2s ease; }
.monthly-year[open] summary { border-bottom:1px solid var(--ui-line); background:var(--ui-soft); }
.monthly-year[open] summary i { transform:rotate(45deg); }
.monthly-year .monthly-archive-grid { padding:14px; }
.monthly-year-report-link { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:14px 14px 0; padding:14px 16px; color:var(--ui-green-dark); font-weight:800; text-decoration:none; border-radius:var(--ui-radius-sm); background:var(--ui-green-soft); }
.monthly-year-report-link:hover { color:var(--ui-green); box-shadow:var(--ui-shadow-sm); }
.monthly-report-navigation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.monthly-report-navigation a { position:relative; display:grid; gap:3px; padding:18px 54px 18px 20px; color:var(--ui-ink); text-decoration:none; border:1px solid var(--ui-line); border-radius:var(--ui-radius-sm); background:#fff; }
.monthly-report-navigation a:hover { border-color:var(--ui-green); box-shadow:var(--ui-shadow-sm); }
.monthly-report-navigation a > span { position:absolute; right:20px; top:50%; color:var(--ui-green); font-size:1.25rem; transform:translateY(-50%); }
.monthly-report-navigation a.is-next { text-align:right; padding:18px 20px 18px 54px; }
.monthly-report-navigation a.is-next > span { right:auto; left:20px; }
.monthly-report-navigation small { color:var(--ui-copy); }
.annual-price-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
.annual-price-facts a { color:var(--ui-green-dark); }
.annual-card-caption { margin:0; color:var(--ui-copy); font-size:.88rem; }
@media (max-width:800px) { .monthly-area-grid,.monthly-archive-grid,.monthly-personal-form,.monthly-personal-facts,.monthly-report-navigation { grid-template-columns:1fr; } .monthly-section-heading,.monthly-area-title,.monthly-data-notice,.monthly-personal-result-head { align-items:flex-start; flex-direction:column; } .monthly-price-facts { grid-template-columns:1fr; } .monthly-price-facts div,.monthly-price-facts div:nth-child(odd),.monthly-personal-facts div { border-right:0; border-bottom:1px solid var(--ui-line); } .monthly-price-facts div:last-child,.monthly-personal-facts div:last-child { border-bottom:0; } .monthly-personal-form .ui-button { width:100%; } .monthly-daily-chart { min-height:285px; padding-left:58px; } .monthly-daily-scale { width:44px; font-size:.61rem; } .monthly-daily-bars { height:225px; } .monthly-daily-legend { justify-content:flex-start; } }