#eccc-page { padding-bottom: 2rem; }
.gd-hero { --om-shade: 8 23 36; --om-shade-bot: .94; min-height: 24rem; }
.gd-hero .om-hero-inner { justify-content: flex-end; min-height: 24rem; }
.gd-hero .om-hero-img { object-position: center 40%; }
#gd-run { font-size: .8rem; color: #c6d4e6; }
#gd-status { margin: 1rem; color: #a3b3c4; font-size: .8rem; line-height: 1.5; }
#gd-status:empty { display: none; }
.gd-panel { margin: 1.25rem 1rem 0; padding: 20px; border: 1px solid #ffffff12; border-radius: 18px; background: #222c35; color: #c6d4e6; min-width: 0; }
.gd-panel h2 { color: #f3f6fb; margin: 0 0 10px; font-size: 1.2rem; }
.gd-panel p { font-size: .8rem; line-height: 1.5; }
.gd-chart { min-width: 0; height: 270px; }
.gd-short { height: 180px; }
#gd-summary .om-summary-action:disabled { cursor: default; }
#gd-summary .om-summary-action:disabled:hover { filter: none; }
.gd-help { margin: 0 1rem 1rem; color: #a3b3c4; font-size: .8rem; }
.gd-table-wrap { margin: 1rem; padding: 16px; border-radius: 16px; background: #222c35; color: #c6d4e6; }
.gd-table-wrap h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #edf4fa; }
.gd-table-scroll { overflow-x: auto; margin-top: 12px; }
.gd-table-wrap table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.gd-table-wrap th,.gd-table-wrap td { text-align: left; padding: 12px; border-bottom: 1px solid #ffffff15; white-space: nowrap; }
.gd-about { margin: 1.5rem 1rem; color: #a3b3c4; }
.gd-about a { color: #87cefa; }
html.gd-modal-open { overflow: hidden; }
#gd-dialog { box-sizing: border-box; width: calc(100% - 24px); max-width: 560px; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #425565; border-radius: 22px; background: #1b2531; color: #edf4fa; overflow: auto; }
#gd-dialog::backdrop { background: #050c12b8; backdrop-filter: blur(5px); }
.gd-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.gd-dialog-head h2 { font-size: 1rem; margin: 0; }
.gd-dialog-head button { min-height: 44px; padding: 8px 18px; border: 1px solid #ffffff25; border-radius: 24px; background: #304555; color: white; font: inherit; cursor: pointer; }
#gd-dialog-content { padding: 0 20px 20px; }
#gd-dialog-content p { font-size: .8rem; line-height: 1.5; color: #a3b3c4; }
#gd-dialog-content dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#gd-dialog-content dl div { background: #2b3c49; border-radius: 14px; padding: 16px; }
#gd-dialog-content dt { font-size: .75rem; color: #c6d4e6; }
#gd-dialog-content dd { margin: 8px 0 0; font-size: 1.3rem; }
#eccc-page button:focus-visible, #gd-dialog button:focus-visible { outline: 2px solid lightskyblue; outline-offset: 3px; }
@media (max-width: 599px) {
 .gd-hero, .gd-hero .om-hero-inner { min-height: 17rem; }
 .gd-panel { padding: 16px 8px; }
 .gd-panel h2,.gd-panel>p { margin-left: 8px; margin-right: 8px; }
 #gd-dialog { width: 100%; margin: auto 0 0; max-height: 92dvh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

#gd-dialog-content dl div { min-width: 0; }
#gd-dialog-content dd { overflow-wrap: anywhere; }

.gd-scroll-hint { margin: 12px 0 0; color: #a3b3c4; font-size: .75rem; text-align: right; }
.gd-table-scroll:focus-visible { outline: 2px solid #87cefa; outline-offset: 3px; }

.gd-elevation-legend{display:flex;justify-content:center;gap:20px;color:#a3b3c4;font-size:13px;margin:8px 0 4px}
.gd-elevation-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.gd-elevation-legend span::before{content:"";width:22px;height:1.5px;background:var(--reference-color)}

/* Mobile readings share the app's flat, stacked card treatment. */
.gd-reading-cards { display: none; }
@media (max-width: 767px) {
 .gd-table-scroll, .gd-scroll-hint { display: none; }
 .gd-reading-cards { display: grid; gap: 14px; margin-top: 16px; }
 .gd-reading-card { appearance: none; display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; padding: 18px; border: 0; border-radius: 18px; background: #2b3742; color: #edf4fa; font: inherit; text-align: center; cursor: pointer; }
 .gd-reading-date { font-size: .95rem; font-weight: 600; }
 .gd-reading-temp { font-size: 2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
 .gd-reading-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
 .gd-reading-stat { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 6px; border-radius: 10px; background: #35414c; }
 .gd-reading-stat > span, .gd-reading-dew { font-size: .8rem; color: #c6d4e6; }
 .gd-reading-stat strong { font-size: 1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
 .gd-reading-stat.has-snow-level { background: #315266; }
}