/* The collection's cream paper, serif titles, and restrained rules.
   Loaded only by reading and tool pages; Notes keeps its workspace styling. */
.collection-subpage {
    --type-body: 16px;
    --type-control: 15px;
    --type-label: 14px;
    --type-note: 14px;
    font-size: var(--type-body);
    line-height: 1.65;
}
.collection-subpage .page { width: min(100% - 64px, 1000px); padding: 48px 0 88px; }
.collection-subpage .page--wide { width: min(100% - 64px, 1120px); }
.collection-subpage .page--reading { width: min(100% - 64px, 760px); }
/* Tools share the topbar's frame, so their edges line up with the brand and
   the theme toggle. Articles keep their narrower reading measure. */
.collection-subpage .page:not(.article-page):not(.page--reading) { width: min(100% - 88px, 1232px); max-width: none; }
@media (max-width: 767px) {
    .collection-subpage .page:not(.article-page):not(.page--reading) { width: calc(100% - 40px); }
}
.collection-subpage .page-header { margin-bottom: 36px; }
.collection-subpage .page-title { font: 400 clamp(32px, 3.2vw, 40px)/1.15 var(--font-serif); letter-spacing: -.035em; text-wrap: wrap; }
.collection-subpage .page-subtitle { font-size: 16px; line-height: 1.65; max-width: none; margin-top: 10px; text-wrap: wrap; }
.collection-subpage .illustrated-header { grid-template-columns: 64px minmax(0, 1fr); column-gap: 22px; }
.collection-subpage .page-art { width: 64px; height: 64px; }
.collection-subpage :is(.prose, .text-body) { font-size: 17px; line-height: 1.8; }
.collection-subpage :is(.prose h2, .section-heading, .year-chart h2, .task-editor h2, .chart-heading h2) { font: 400 28px/1.25 var(--font-serif); letter-spacing: -.025em; }
.collection-subpage .prose h3 { font: 400 23px/1.35 var(--font-serif); }
.collection-subpage :is(.prose h2, .prose h3) { margin-top: 36px; }
.collection-subpage :is(.text-preview, .text-ui, .callout, .footnote, .app-footnote, .app-status, .chart-hint, .gantt-intro, .task-editor > p, .date-row, .message) { font-size: var(--type-note); line-height: 1.7; }
.collection-subpage :is(.text-stamp, .field-label, .eyebrow, .app-toolbar label, .forward-controls label, .task-row label, .zone-add > label, .time-scrubber label) { font-size: var(--type-label); }
.collection-subpage .eyebrow { letter-spacing: .08em; }
.collection-subpage :is(button, .btn, input, select, textarea) { font-size: var(--type-control); }
.collection-subpage :is(button, .btn, input:not([type=range]):not([type=checkbox]), select):not(.theme-toggle):not(.segmented *):not(.switch):not(.text-action) { min-height: 42px; }
.collection-subpage :is(input, select) { max-width: 100%; }
.collection-subpage :is(input[type=date], input[type=month], input[type=time]) { min-width: 0; }
.collection-subpage button { line-height: 1.3; }
.collection-subpage :is(.segmented > button, .segmented > label > span, .switch) { font-size: 13px; }
.collection-subpage .text-action { font-size: 14px; }
/* :where keeps this a default (0,1,0) that any page's own button styles can override. */
.collection-subpage :where(button, .btn):where(:not(.calendar-day):not(.zone-remove):not(.remove-task):not(.season-link):not(.theme-toggle):not(.segmented *):not(.switch):not(.text-action)) { padding: 10px 15px; }
.collection-subpage :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.collection-subpage .app-toolbar { gap: 18px 20px; padding: 22px 0; }
.collection-subpage .app-toolbar label { gap: 8px; min-width: 0; }
.collection-subpage .toolbar-actions { gap: 10px; }
.collection-subpage .app-footnote { max-width: none; margin-top: 22px; }
.collection-subpage .app-status { padding-top: 8px; min-height: 32px; }
.collection-subpage .app-status:empty { min-height: 16px; padding-top: 0; }
.collection-subpage :is(.table, .table td, .table th) { font-size: 14px; line-height: 1.65; }
.collection-subpage .table td { padding-block: 12px; }
.collection-subpage :is(pre, code, kbd) { font-size: .88em; }
.collection-subpage pre { max-width: 100%; overflow-x: auto; }
.collection-subpage .text-stamp { letter-spacing: 0; }
.collection-subpage .breadcrumb { font-size: 14px; }

/* Gantt: a compact controls row and a task grid with a deliberate mobile layout. */
.collection-subpage .gantt-intro { max-width: none; margin: -8px 0 28px; font-size: 16px; }
.page-gantt .app-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: end; }
.page-gantt .app-toolbar .toolbar-actions { margin-left: 0; }
.collection-subpage #projectName { width: 100%; }
.collection-subpage .chart-heading { flex-wrap: wrap; margin: 26px 0 18px; }
.collection-subpage .chart-heading h2 { overflow-wrap: anywhere; }
.collection-subpage .chart-heading span { font-size: 14px; white-space: normal; }
.collection-subpage .task-row { grid-template-columns: minmax(0,1fr) 170px 170px 52px 40px; gap: 16px; padding: 18px 0; }
.collection-subpage .task-row label { gap: 8px; }
.collection-subpage .task-row .task-duration { font-size: 14px; }
.collection-subpage .task-row .remove-task { width: 40px; font-size: 23px; }
.collection-subpage .task-editor { margin-top: 44px; }
.collection-subpage .task-editor > p { margin: 12px 0 24px; font-size: 16px; }
.collection-subpage .gantt-scroll { overscroll-behavior-x: contain; }

/* Shared metadata stays readable without competing with the result. */
.collection-subpage :is(.zone-meta, .zone-day, .zone-state, .solar-stats small, .stat-label, .season-extremes > div > span, .day-scrubber, .forward-answer > span, .day-rules, .business-answer p, .days-details, .calendar-key) { font-size: 14px; }
.collection-subpage :is(.time-ticks, .day-ticks, .band-key, .calendar-weekday) { font-size: 12px; }
.collection-subpage .zone-row { grid-template-columns: minmax(0,1fr) 175px minmax(150px,.9fr) 40px; gap: 24px; padding: 26px 0; }
.collection-subpage .zone-city { font-size: 26px; overflow-wrap: anywhere; }
.collection-subpage .zone-clock { font-size: 30px; }
.collection-subpage .zone-meta { overflow-wrap: anywhere; }
.collection-subpage .zone-remove { width: 40px; font-size: 23px; }
.collection-subpage .zone-add > div { gap: 10px; }
.collection-subpage .time-source input[type=time] { width: 142px; }
.collection-subpage .time-source input[type=date] { width: 170px; }
.collection-subpage .solar-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
.collection-subpage .solar-stats strong { font-size: clamp(25px,3vw,36px); line-height: 1.4; margin-block: 6px; }
.collection-subpage .season-link { font: 400 22px/1.45 var(--font-serif); }
.collection-subpage .calendar-key { flex-wrap: wrap; }
.collection-subpage .calendar-day { font-size: 15px; padding: 7px; }
.collection-subpage .calendar-title { flex-wrap: wrap; }
.collection-subpage .calendar-title input { max-width: 215px; }
.collection-subpage .forward-controls { gap: 20px; }
.collection-subpage .forward-controls input[type=number] { width: 125px; }
.collection-subpage .business-answer { padding-block: 30px 16px; }
.collection-subpage .business-answer p { max-width: none; }
.collection-subpage .days-details h3 { font-size: 23px; }

/* Reference tools share the same type hierarchy and clear dividers. */
.collection-subpage .cheat-grid h2 { font: 400 26px/1.25 var(--font-serif); letter-spacing: -.02em; text-transform: none; }
.collection-subpage .cheat-grid .table { table-layout: fixed; width: 100%; }
.collection-subpage .cheat-grid .table td { overflow-wrap: anywhere; }
.collection-subpage .pane textarea { font-size: 15px; line-height: 1.75; }
.collection-subpage .pane-meta { flex-wrap: wrap; gap: 8px 12px; }
.collection-subpage .pane-header { gap: 8px 16px; padding: 14px 18px; }
.collection-subpage .ratio-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.collection-subpage .aspect-label { font-size: 12px; }
.collection-subpage .aspect-dims { font-size: 13px; }
.collection-subpage .stat-value { font-family: var(--font-serif); font-weight: 400; }
.collection-subpage .memo-meta { font-size: 15px; }

@media (max-width: 900px) {
    .page-gantt .app-toolbar { grid-template-columns: 1fr; }
    .page-gantt .app-toolbar > label { max-width: 460px; }
    .collection-subpage .task-row { grid-template-columns: minmax(0,1fr) 158px 158px 40px; gap: 12px; }
    .collection-subpage .task-row .task-duration { display: none; }
    .collection-subpage .zone-row { grid-template-columns: minmax(0,1fr) 160px 40px; gap: 18px; }
    .collection-subpage .zone-availability { grid-column: 1 / 3; grid-row: 2; }
    .collection-subpage .zone-remove { grid-column: 3; grid-row: 1; }
}
@media (max-width: 700px) {
    .collection-subpage { --type-control: 16px; }
    .collection-subpage .page { width: calc(100% - 40px); padding-top: 32px; }
    .collection-subpage .page-header { margin-bottom: 30px; }
    .collection-subpage .illustrated-header { grid-template-columns: 48px minmax(0,1fr); gap: 8px 16px; }
    .collection-subpage .page-art { width: 48px; height: 48px; }
    .collection-subpage .page-title { font-size: 32px; }
    .collection-subpage .page-subtitle { font-size: 15px; }
    .collection-subpage :is(input, select, textarea) { font-size: 16px; }
    .collection-subpage .task-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 36px; gap: 14px 10px; }
    .collection-subpage .task-row label:first-child { grid-column: 1 / 3; }
    .collection-subpage .task-row label:nth-child(2) { grid-column: 1; grid-row: 2; }
    .collection-subpage .task-row label:nth-child(3) { grid-column: 2; grid-row: 2; }
    .collection-subpage .task-row .remove-task { grid-column: 3; grid-row: 1; width: 36px; }
    .collection-subpage .task-row .task-duration { display: block; grid-column: 1 / 3; text-align: left; padding: 0; }
    .collection-subpage .task-row input { padding-inline: 8px; }
    .collection-subpage .zone-row { grid-template-columns: minmax(0,1fr) 130px 30px; gap: 12px; }
    .collection-subpage .zone-clock { font-size: 26px; }
    .collection-subpage .zone-city { font-size: 24px; }
    .collection-subpage .zone-remove { width: 30px; }
    .collection-subpage .calendar-title { align-items: flex-start; flex-direction: column; }
    .collection-subpage .forward-answer { width: 100%; margin: 0; }
    .collection-subpage .app-toolbar .toolbar-actions { margin-left: 0; }
    .collection-subpage .calendar-day { min-height: 42px; padding: 4px; }
    .collection-subpage .solar-stats { gap: 12px; }
    .collection-subpage .solar-stats > div + div { padding-left: 12px; }
    .collection-subpage .solar-stats small { font-size: 12px; }
    .collection-subpage .solar-stats strong { font-size: 25px; }
    .collection-subpage .season-link { font-size: 20px; }
    .collection-subpage .indent-field { width: 100%; margin-left: 0; }
    .collection-subpage .gantt-intro { font-size: 15px; }
}
@media (max-width: 380px) {
    .collection-subpage .zone-row { grid-template-columns: minmax(0,1fr) 112px 24px; gap: 8px; }
    .collection-subpage .zone-clock { font-size: 23px; }
    .collection-subpage .zone-city { font-size: 22px; }
    .collection-subpage .solar-stats strong { font-size: 22px; }
    .collection-subpage .solar-stats { gap: 8px; }
    .collection-subpage .solar-stats > div + div { padding-left: 8px; }
}

.collection-subpage :is(.prose p, .gantt-intro p) { text-wrap: wrap; }
.page-room .layout { grid-template-columns: 320px minmax(0,1fr); }
.page-room .layout > * { min-width: 0; }
.page-room .subtitle { font-size: 16px; }
.page-room .form-group label { font-size: 13px; text-transform: none; letter-spacing: 0; }
.page-room .panel h2 { font: 400 24px var(--font-serif); }
@media(max-width:1024px) { .page-room .layout { grid-template-columns: minmax(0,1fr); } }

.collection-subpage #coordinates { font-size: 14px; }

@media(max-width:380px) {
    .collection-subpage .task-row label:nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
    .collection-subpage .task-row label:nth-child(3) { grid-column: 1 / 3; grid-row: 3; }
}

/* Text uses the container edges; no individual paragraph measures or rebalanced lines. */
.collection-subpage :is(h1,h2,h3,h4,p) { text-wrap: wrap; }
.collection-subpage .subtitle { max-width: none; }