/* Keep the back row; move the chart heading into the form introduction. */
body:has(.page[data-page="chart"].active) #pageTitle { visibility: hidden; }
.page[data-page="chart"] > .subhead { padding: 6px 20px 14px; }
.page[data-page="chart"] > .subhead > .chart-section-title { margin: 0 0 8px; font: 500 19px/1.45 var(--serif); letter-spacing: .06em; color: var(--ink); }
.page[data-page="chart"] > .subhead > h2 { margin: 0 0 8px; font: 600 24px/1.4 var(--serif); }
.page[data-page="chart"] > .subhead > span { display: block; margin: 0; line-height: 1.5; }
.page[data-page="chart"] > #chartForm { margin-top: 8px; padding-top: 20px; }
#chartForm > fieldset:first-child { margin-top: 0; margin-bottom: 18px; }
#chartForm > fieldset:first-child > legend { margin-bottom: 10px; line-height: 1.5; }

.page[data-page="chart"] > .date-selection-entry{display:flex;align-items:center;gap:12px;margin:0 18px 16px;padding:14px 16px;box-sizing:border-box;min-height:76px;border:1px solid #dcc8a5;border-radius:13px;background:linear-gradient(115deg,#fffcf5,#f8eedc);color:#673d22}
.date-selection-entry h3{margin:0;font-size:15px;font-weight:600;letter-spacing:.06em}
.date-selection-entry h3 span{margin-left:10px;font-size:13px;font-weight:400;letter-spacing:0}
.date-selection-entry p{margin:5px 0 0;font-size:11px;line-height:1.5;color:#967651}
.page[data-page="chart"] > .saved{padding-top:0}

/* One spacing token controls both the gap and the downward shadow. */
.page[data-page="chart"]{--chart-card-gap:8px;--chart-card-shadow:0 6px 0 rgba(202,162,77,.12)}
html .page[data-page="chart"] > #chartForm{margin-bottom:0;box-shadow:var(--chart-card-shadow)}
html .page[data-page="chart"] > .mar-entry,
html .page[data-page="chart"] > .date-selection-entry{width:calc(100% - 36px);margin:var(--chart-card-gap) 18px 0;box-shadow:var(--chart-card-shadow)}
html .page[data-page="chart"] > .saved{margin-top:var(--chart-card-gap);padding-top:0;padding-bottom:var(--chart-card-gap)}
html .page[data-page="chart"] > .saved > .section-title{margin:0 0 var(--chart-card-gap);padding-top:0;padding-bottom:0}
html .page[data-page="chart"] > .saved > .section-title h3{margin:0;line-height:1.5}
html .page[data-page="chart"] > .saved > .saved-item{margin-top:0;margin-bottom:var(--chart-card-gap);box-shadow:var(--chart-card-shadow)}

/* Reserve only the last card's shadow, with no extra space beneath it. */
html .miniapp > .pages > .page[data-page="chart"]{padding-bottom:0}
html .page[data-page="chart"] > .saved{margin-bottom:0;padding-bottom:var(--chart-card-gap)}
html .page[data-page="chart"] > .saved > .saved-item:last-child{margin-bottom:0}

/* Slightly larger solar-time label and explanation. */
#chartForm .switch-row>div{flex:1;min-width:0;text-align:center}
#chartForm .switch-row b{font-size:15px;line-height:1.5}
#chartForm .switch-row small{font-size:12px;line-height:1.5}
#chartForm .switch-row>.switch{flex-shrink:0}

/* Match the birth-entry panel to the cards beneath it. */
html.ui-theme-goldsand .page[data-page="chart"] > #chartForm{background:linear-gradient(115deg,#fffcf5,#f8eedc);border-color:#dcc8a5}
html.ui-theme-goldsand #chartForm .birth-date-trigger{background:transparent}

/* Use the same 8px rhythm throughout the chart input blocks. */
html body .page[data-page="chart"] > #chartForm{display:flex;flex-direction:column;gap:8px}
html body #chartForm > :is(fieldset,label,.time-entry-grid,.switch-row,.red-btn){margin-top:0!important;margin-bottom:0!important}
html body #chartForm > fieldset > legend{margin-bottom:8px}
html body #chartForm .time-entry-grid{gap:8px}

/* Override the legacy #chartForm + .mar-entry 22px bottom margin. */
html body .page[data-page="chart"] > .mar-entry,
html body .page[data-page="chart"] > .date-selection-entry{margin:8px 18px 0!important;width:calc(100% - 36px)!important}

/* Let the page background run continuously behind the heading. */
html.ui-theme-goldsand body .page[data-page="chart"]>.subhead{background:transparent!important;border:0;box-shadow:none}

/* Framed chart introduction, aligned with the form below. */
html.ui-theme-goldsand body .page[data-page="chart"]>.subhead{box-sizing:border-box;width:calc(100% - 36px);margin:8px 18px 0;padding:18px 16px;border:1px solid #dcc8a5;border-radius:13px;box-shadow:0 6px 0 rgba(202,162,77,.12)}
html body .page[data-page="chart"]>#chartForm{margin-top:8px!important}