/* Type scale (feedback 2026-11-10: too many sizes).
   Loaded last on every page. It overrides the sizes scattered through the
   other stylesheets, so the site uses only these steps:

   Interface (Manrope)        Headings (Instrument Serif)
   --type-caption 12/16       --type-h3 24/32   small headings, dates
   --type-body    14/24       --type-h2 32/40   panel and dialog titles
   --type-lead    16/24       --type-h1 48/56   page and film titles (32/40 on phones)

   Weights: 400 for text, 500 for buttons and labels you act on.
   The logo, the handwritten "December" and "tree", and the house's window
   numbers are artwork and keep their own sizes. */
:root{--type-caption:12px;--type-caption-lh:16px;--type-body:14px;--type-body-lh:24px;--type-lead:16px;--type-lead-lh:24px;--type-h3:24px;--type-h3-lh:32px;--type-h2:32px;--type-h2-lh:40px;--type-h1:48px;--type-h1-lh:56px}

/* Captions: meta, small labels, descriptions under options. */
#movie-meta,.calendar-weekdays span,.calendar-film,.set-copy small,.field-label,
.music-volume-label,.music-volume-label span,#music-volume-value,.music-credit,.tree-save-status,#calendar-summary,.colour-name,#colour-name{
 font-size:var(--type-caption)!important;line-height:var(--type-caption-lh)!important;font-weight:400!important}
#movie-day{font-size:var(--type-caption)!important;line-height:var(--type-caption-lh)!important;font-weight:500!important;letter-spacing:.08em}
.calendar-weekdays span{font-weight:500!important;letter-spacing:.04em}

/* Body: buttons, tabs, links, settings rows, footer. */
#movie-dialog .actions button,#movie-dialog .button-label,.sound-label,#music-next,#music-next span,
.watch-options a,.watch-options span,#calendar-dialog .tabs button,#arrange-tree,#reset-shape,
.mode-label,.option-label,.set-copy strong,.switch-label,.switch-label span,.set-description,#music-status,
.shape-row,.shape-row span,.shape-row output,.tuning-row,footer,footer span,footer button,.support-button,
.tree-link,#calendar,.pill,.language-picker select,#share-tree,.guest-invitation,#guest-collection-count,
#waiting-dialog p:not(.waiting-handwritten),#waiting-answers button,#waiting-feedback,#movie-description{
 font-size:var(--type-body)!important;line-height:var(--type-body-lh)!important}
#movie-dialog .actions button,#movie-dialog .button-label,.sound-label,#music-next,#calendar-dialog .tabs button,#arrange-tree,#reset-shape,.set-copy strong,.support-button,.tree-link,#calendar,#share-tree{font-weight:500!important}
.tree-count{font-size:var(--type-caption)!important;line-height:1!important;font-weight:500!important}

/* Lead text. */
#music-welcome-description{font-size:14px!important;line-height:1.5!important}

/* Headings. */
.calendar-number,.calendar-year,#calendar-year,.tray-ornament.is-locked,.tuning-body legend{
 font-size:var(--type-h3)!important;line-height:var(--type-h3-lh)!important}
#music-track,#music-welcome-title,#collection-title,.collection-heading h3,.editor-panel>legend,.editor-panel>h2,.light-settings legend,.topper-settings legend,#waiting-title,#share-title:not(.share-accessible-title),#tree-error-title,#guest-title{
 font-size:var(--type-h2)!important;line-height:var(--type-h2-lh)!important}
#movie-title,#tree-heading{font-size:var(--type-h1)!important;line-height:var(--type-h1-lh)!important}
#tree-heading em{font-size:1.5em!important;line-height:inherit!important}

@media(max-width:600px){
 :root{--type-h1:32px;--type-h1-lh:40px;--type-h2:24px;--type-h2-lh:32px}
 .calendar-number{font-size:16px!important;line-height:24px!important}
}

/* Phones: six settings tabs share the width, so their labels use the caption size and may wrap to two even lines. */
@media(max-width:1024px){
 .mode-label{font-size:var(--type-caption)!important;line-height:var(--type-caption-lh)!important;white-space:normal;text-align:center;text-wrap:balance;overflow-wrap:normal;hyphens:manual!important;-webkit-hyphens:manual!important}
}
/* The music welcome title is the card's only heading: one step up from the dialog titles on phones. */
@media(max-width:600px){#music-welcome-title{font-size:32px!important;line-height:40px!important}}
@media(min-width:601px){#calendar-dialog .calendar-day .calendar-film{font-size:14px!important;line-height:18px!important}}