/*
 * ShareHome Central Typography v13
 * Loaded last. This is the final authority for the three typography controls in Settings.
 * It replaces scattered fixed pixel sizes with title/body/meta tokens while preserving
 * minimum readable sizes on phones.
 */
:root{
  --ty-body:calc(15px * var(--ds-body-scale,1));
  --ty-label:calc(14px * var(--ds-body-scale,1));
  --ty-title-xl:calc(30px * var(--ds-title-scale,1));
  --ty-title-lg:calc(23px * var(--ds-title-scale,1));
  --ty-title-md:calc(18px * var(--ds-title-scale,1));
  --ty-title-sm:calc(15px * var(--ds-title-scale,1));
  --ty-meta:calc(13px * var(--ds-meta-scale,1));
  --ty-caption:calc(12px * var(--ds-meta-scale,1));
}

body{font-size:var(--ty-body)!important}

/* Titles: every page and component title follows the title control. */
h1,.app-shell h1,.page-heading h1,.ds-page-header h1,.users-heading h1,
.dashboard-v11-head h1,.calendar-title-row h1,.calendar-settings-title h1,
.settings-hero h1,.auth-card h2,.login-v4 h1,.login-v4 h2{
  font-size:var(--ty-title-xl)!important;line-height:1.42!important;font-weight:900!important;
}
h2,.app-shell h2,.panel-head h2,.dashboard-section-title h2,
.dashboard-schedule-panel .panel-head h2,.dashboard-attention-panel .panel-head h2,
.dashboard-property-summary .panel-head h2,.dashboard-recent-activity .panel-head h2,
.settings-section-head h2{
  font-size:var(--ty-title-lg)!important;line-height:1.5!important;font-weight:900!important;
}
h3,.app-shell h3,.period-card h3,.owner-card-head h3,.account-main h3,
.stay-step-body h3,.action-card h3{
  font-size:var(--ty-title-md)!important;line-height:1.55!important;font-weight:900!important;
}
h4,h5,h6,.topbar-title>b,.brand strong,.user-panel b,.section-title b{
  font-size:var(--ty-title-sm)!important;line-height:1.6!important;font-weight:850!important;
}

/* Normal copy, forms, buttons and tables follow the body control. */
p,li,td,dd,.button,button:not(.icon-button),
input:not([type=checkbox]):not([type=radio]),select,textarea,
.sidebar-nav a,.menu-section>span:not(.menu-open-mark):not(.nav-count),
.section-hub-card-copy strong,.stay-step-body>p,.history-record-facts b,.history-detail-grid b{
  font-size:var(--ty-body)!important;
}
label,.form-grid label,.auth-form label,.settings-field>span,.user-fields label,.owner-fields label,
th,.ds-select-trigger,.ds-select-option{
  font-size:var(--ty-label)!important;
}

/* Secondary text is intentionally a little heavier and never ghost-like. */
small,.small,.muted,.eyebrow,.form-hint,.field-help,.cell-note,.panel-kicker,
.topbar-meta,.topbar-meta small,.topbar-title small,.brand span,.user-panel small,
.panel-head p,.panel-head>a,.page-heading p,.ds-page-header p,.users-heading p,
.status-chip,.ds-badge,.period-type,.period-card p,.day-more,.agenda-item small,
.dashboard-v11-head p,.dashboard-kpi small,.dashboard-kpi p,.dashboard-section-title p,
.quick-action-grid small,.timeline-date small,.timeline-copy small,.timeline-owner,
.attention-list a,.property-summary-grid span,.recent-activity-grid small,.recent-activity-grid time,
.owner-credit-ring span,.owner-season-grid small,.calendar-command-heading p,.calendar-cache-status,
.calendar-mini-stats span,.calendar-mini-stats small,.calendar-filter-panel summary small,
.calendar-filters label>span,.calendar-layer-checks label,.filter-check,
.calendar-week-head span,.holiday-mark,.agenda-date span,.agenda-date small,
.booking-mode-strip label>span,.booking-both-option small,.fairness-advice-head span,
.advice-metric span,.advice-warning,.advice-info,.login-note,.login-copyright{
  font-size:var(--ty-meta)!important;
  line-height:1.7!important;
  font-weight:700!important;
}
.field-error,.preview-label{font-size:var(--ty-caption)!important;font-weight:750!important}

/* Component-specific emphasis still follows the appropriate central scale. */
.dashboard-kpi strong{font-size:calc(var(--ty-title-xl) * .95)!important}
.quick-action-grid b,.timeline-copy b,.timeline-date b,.property-summary-grid b,
.recent-activity-grid b,.owner-season-grid b,.agenda-item b{
  font-size:var(--ty-label)!important;font-weight:900!important;
}
.kpi-icon,.quick-action-grid a>span{font-size:calc(var(--ty-title-md) * 1.05)!important}
.calendar-day-number{font-size:var(--ty-label)!important}
.day-item{font-size:var(--ty-caption)!important}

/* The settings page itself must preview the same tokens it controls. */
.design-preview h3{font-size:var(--ty-title-md)!important}
.design-preview p{font-size:var(--ty-body)!important}
.design-preview small{font-size:var(--ty-meta)!important}

@media(max-width:900px){
  :root{
    /* Keep the chosen scale, but enforce real mobile readability floors. */
    --ty-body:max(14px,calc(15px * var(--ds-body-scale,1)));
    --ty-label:max(14px,calc(14px * var(--ds-body-scale,1)));
    --ty-title-xl:max(25px,calc(29px * var(--ds-title-scale,1)));
    --ty-title-lg:max(20px,calc(22px * var(--ds-title-scale,1)));
    --ty-title-md:max(17px,calc(18px * var(--ds-title-scale,1)));
    --ty-title-sm:max(15px,calc(15px * var(--ds-title-scale,1)));
    --ty-meta:max(12.5px,calc(13px * var(--ds-meta-scale,1)));
    --ty-caption:max(12px,calc(12px * var(--ds-meta-scale,1)));
  }
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:max(16px,var(--ty-body))!important}
  .mobile-dock span{font-size:var(--ty-meta)!important;font-weight:800!important}
  .app-shell .sidebar-account b{font-size:var(--ty-label)!important}
  .app-shell .sidebar-account small{font-size:var(--ty-meta)!important}
}