/* A quieter type scale and closer spacing; loaded after the view styles. */
:root {
  --header-height: 72px;
}

html,
body {
  font-size: 15px;
  line-height: 1.45;
}

/* Keep the brand and navigation on one calm line on larger screens. */
.masthead { padding: 0 24px; gap: 16px; }
.brand { gap: 11px; }
.brand-copy strong { font-size: 18px; line-height: 1.2; letter-spacing: -.3px; }
.navigation-group { gap: 10px; }
.nav-button { padding: 0 14px; gap: 7px; font-size: 14px; }
.nav-button.active::after { left: 14px; right: 14px; }
.nav-button svg,
.ask-button svg { width: 16px; height: 16px; }
.button { padding: 9px 14px; gap: 7px; font-size: 14px; line-height: 1.4; }
.header-actions .icon-button { width: 44px; height: 44px; }

/* Give more of the sidebar to organisations, without reducing its small text. */
.discovery-toolbar { padding-left: 18px; padding-right: 18px; gap: 12px; }
.discovery-view-switch button { padding-left: 11px; padding-right: 11px; }
.discovery-toolbar .visit-cta { padding-left: 12px; padding-right: 12px; }
.directory-intro { padding: 16px 20px 0; }
.directory-intro h1 { font-size: 21px; line-height: 1.15; letter-spacing: -.4px; margin-bottom: 5px; }
.directory-intro > p { margin-bottom: 11px; }
.discovery-shortcuts button { min-height: 34px; padding: 5px 9px; }
.directory-intro .category-filters { gap: 5px; margin: 8px 0 6px; }
.directory-intro .filter-pill { min-height: 34px; padding: 5px 9px; }
.directory-controls { min-height: 34px; padding-bottom: 3px; }
.directory-controls .text-button,
.directory-controls .sort-button { min-height: 32px; }
.directory-results { padding-left: 20px; padding-right: 20px; }
.organisation-card { padding: 12px 0; gap: 10px; }
.organisation-card h3 { font-size: 14px; line-height: 1.3; letter-spacing: -.1px; }
.organisation-card .organisation-avatar { width: 38px; height: 38px; border-radius: 6px; }
.organisation-card-description { margin: 3px 0 5px; line-height: 1.45; }
.organisation-card.selected::before { top: 12px; bottom: 12px; }
.directory-footer { padding: 7px 20px; }
.directory-footer .text-button,
.directory-footer .admin-link { min-height: 36px; }
.explore-view[data-layout="directory"] .directory-intro { padding: 18px 26px 0; }
.explore-view[data-layout="directory"] .directory-intro h1 { font-size: 23px; }
.explore-view[data-layout="directory"] .directory-results { gap: 10px; padding: 12px 26px 20px; }
.explore-view[data-layout="directory"] .organisation-card { padding: 12px; }
.explore-view[data-layout="directory"] .directory-footer { padding-left: 26px; padding-right: 26px; }

/* Profiles keep the contact action prominent and the supporting copy close. */
.profile-panel .profile-actions-top { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.profile-panel .profile-hero { padding: 3px 16px 10px; }
.profile-identity { gap: 10px; }
.profile-panel .profile-identity > .organisation-avatar { width: 40px; height: 40px; }
.profile-panel .profile-hero h2 { font-size: 20px; line-height: 1.18; letter-spacing: -.3px; margin-top: 4px; }
.profile-panel .profile-type { margin-top: 3px; }
.profile-primary-actions { margin-top: 10px; gap: 7px; }
.profile-panel .profile-primary-actions .profile-contact-primary { padding: 8px 10px; }
.profile-panel .profile-primary-actions .profile-website { padding: 8px 10px; }
.profile-contact-hint { margin-top: 6px; line-height: 1.45; }
.profile-panel .profile-links { margin-top: 8px; }
.profile-panel .profile-section { padding: 10px 16px; }
.profile-panel .profile-section > h3 { margin-bottom: 6px; }
.profile-panel .profile-description,
.profile-panel .profile-location { line-height: 1.5; }
.profile-panel .profile-background,
.profile-panel .profile-connections { padding-top: 0; padding-bottom: 0; }
.profile-panel :is(.profile-about, .profile-more-contacts, .profile-connections details) > summary { padding: 10px 0; }
.profile-background-content { padding-bottom: 10px; }
.profile-background-content > .profile-description + h3 { margin-top: 10px; }
.profile-panel .profile-footer { padding-top: 2px; padding-bottom: 2px; }

/* Page titles should introduce the task rather than dominate the screen. */
.content-view { padding: 32px 36px 40px; }
.page-intro { margin-bottom: 22px; }
.page-intro h1,
.connections-view > .page-intro h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.6px; margin: 0 0 9px; }
.page-intro > p { font-size: 14px; line-height: 1.5; }
.connections-toolbar { margin-bottom: 14px; }
.connection-filter-bar { margin-bottom: 16px; }
.connection-type-filters { gap: 6px; }
.connection-type-filters .filter-pill { min-height: 36px; padding: 6px 10px; font-size: 13.5px; }
.connection-filter-meta { margin-top: 8px; }
.card-heading { padding: 12px 16px; }
.network-visual { padding: 16px; }
.network-controls { margin-bottom: 18px; }
.network-controls select { padding: 9px 10px; font-size: 14px; }
.network-focus-card { padding: 16px 12px; }
.network-focus-card h2 { font-size: 16px; }
.network-neighbour { padding: 10px; }
.connection-row { padding: 14px 0; }
.network-caption { padding: 11px 16px; line-height: 1.5; }

/* Retain the guide's fixed question area and pinned Back / Build actions. */
#guides-view[data-planner-state="questions"] { padding: 16px clamp(20px, 4vw, 60px); gap: 11px; }
#guides-view[data-planner-state="questions"] .page-intro h1 { font-size: 28px; letter-spacing: -.5px; }
#guides-view[data-planner-state="questions"] .page-intro p { font-size: 14px; margin-top: 4px; }
#guides-view[data-planner-state="questions"] .planner-header { padding: 10px 18px 0; }
#guides-view[data-planner-state="questions"] .planner-meter-copy { min-height: 26px; }
#guides-view[data-planner-state="questions"] .planner-answers { padding-top: 8px; }
#guides-view[data-planner-state="questions"] #planner-form { padding: 13px 18px 12px; }
#guides-view[data-planner-state="questions"] .planner-question-content > h3 { font-size: 23px; line-height: 1.2; letter-spacing: -.4px; }
#guides-view[data-planner-state="questions"] .planner-help { font-size: 14px; line-height: 1.5; margin: 6px 0 10px; }
.planner-choice-grid { gap: 8px; }
#planner-form .planner-choice { min-height: 72px; padding: 13px 34px 13px 13px; gap: 9px; }
.planner-choice input { top: 16px; right: 12px; }
.planner-choice-copy strong { font-size: 14px; line-height: 1.4; }
.planner-choice-copy small { font-size: 13.5px; line-height: 1.45; margin-top: 3px; }
.planner-choice-icon svg { width: 18px; height: 18px; }
#planner-form .quick-planner-actions .button { min-height: 44px; padding: 10px 14px; font-size: 14px; }
#planner-form .planner-build-shortcut { min-height: 44px; font-size: 14px; }
#guides-view[data-planner-state="questions"] .planner-question-footer { grid-template-rows: 44px; min-height: 52px; padding-top: 8px; }
#planner-form .quick-topics .interest-choices { gap: 7px; }
#planner-form .quick-topics label { min-height: 44px; padding: 8px 11px; gap: 7px; }
#planner-form .quick-topics span { font-size: 14px; line-height: 1.4; }
.planner-time-control { gap: 7px; }
.planner-time-value { font-size: 26px; }
.planner-more-details { font-size: 14px; }
#planner-form .planner-details-fields label { font-size: 14px; }
.itinerary-builder { margin-top: 18px; margin-bottom: 30px; }
.itinerary-result-heading { padding-bottom: 16px; margin-bottom: 18px; }
.itinerary-result-heading h3 { font-size: 23px; }
#itinerary-result .route-intro h2,
.route-intro > h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.5px; }
.route-stop-list { margin: 20px 0; }
.route-stop { padding-bottom: 19px; }
#itinerary-result .route-stop-main h3 { font-size: 16px; }
.route-stop-main p,
#itinerary-result .route-stop-main p { line-height: 1.55; }
.route-outreach-link { margin-top: 9px; padding: 10px; }
.route-day { margin-top: 17px; margin-bottom: 14px; font-size: 16px; }

/* The question dialog uses the same restrained scale. */
.dialog-header { padding: 11px 16px 11px 20px; }
.dialog-header .icon-button { min-width: 44px; min-height: 44px; }
.guide-role-bar { padding: 10px 22px; gap: 8px; }
.guide-role-bar .role-pill { min-height: 36px; }
.guide-conversation { padding: 22px; }
.guide-welcome h2 { font-size: 29px; line-height: 1.15; letter-spacing: -.6px; margin: 10px 0 12px; }
.guide-welcome > p { line-height: 1.6; }
.answer-text { line-height: 1.6; }
.guide-answer { margin-bottom: 19px; }
.recommendation-why,
.recommendation-caveat { line-height: 1.5; }
.recommendation-action small,
.route-outreach-link small { line-height: 1.5; }
.guide-question-form { padding: 12px 18px; }

@media (max-width: 1100px) {
  .masthead { padding-left: 20px; padding-right: 20px; gap: 12px; }
  .brand-copy strong { font-size: 17px; }
  .navigation-group { gap: 8px; }
  .nav-button { padding-left: 11px; padding-right: 11px; font-size: 14px; }
  .directory-intro,
  .directory-results,
  .directory-footer { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 850px) {
  .masthead { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .brand-copy strong { font-size: 16px; }
  .navigation-group { gap: 7px; }
  .nav-button { padding-left: 9px; padding-right: 9px; }
  .content-view { padding: 26px 24px 32px; }
}

@media (max-width: 650px) {
  :root { --header-height: 106px; }
  .masthead { grid-template-rows: 60px 46px; padding: 0 16px; gap: 0; }
  .brand { gap: 8px; }
  .brand-copy strong { font-size: 16px; }
  .navigation-group { gap: 7px; }
  .navigation-group .nav-button { min-height: 44px; padding-left: 7px; padding-right: 7px; font-size: 13.5px; }
  .navigation-group .nav-button.active::after { left: 12px; right: 12px; }
  .navigation-group .ask-button { min-height: 44px; padding: 8px 9px; font-size: 12.5px; }
  .discovery-toolbar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .directory-intro,
  .explore-view[data-layout="directory"] .directory-intro { padding: 14px 16px 0; }
  .directory-intro h1,
  .explore-view[data-layout="directory"] .directory-intro h1 { font-size: 22px; }
  .directory-panel.goal-active .directory-intro { max-height: min(65%, calc(100% - 145px)); }
  .directory-results,
  .explore-view[data-layout="directory"] .directory-results { padding: 0 16px; }
  .explore-view[data-layout="directory"] .organisation-card { padding: 12px 0; }
  .organisation-card h3 { font-size: 14px; }
  .directory-footer,
  .explore-view[data-layout="directory"] .directory-footer { padding: 5px 16px; }
  .discovery-shortcuts button,
  .directory-intro .filter-pill,
  .directory-controls .text-button,
  .directory-controls .sort-button,
  .directory-footer .text-button,
  .directory-footer .admin-link { min-height: 44px; }
  .content-view { padding: 22px 18px 28px; }
  .page-intro h1,
  .connections-view > .page-intro h1 { font-size: 25px; }
  .connection-type-filters .filter-pill { min-height: 44px; }
  .network-focus-card { padding: 14px 12px; }
  .network-focus-card h2 { font-size: 16px; }
  .profile-panel .profile-hero h2 { font-size: 20px; }
  .profile-panel .profile-tags .tag { min-height: 44px; padding: 7px 9px; }
  #guides-view[data-planner-state="questions"] { padding: 10px 12px; gap: 8px; }
  #guides-view[data-planner-state="questions"] .page-intro h1 { font-size: 25px; }
  #guides-view[data-planner-state="questions"] .planner-header { padding: 10px 12px 0; }
  #guides-view[data-planner-state="questions"] #planner-form { padding: 10px 12px; }
  #guides-view[data-planner-state="questions"] .planner-question-content > h3 { font-size: 21px; }
  #planner-form .planner-choice { min-height: 72px; padding: 12px 29px 12px 11px; }
  .planner-choice input { right: 10px; top: 14px; }
  #guides-view[data-planner-state="questions"] .goal-choices .planner-choice { min-height: 56px; padding: 10px 28px 10px 10px; }
  #guides-view[data-planner-state="questions"] .goal-choices .planner-choice-copy strong { font-size: 14px; }
  #guides-view[data-planner-state="questions"] .quick-topics .interest-choices { gap: 6px; }
  #guides-view[data-planner-state="questions"] .quick-topics label { padding: 7px 8px; }
  #itinerary-result .route-intro h2,
  .route-intro > h2 { font-size: 23px; }
  .dialog-header { padding-left: 16px; padding-right: 12px; }
  .guide-role-bar { padding: 8px 16px; }
  .guide-role-bar .role-pill,
  #guide-start-over { min-height: 44px; }
  .guide-conversation { padding: 20px 18px; }
  .guide-welcome h2 { font-size: 28px; }
  .guide-question-form { padding: 10px 14px max(12px, env(safe-area-inset-bottom)); }

  /* Editable text remains 16px so focusing a field does not zoom on iOS. */
  input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
  textarea,
  select,
  .directory-intro .search-field input,
  .connections-toolbar .search-field input,
  .guide-question-input textarea,
  .network-controls select,
  .sidebar-goal-selects select,
  .map-style-control select,
  .question-form-footer select,
  #planner-form select,
  #planner-form textarea,
  #profile-share-link { font-size: 16px; }
  .map-style-control select { max-width: 112px; }
}

@media (max-width: 390px) {
  .brand-copy strong { font-size: 15px; }
  .navigation-group .nav-button { padding-left: 5px; padding-right: 5px; }
}

@media (max-height: 700px) and (max-width: 650px) {
  #guides-view[data-planner-state="questions"] { padding: 8px 12px; }
  #guides-view[data-planner-state="questions"] .page-intro h1 { font-size: 23px; }
  #guides-view[data-planner-state="questions"] .planner-header { padding-top: 8px; }
  #guides-view[data-planner-state="questions"] .planner-meter-copy { min-height: 20px; }
  #guides-view[data-planner-state="questions"] .planner-questions .goal-choices .planner-choice { min-height: 52px; }
  #guides-view[data-planner-state="questions"] .goal-choices .planner-choice-copy strong { font-size: 14px; }
  #guides-view[data-planner-state="questions"] .planner-help { font-size: 13.5px; margin: 4px 0 8px; }
}

/* Compact desktop chips retain larger hit areas on touch-enabled devices. */
@media (pointer: coarse) {
  .discovery-view-switch button,
  .discovery-toolbar .visit-cta,
  .discovery-shortcuts button,
  .directory-intro .filter-pill,
  .directory-controls .text-button,
  .directory-controls .sort-button,
  .directory-footer .text-button,
  .directory-footer .admin-link,
  .profile-panel .profile-tags .tag,
  .connection-type-filters .filter-pill,
  .guide-role-bar .role-pill,
  #guide-start-over { min-height: 44px; }
}

.profile-panel .profile-actions-top .profile-close { margin-left:auto; width:44px; height:44px; min-height:44px; border-radius:6px; color:var(--muted); }