/* ==== tokens: written by pages/companion/tokens.py, do not edit ==== */
:root {
  /* ---- CatalogueList: design/component/CatalogueListTokens.kt, object CatalogueListTokens ---- */
  --catalogue-list-background: var(--palette-background);
  --catalogue-list-side-margin: var(--spacing-screen-margin);
  --catalogue-list-header-height: 290px;
  --catalogue-list-header-bottom-radius: var(--radius-card);
  --catalogue-list-back-icon-size: 16px;
  --catalogue-list-back-icon-tint: var(--palette-on-brand);
  --catalogue-list-back-top: 18px;
  --catalogue-list-back-touch-target: var(--sizing-min-touch-target);
  --catalogue-list-back-to-title: 36px;
  --catalogue-list-title-style: var(--typography-headline-bold);
  --catalogue-list-title-to-subtitle: var(--spacing-sm);
  --catalogue-list-subtitle-style: var(--typography-body-medium);
  --catalogue-list-subtitle-to-tabs: var(--spacing-lg);
  --catalogue-list-header-text-color: var(--palette-on-brand);
  --catalogue-list-header-to-body: var(--spacing-sm);
  --catalogue-list-search-height: 50px;
  --catalogue-list-search-radius: var(--radius-pill);
  --catalogue-list-search-fill: var(--palette-surface);
  --catalogue-list-search-icon-inset: var(--spacing-lg);
  --catalogue-list-search-icon-tint: var(--palette-placeholder);
  --catalogue-list-search-placeholder-color: var(--palette-placeholder);
  --catalogue-list-search-text-color: var(--palette-text-primary);
  --catalogue-list-search-text-style: var(--typography-body);
  --catalogue-list-top-to-rows: var(--spacing-sm);
  --catalogue-list-plans-to-links: var(--spacing-lg);
  --catalogue-list-plans-to-note: var(--spacing-sm);
  --catalogue-list-note-style: var(--typography-caption);
  --catalogue-list-note-color: var(--palette-text-secondary);
  --catalogue-list-bottom-padding: var(--spacing-lg);
  --catalogue-list-placeholder-count: 6;
  --catalogue-list-special-gap: var(--spacing-sm);
  --catalogue-list-special-placeholder-count: 3;
  --catalogue-list-row-placeholder-height: 50px;
  --catalogue-list-row-placeholder-radius: var(--radius-md);
  --catalogue-list-header-to-status: 40px;

  /* ---- CompanionMenu: design/component/CompanionMenuTokens.kt, object CompanionMenuTokens ---- */
  --companion-menu-background: var(--palette-background);
  --companion-menu-side-margin: var(--spacing-screen-margin);
  --companion-menu-hero-height: 220px;
  --companion-menu-hero-bottom-radius: var(--radius-lg);
  --companion-menu-hero-title-to-subtitle: 14px;
  --companion-menu-hero-subtitle-to-bottom: 30px;
  --companion-menu-hero-subtitle-max-lines: 2;
  --companion-menu-hero-to-grid: var(--spacing-lg);
  --companion-menu-columns: 2;
  --companion-menu-tile-height: 120px;
  --companion-menu-tile-gap: var(--spacing-sm);
  --companion-menu-tile-radius: var(--radius-card);
  --companion-menu-tile-fill: var(--palette-surface);
  --companion-menu-tile-image-size: 50px;
  --companion-menu-tile-image-top: 21px;
  --companion-menu-tile-label-top: 81px;
  --companion-menu-tile-label-style: var(--typography-body-strong);
  --companion-menu-tile-label-color: var(--palette-text-primary);
  --companion-menu-tile-label-inset: var(--spacing-xs);
  --companion-menu-tile-label-max-lines: 1;
  --companion-menu-tile-label-min-scale: var(--sizing-min-text-scale);
  --companion-menu-tile-touch-target: var(--sizing-min-touch-target);
  --companion-menu-tile-off-opacity: 0.4;
  --companion-menu-soon-top: var(--spacing-sm);
  --companion-menu-soon-leading-inset: var(--spacing-sm);
  --companion-menu-soon-height: 20px;
  --companion-menu-soon-radius: var(--radius-xs);
  --companion-menu-soon-padding: var(--spacing-xs);
  --companion-menu-soon-fill: var(--palette-text-emphasis);
  --companion-menu-soon-label-style: var(--typography-micro-strong);
  --companion-menu-soon-label-color: var(--palette-on-brand);
  --companion-menu-grid-to-saved: var(--spacing-lg);
  --companion-menu-grid-to-bottom: 36px;

  /* ---- CompanionStanding: design/component/CompanionStandingTokens.kt, object CompanionStandingTokens ---- */
  --companion-standing-fill: var(--palette-surface);
  --companion-standing-radius: var(--radius-card);
  --companion-standing-border-width: 1px;
  --companion-standing-border-color: var(--palette-border);
  --companion-standing-padding: var(--spacing-lg);
  --companion-standing-icon-circle: 56px;
  --companion-standing-icon-size: 28px;
  --companion-standing-icon-tint: var(--palette-on-brand);
  --companion-standing-icon-to-title: var(--spacing-md);
  --companion-standing-title-style: var(--typography-body-bold);
  --companion-standing-title-color: var(--palette-navy);
  --companion-standing-title-to-message: var(--spacing-sm);
  --companion-standing-message-style: var(--typography-label);
  --companion-standing-message-color: var(--palette-text-secondary);
  --companion-standing-message-to-points: var(--spacing-md);
  --companion-standing-point-gap: var(--spacing-sm);
  --companion-standing-point-icon-size: 16px;
  --companion-standing-point-icon-tint: var(--palette-positive);
  --companion-standing-point-icon-to-text: var(--spacing-sm);
  --companion-standing-point-style: var(--typography-label);
  --companion-standing-point-color: var(--palette-text-emphasis);
  --companion-standing-content-to-button: var(--spacing-lg);
  --companion-standing-note-padding-horizontal: var(--spacing-md);
  --companion-standing-note-padding-vertical: var(--spacing-sm);
  --companion-standing-note-radius: var(--radius-md);
  --companion-standing-note-icon-size: 18px;
  --companion-standing-note-icon-to-text: var(--spacing-sm);
  --companion-standing-note-title-style: var(--typography-caption-strong);
  --companion-standing-note-title-color: var(--palette-navy);
  --companion-standing-note-message-style: var(--typography-caption-medium);
  --companion-standing-note-message-color: var(--palette-text-secondary);
  --companion-standing-note-action-style: var(--typography-caption-strong);
  --companion-standing-note-action-color: var(--palette-brand);
  --companion-standing-note-action-touch-target: var(--sizing-min-touch-target);
  --companion-standing-meter-height: 4px;
  --companion-standing-meter-radius: 2px;
  --companion-standing-meter-top: var(--spacing-sm);
  --companion-standing-meter-track: var(--palette-border);
  --companion-standing-meter-fill: var(--palette-positive);
  --companion-standing-meter-low-fill: var(--palette-warning);
  --companion-standing-meter-low-fraction: 0.2;
  --companion-standing-accent-included: var(--palette-positive);
  --companion-standing-accent-taste: var(--palette-brand);
  --companion-standing-accent-not-included: var(--palette-brand);
  --companion-standing-accent-sign-in-needed: var(--palette-brand);
  --companion-standing-accent-allowance-used: var(--palette-warning);
  --companion-standing-accent-paused: var(--palette-text-secondary);
  --companion-standing-accent-unavailable: var(--palette-text-secondary);

  /* ---- CompanionMap: design/component/CompanionMapTokens.kt, object CompanionMapTokens ---- */
  --companion-map-navigation-span-meters: 600px;
  --companion-map-route-padding: 60px;
  --companion-map-pin-size: 40px;
  --companion-map-pin-selected-size: 54px;
  --companion-map-pin-icon-size: 20px;
  --companion-map-pin-selected-icon-size: 28px;
  --companion-map-pin-shadow: var(--elevation-floating);
  --companion-map-pin-icon-tint: var(--palette-on-brand);
  --companion-map-pin-outline-width: 2px;
  --companion-map-pin-outline-color: var(--palette-on-brand);
  --companion-map-route-line-width: 6px;
  --companion-map-route-line-color: var(--palette-brand);
  --companion-map-walk-dot: 6px;
  --companion-map-walk-gap: 6px;
  --companion-map-walk-color: var(--palette-text-secondary);
  --companion-map-origin-ring-size: 20px;
  --companion-map-origin-ring-width: 5px;
  --companion-map-origin-ring-color: var(--palette-brand);
  --companion-map-origin-ring-fill: var(--palette-background);
  --companion-map-destination-width: 16px;
  --companion-map-destination-height: 20px;
  --companion-map-destination-tint: var(--palette-danger);
  --companion-map-user-marker-size: 30px;
  --companion-map-user-marker-fill: var(--palette-background);
  --companion-map-user-marker-shadow: var(--elevation-floating);
  --companion-map-user-marker-icon-size: 13px;
  --companion-map-user-marker-icon-tint: var(--palette-brand);
  --companion-map-follow-rest-millis: 700ms;
  --companion-map-camera-move-millis: 400ms;
  --companion-map-not-configured-fill: var(--palette-row-plain);
  --companion-map-not-configured-style: var(--typography-label);
  --companion-map-not-configured-color: var(--palette-text-secondary);

  /* ---- Places: design/component/PlacesTokens.kt, object PlacesTokens ---- */
  --places-background: var(--palette-background);
  --places-side-margin: var(--spacing-screen-margin);
  --places-map-height: 500px;
  --places-map-bottom-radius: var(--radius-card);
  --places-map-fade: var(--palette-brand) 8.4%, rgba(20, 94, 238, 0) 51.6%;
  --places-back-icon-size: 16px;
  --places-back-icon-tint: var(--palette-on-brand);
  --places-back-top: 18px;
  --places-back-touch-target: var(--sizing-min-touch-target);
  --places-saved-icon-width: 20px;
  --places-saved-icon-height: 17px;
  --places-saved-icon-tint: var(--palette-on-brand);
  --places-saved-touch-target: var(--sizing-min-touch-target);
  --places-title-style: var(--typography-screen-title);
  --places-title-color: var(--palette-on-brand);
  --places-title-to-search: 17px;
  --places-search-height: 50px;
  --places-search-radius: var(--radius-pill);
  --places-search-fill: var(--palette-background);
  --places-search-icon-inset: 15px;
  --places-search-icon-tint: var(--palette-brand);
  --places-search-placeholder-color: var(--palette-text-muted);
  --places-search-text-color: var(--palette-text-primary);
  --places-search-text-style: var(--typography-body);
  --places-search-to-chips: var(--spacing-sm);
  --places-search-debounce-millis: 400ms;
  --places-chip-height: 30px;
  --places-chip-gap: 5px;
  --places-chip-padding: 8px;
  --places-chip-icon-size: 14px;
  --places-chip-icon-to-label: 5px;
  --places-chip-fill: var(--palette-background);
  --places-chip-label-style: var(--typography-caption-medium);
  --places-chip-label-color: var(--palette-text-muted);
  --places-chip-selected-fill: var(--palette-brand);
  --places-chip-selected-color: var(--palette-on-brand);
  --places-off-opacity: 0.4;
  --places-locate-size: 60px;
  --places-locate-fill: var(--palette-background);
  --places-locate-shadow: var(--elevation-floating);
  --places-locate-icon-size: 30px;
  --places-locate-icon-tint: var(--palette-brand);
  --places-locate-trailing-inset: var(--spacing-lg);
  --places-locate-bottom-inset: var(--spacing-lg);
  --places-weather-top: var(--spacing-sm);
  --places-weather-height: 30px;
  --places-weather-padding: 10px;
  --places-weather-fill: var(--palette-background);
  --places-weather-style: var(--typography-caption-strong);
  --places-weather-color: var(--palette-text-emphasis);
  --places-weather-to-credit: 6px;
  --places-weather-credit-style: var(--typography-micro);
  --places-weather-credit-color: var(--palette-text-secondary);
  --places-refresh-line-height: 3px;
  --places-refresh-line-color: var(--palette-brand);
  --places-map-to-standing: var(--spacing-md);
  --places-map-to-filters: var(--spacing-md);
  --places-filters-gap: var(--spacing-sm);
  --places-filters-to-cards: var(--spacing-md);
  --places-open-now-tint: var(--palette-positive);
  --places-open-now-fill: var(--palette-row-plain);
  --places-cards-to-credit: var(--spacing-md);
  --places-credit-style: var(--typography-caption-medium);
  --places-credit-color: var(--palette-text-secondary);
  --places-map-to-cards: var(--spacing-lg);
  --places-card-gap: var(--spacing-sm);
  --places-bottom-padding: var(--spacing-lg);
  --places-placeholder-count: 3;
  --places-placeholder-fill: var(--palette-surface);
  --places-map-to-status: 40px;

  /* ---- PlaceCard: design/component/PlacesTokens.kt, object PlaceCardTokens ---- */
  --place-card-min-height: 162px;
  --place-card-radius: var(--radius-card);
  --place-card-fill: var(--palette-background);
  --place-card-border-width: 1px;
  --place-card-border-color: var(--palette-border);
  --place-card-picture-inset: var(--spacing-sm);
  --place-card-picture-width: 148px;
  --place-card-picture-height: 142px;
  --place-card-picture-radius: var(--radius-md);
  --place-card-artwork-fill-opacity: 0.14;
  --place-card-artwork-icon-size: 56px;
  --place-card-picture-loading-fill: var(--palette-row-plain);
  --place-card-heart-circle: 24px;
  --place-card-heart-inset: var(--spacing-sm);
  --place-card-heart-fill: var(--palette-background);
  --place-card-heart-width: 12px;
  --place-card-heart-height: 10px;
  --place-card-heart-tint: var(--palette-text-secondary);
  --place-card-heart-saved-tint: var(--palette-danger);
  --place-card-heart-touch-target: var(--sizing-min-touch-target);
  --place-card-badge-size: 40px;
  --place-card-badge-radius: var(--radius-md);
  --place-card-badge-inset: 15px;
  --place-card-badge-icon-size: 20px;
  --place-card-badge-icon-tint: var(--palette-on-brand);
  --place-card-picture-to-text: 12px;
  --place-card-name-top: 15px;
  --place-card-name-style: var(--typography-body-bold);
  --place-card-name-color: var(--palette-brand);
  --place-card-name-to-badge: var(--spacing-sm);
  --place-card-name-min-scale: 0.8;
  --place-card-name-max-lines: 3;
  --place-card-kind-max-lines: 2;
  --place-card-name-to-kind: 5px;
  --place-card-kind-style: var(--typography-caption-medium);
  --place-card-kind-color: var(--palette-text-emphasis);
  --place-card-row-gap: var(--spacing-sm);
  --place-card-star-size: 14px;
  --place-card-star-tint: var(--palette-place-restaurant);
  --place-card-rating-gap: 5px;
  --place-card-rating-style: var(--typography-label-bold);
  --place-card-rating-color: var(--palette-text-emphasis);
  --place-card-rating-count-style: var(--typography-caption-medium);
  --place-card-rating-count-color: var(--palette-text-emphasis);
  --place-card-open-style: var(--typography-caption-strong);
  --place-card-open-color: var(--palette-positive);
  --place-card-closed-color: var(--palette-danger);
  --place-card-clock-size: 14px;
  --place-card-pin-width: 12px;
  --place-card-pin-height: 14px;
  --place-card-fact-icon-to-text: 5px;
  --place-card-fact-gap: var(--spacing-sm);
  --place-card-fact-style: var(--typography-caption-medium);
  --place-card-fact-color: var(--palette-text-secondary);
  --place-card-button-height: 30px;
  --place-card-button-bottom-inset: 15px;
  --place-card-button-fill: var(--palette-brand);
  --place-card-button-leading-padding: var(--spacing-sm);
  --place-card-button-trailing-padding: 11px;
  --place-card-button-icon-size: 14px;
  --place-card-button-icon-to-label: 5px;
  --place-card-button-label-style: var(--typography-label);
  --place-card-button-color: var(--palette-on-brand);
  --place-card-button-touch-target: var(--sizing-min-touch-target);

  /* ---- PlacePage: design/component/PlacePageTokens.kt, object PlacePageTokens ---- */
  --place-page-background: var(--palette-background);
  --place-page-side-margin: var(--spacing-screen-margin);
  --place-page-bottom-padding: var(--spacing-xl);
  --place-page-picture-height: 260px;
  --place-page-picture-bottom-radius: var(--radius-card);
  --place-page-artwork-fill-opacity: 0.14;
  --place-page-artwork-icon-size: 96px;
  --place-page-picture-scrim: var(--palette-navy-veil);
  --place-page-picture-scrim-height: 110px;
  --place-page-picture-credit-style: var(--typography-micro);
  --place-page-picture-credit-color: var(--palette-on-brand);
  --place-page-picture-credit-fill: var(--palette-navy-veil);
  --place-page-picture-credit-padding: 6px;
  --place-page-picture-credit-inset: var(--spacing-sm);
  --place-page-picture-credit-radius: var(--radius-xs);
  --place-page-back-icon-size: 16px;
  --place-page-icons-top: 18px;
  --place-page-icon-tint: var(--palette-on-brand);
  --place-page-icon-touch-target: var(--sizing-min-touch-target);
  --place-page-share-icon-size: 20px;
  --place-page-save-icon-size: 20px;
  --place-page-saved-tint: var(--palette-danger);
  --place-page-picture-to-name: var(--spacing-md);
  --place-page-name-style: var(--typography-title-large);
  --place-page-name-color: var(--palette-brand);
  --place-page-name-to-kind: var(--spacing-xxs);
  --place-page-kind-style: var(--typography-label);
  --place-page-kind-color: var(--palette-text-emphasis);
  --place-page-kind-to-facts: var(--spacing-sm);
  --place-page-fact-gap: var(--spacing-md);
  --place-page-fact-row-gap: var(--spacing-xs);
  --place-page-price-style: var(--typography-caption-medium);
  --place-page-price-color: var(--palette-text-secondary);
  --place-page-facts-to-buttons: var(--spacing-lg);
  --place-page-button-size: 52px;
  --place-page-button-icon-size: 22px;
  --place-page-button-gap: var(--spacing-md);
  --place-page-button-row-gap: var(--spacing-md);
  --place-page-button-to-label: 6px;
  --place-page-button-label-width: 76px;
  --place-page-button-label-max-lines: 2;
  --place-page-button-label-style: var(--typography-caption-medium);
  --place-page-button-label-color: var(--palette-text-emphasis);
  --place-page-primary-fill: var(--palette-brand);
  --place-page-primary-icon-tint: var(--palette-on-brand);
  --place-page-secondary-fill: var(--palette-background);
  --place-page-secondary-border-width: 1px;
  --place-page-secondary-border-color: var(--palette-border);
  --place-page-secondary-icon-tint: var(--palette-brand);
  --place-page-buttons-to-message: var(--spacing-sm);
  --place-page-message-style: var(--typography-caption-medium);
  --place-page-message-color: var(--palette-danger);
  --place-page-buttons-to-content: var(--spacing-xl);
  --place-page-section-gap: var(--spacing-xl);
  --place-page-placeholder-count: 4;
  --place-page-placeholder-height: 48px;
  --place-page-placeholder-fill: var(--palette-surface);
  --place-page-notice-style: var(--typography-label-strong);
  --place-page-notice-color: var(--palette-danger);
  --place-page-row-gap: var(--spacing-sm);
  --place-page-section-title-style: var(--typography-body-bold);
  --place-page-section-title-color: var(--palette-navy);
  --place-page-section-title-to-content: var(--spacing-sm);
  --place-page-hours-status-style: var(--typography-caption-strong);
  --place-page-hours-open-color: var(--palette-positive);
  --place-page-hours-closed-color: var(--palette-danger);
  --place-page-hours-line-style: var(--typography-label);
  --place-page-hours-line-color: var(--palette-text-emphasis);
  --place-page-hours-line-gap: 6px;
  --place-page-review-style: var(--typography-label);
  --place-page-review-color: var(--palette-text-emphasis);
  --place-page-review-to-disclosure: var(--spacing-sm);
  --place-page-disclosure-style: var(--typography-micro);
  --place-page-disclosure-color: var(--palette-text-secondary);
  --place-page-disclosure-to-links: var(--spacing-xs);
  --place-page-link-style: var(--typography-caption-strong);
  --place-page-link-color: var(--palette-brand);
  --place-page-link-gap: var(--spacing-lg);
  --place-page-link-touch-target: var(--sizing-min-touch-target);
  --place-page-access-yes-tint: var(--palette-positive);
  --place-page-access-no-tint: var(--palette-text-secondary);
  --place-page-access-icon-size: 16px;
  --place-page-access-icon-to-text: var(--spacing-sm);
  --place-page-access-row-gap: var(--spacing-sm);
  --place-page-access-label-style: var(--typography-label);
  --place-page-access-label-color: var(--palette-navy);
  --place-page-access-value-style: var(--typography-caption-medium);
  --place-page-access-value-color: var(--palette-text-secondary);
  --place-page-content-to-credit: var(--spacing-xl);
  --place-page-credit-style: var(--typography-caption-medium);
  --place-page-credit-color: var(--palette-text-secondary);

  /* ---- TripPlanner: design/component/TripPlannerTokens.kt, object TripPlannerTokens ---- */
  --trip-planner-compose-top: var(--spacing-xl);
  --trip-planner-compose-message-to-form: var(--spacing-xl);
  --trip-planner-compose-label-to-control: var(--spacing-sm);
  --trip-planner-compose-group-gap: var(--spacing-lg);
  --trip-planner-compose-to-button: var(--spacing-xl);
  --trip-planner-compose-button-to-message: var(--spacing-sm);
  --trip-planner-compose-label-style: var(--typography-label-strong);
  --trip-planner-compose-label-color: var(--palette-navy);
  --trip-planner-compose-failure-style: var(--typography-caption-medium);
  --trip-planner-compose-failure-color: var(--palette-danger);
  --trip-planner-compose-field-to-including: var(--spacing-xs);
  --trip-planner-compose-including-style: var(--typography-caption-medium);
  --trip-planner-compose-including-color: var(--palette-navy);
  --trip-planner-offline-card-to-top: var(--spacing-md);
  --trip-planner-offline-to-tabs: var(--spacing-md);
  --trip-planner-offline-radius: var(--radius-card);
  --trip-planner-offline-fill: var(--palette-surface);
  --trip-planner-offline-inset: var(--spacing-md);
  --trip-planner-offline-icon-size: 22px;
  --trip-planner-offline-icon-tint: var(--palette-brand);
  --trip-planner-offline-icon-to-title: var(--spacing-xs);
  --trip-planner-offline-title-style: var(--typography-body-strong);
  --trip-planner-offline-title-color: var(--palette-navy);
  --trip-planner-offline-close-size: 20px;
  --trip-planner-offline-close-tint: var(--palette-text-secondary);
  --trip-planner-offline-title-to-body: var(--spacing-xs);
  --trip-planner-offline-body-style: var(--typography-label);
  --trip-planner-offline-body-color: var(--palette-text-emphasis);
  --trip-planner-offline-body-to-app: var(--spacing-md);
  --trip-planner-offline-button-to-steps: var(--spacing-xs);
  --trip-planner-offline-step-style: var(--typography-caption);
  --trip-planner-offline-step-color: var(--palette-text-emphasis);
  --trip-planner-offline-step-number-color: var(--palette-brand);
  --trip-planner-offline-step-gap: var(--spacing-xxs);
  --trip-planner-offline-app-gap: var(--spacing-md);
  --trip-planner-offline-to-message: var(--spacing-xs);
  --trip-planner-offline-message-style: var(--typography-caption-medium);
  --trip-planner-offline-message-color: var(--palette-danger);
  --trip-planner-standing-to-card: var(--spacing-md);
  --trip-planner-content-to-credit: var(--spacing-lg);
  --trip-planner-credit-style: var(--typography-caption-medium);
  --trip-planner-credit-color: var(--palette-text-secondary);
  --trip-planner-background: var(--palette-background);
  --trip-planner-side-margin: var(--spacing-screen-margin);
  --trip-planner-back-icon-size: 16px;
  --trip-planner-back-top: 18px;
  --trip-planner-header-tint: var(--palette-text-emphasis);
  --trip-planner-title-style: var(--typography-screen-title);
  --trip-planner-bookmark-width: 16px;
  --trip-planner-bookmark-height: 20px;
  --trip-planner-share-size: 20px;
  --trip-planner-header-icon-gap: var(--spacing-sm);
  --trip-planner-header-touch-target: var(--sizing-min-touch-target);
  --trip-planner-title-to-card: var(--spacing-lg);
  --trip-planner-card-height: 172px;
  --trip-planner-card-radius: var(--radius-card);
  --trip-planner-card-fill: var(--palette-background);
  --trip-planner-card-border-width: 1px;
  --trip-planner-card-border-color: var(--palette-border);
  --trip-planner-card-picture-inset: 15px;
  --trip-planner-card-picture-width: 148px;
  --trip-planner-card-picture-height: 142px;
  --trip-planner-card-picture-radius: var(--radius-md);
  --trip-planner-card-picture-fallback-fill: var(--palette-row-plain);
  --trip-planner-card-picture-to-text: var(--spacing-sm);
  --trip-planner-card-title-top: 15px;
  --trip-planner-card-title-style: var(--typography-body-bold);
  --trip-planner-card-title-color: var(--palette-brand);
  --trip-planner-card-trailing-inset: 15px;
  --trip-planner-card-title-to-length: 8px;
  --trip-planner-card-length-to-dates: 11px;
  --trip-planner-card-dates-to-suggested: 15px;
  --trip-planner-length-icon-size: 14px;
  --trip-planner-dates-icon-width: 13px;
  --trip-planner-dates-icon-height: 14px;
  --trip-planner-suggested-icon-size: 14px;
  --trip-planner-card-icon-to-text: var(--spacing-sm);
  --trip-planner-suggested-icon-to-text: 6px;
  --trip-planner-card-line-style: var(--typography-caption-medium);
  --trip-planner-card-line-color: var(--palette-text-secondary);
  --trip-planner-edit-height: 30px;
  --trip-planner-edit-bottom-inset: 15px;
  --trip-planner-edit-fill: var(--palette-brand);
  --trip-planner-edit-padding: var(--spacing-sm);
  --trip-planner-edit-icon-size: 14px;
  --trip-planner-edit-icon-to-label: 5px;
  --trip-planner-edit-label-style: var(--typography-label-strong);
  --trip-planner-edit-color: var(--palette-on-brand);
  --trip-planner-card-to-message: var(--spacing-xs);
  --trip-planner-message-style: var(--typography-caption);
  --trip-planner-message-color: var(--palette-error);
  --trip-planner-card-to-tabs: 7px;
  --trip-planner-tabs-to-rows: 16px;
  --trip-planner-row-height: 100px;
  --trip-planner-row-gap: var(--spacing-sm);
  --trip-planner-rail-width: 75px;
  --trip-planner-rail-to-card: var(--spacing-lg);
  --trip-planner-dot-size: 21px;
  --trip-planner-dot-fill: var(--palette-brand);
  --trip-planner-line-width: 1px;
  --trip-planner-line-dash: 2px;
  --trip-planner-line-gap: 2px;
  --trip-planner-line-color: var(--palette-text-secondary);
  --trip-planner-dot-to-icon: 7px;
  --trip-planner-kind-icon-size: 20px;
  --trip-planner-centre-to-time: 6px;
  --trip-planner-time-style: var(--typography-body-medium);
  --trip-planner-time-color: var(--palette-text-emphasis);
  --trip-planner-stop-radius: var(--radius-card);
  --trip-planner-stop-fill: var(--palette-background);
  --trip-planner-stop-border-width: 1px;
  --trip-planner-stop-border-color: var(--palette-border);
  --trip-planner-stop-picture-inset: var(--spacing-sm);
  --trip-planner-stop-picture-width: 100px;
  --trip-planner-stop-picture-height: 80px;
  --trip-planner-stop-picture-radius: var(--radius-md);
  --trip-planner-stop-picture-fallback-fill: var(--palette-row-plain);
  --trip-planner-stop-picture-fallback-icon-size: 30px;
  --trip-planner-stop-picture-fallback-icon-tint: var(--palette-icon-muted);
  --trip-planner-stop-picture-to-text: var(--spacing-sm);
  --trip-planner-stop-name-top: 16px;
  --trip-planner-stop-name-style: var(--typography-body-bold);
  --trip-planner-stop-name-color: var(--palette-brand);
  --trip-planner-stop-trailing-inset: 15px;
  --trip-planner-stop-line-gap: var(--spacing-sm);
  --trip-planner-stop-kind-style: var(--typography-caption-medium);
  --trip-planner-stop-kind-color: var(--palette-text-emphasis);
  --trip-planner-stop-clock-size: 14px;
  --trip-planner-stop-pin-width: 12px;
  --trip-planner-stop-pin-height: 14px;
  --trip-planner-stop-fact-icon-to-text: 5px;
  --trip-planner-stop-fact-gap: var(--spacing-sm);
  --trip-planner-stop-fact-style: var(--typography-caption-medium);
  --trip-planner-stop-fact-color: var(--palette-text-secondary);
  --trip-planner-rows-to-bar: var(--spacing-lg);
  --trip-planner-bar-height: 60px;
  --trip-planner-bar-radius: var(--radius-pill);
  --trip-planner-bar-fill: var(--palette-brand);
  --trip-planner-bar-button-inset: var(--spacing-sm);
  --trip-planner-bar-button-height: 40px;
  --trip-planner-bar-button-radius: var(--radius-sm);
  --trip-planner-bar-button-fill: var(--palette-brand-shade);
  --trip-planner-bar-button-padding: var(--spacing-lg);
  --trip-planner-bar-button-icon-size: 14px;
  --trip-planner-bar-button-icon-to-label: 7px;
  --trip-planner-bar-label-style: var(--typography-label);
  --trip-planner-bar-color: var(--palette-on-brand);
  --trip-planner-bar-button-off-opacity: 0.4;
  --trip-planner-bar-summary-icon-width: 16px;
  --trip-planner-bar-summary-icon-height: 20px;
  --trip-planner-bar-summary-icon-to-text: var(--spacing-sm);
  --trip-planner-bottom-padding: var(--spacing-lg);
  --trip-planner-placeholder-stop-count: 3;
  --trip-planner-placeholder-fill: var(--palette-surface);
  --trip-planner-header-to-status: 40px;
  --trip-planner-tabs-to-status: 40px;

  /* ---- Route: design/component/RouteTokens.kt, object RouteTokens ---- */
  --route-side-margin: var(--spacing-screen-margin);
  --route-card-fill: var(--palette-background);
  --route-card-radius: var(--radius-card);
  --route-card-shadow: var(--elevation-floating);
  --route-back-icon-size: 16px;
  --route-back-top: 18px;
  --route-back-tint: var(--palette-text-emphasis);
  --route-back-touch-target: var(--sizing-min-touch-target);
  --route-back-to-top-card: var(--spacing-lg);
  --route-bottom-card-safe-gap: 6px;
  --route-bottom-card-edge-gap: var(--spacing-lg);
  --route-recentre-size: 50px;
  --route-recentre-fill: var(--palette-background);
  --route-recentre-icon-size: 22px;
  --route-recentre-icon-tint: var(--palette-brand);
  --route-recentre-to-card: var(--spacing-lg);
  --route-ends-height: 200px;
  --route-ends-marker-inset: 15px;
  --route-ends-ring-top: 15px;
  --route-ends-ring-size: 20px;
  --route-ends-ring-width: 5px;
  --route-ends-ring-color: var(--palette-brand);
  --route-ends-pin-top: 65px;
  --route-ends-pin-width: 16px;
  --route-ends-pin-height: 20px;
  --route-ends-pin-tint: var(--palette-danger);
  --route-ends-dash-width: 1px;
  --route-ends-dash: 2px;
  --route-ends-dash-color: var(--palette-text-secondary);
  --route-ends-marker-to-text: 5px;
  --route-ends-from-top: 12px;
  --route-ends-label-style: var(--typography-caption-medium);
  --route-ends-label-color: var(--palette-text-secondary);
  --route-ends-label-to-name: 5px;
  --route-ends-name-style: var(--typography-label-strong);
  --route-ends-name-color: var(--palette-brand);
  --route-ends-name-to-label: 15px;
  --route-ends-trailing-inset: 15px;
  --route-modes-top: 123px;
  --route-modes-inset: var(--spacing-sm);
  --route-mode-icon-to-label: 5px;
  --route-modes-to-summary: 8px;
  --route-summary-distance-style: var(--typography-label-bold);
  --route-summary-gap: 9px;
  --route-summary-sentence-style: var(--typography-caption-medium);
  --route-summary-color: var(--palette-text-secondary);
  --route-summary-placeholder-width: 180px;
  --route-summary-placeholder-height: 14px;
  --route-summary-placeholder-fill: var(--palette-surface);
  --route-summary-action-color: var(--palette-brand);
  --route-summary-to-note: 6px;
  --route-summary-note-style: var(--typography-micro);
  --route-summary-note-color: var(--palette-text-secondary);
  --route-summary-to-legs: var(--spacing-sm);
  --route-legs-max-height: 220px;
  --route-leg-gap: var(--spacing-sm);
  --route-leg-icon-circle: 28px;
  --route-leg-icon-circle-fill: var(--palette-surface);
  --route-leg-icon-size: 14px;
  --route-leg-icon-tint: var(--palette-text-emphasis);
  --route-leg-icon-to-text: var(--spacing-sm);
  --route-leg-badge-height: 20px;
  --route-leg-badge-padding: 6px;
  --route-leg-badge-radius: 6px;
  --route-leg-badge-to-title: 6px;
  --route-leg-badge-style: var(--typography-caption-strong);
  --route-leg-badge-fill: var(--palette-brand);
  --route-leg-badge-color: var(--palette-on-brand);
  --route-leg-title-style: var(--typography-caption-strong);
  --route-leg-title-color: var(--palette-navy);
  --route-leg-title-to-detail: 2px;
  --route-leg-detail-style: var(--typography-micro);
  --route-leg-detail-color: var(--palette-text-secondary);
  --route-leg-duration-style: var(--typography-caption-strong);
  --route-leg-duration-color: var(--palette-text-emphasis);
  --route-leg-time-style: var(--typography-micro);
  --route-leg-time-color: var(--palette-text-secondary);
  --route-credit-to-card: var(--spacing-sm);
  --route-credit-style: var(--typography-micro);
  --route-credit-color: var(--palette-text-secondary);
  --route-destination-height: 160px;
  --route-destination-picture-inset: var(--spacing-sm);
  --route-destination-picture-width: 162px;
  --route-destination-picture-height: 140px;
  --route-destination-picture-radius: var(--radius-pill);
  --route-destination-picture-fallback-fill: var(--palette-row-plain);
  --route-destination-picture-fallback-icon-size: 40px;
  --route-destination-picture-fallback-icon-tint: var(--palette-icon-muted);
  --route-destination-picture-to-text: 15px;
  --route-destination-name-top: 16px;
  --route-destination-name-style: var(--typography-title);
  --route-destination-name-color: var(--palette-brand);
  --route-destination-trailing-inset: 15px;
  --route-destination-name-to-area: 12px;
  --route-destination-area-to-day: var(--spacing-sm);
  --route-area-icon-size: 14px;
  --route-day-icon-width: 13px;
  --route-day-icon-height: 14px;
  --route-destination-icon-to-text: 11px;
  --route-destination-line-style: var(--typography-caption-medium);
  --route-destination-line-color: var(--palette-text-secondary);
  --route-start-bottom-inset: 18px;
  --route-start-width: 148px;
  --route-start-height: 40px;
  --route-start-radius: var(--radius-md);
  --route-start-fill: var(--palette-brand);
  --route-start-icon-size: 16px;
  --route-start-icon-to-label: var(--spacing-sm);
  --route-start-label-style: var(--typography-label-strong);
  --route-start-color: var(--palette-on-brand);
  --route-start-off-opacity: 0.4;
  --route-start-to-hint: 6px;
  --route-start-hint-style: var(--typography-micro);
  --route-start-hint-color: var(--palette-text-secondary);
  --route-start-message-color: var(--palette-danger);
  --route-save-size: 40px;
  --route-save-radius: var(--radius-md);
  --route-save-fill: var(--palette-row-plain);
  --route-save-icon-width: 14px;
  --route-save-icon-height: 20px;
  --route-save-tint: var(--palette-text-secondary);
  --route-saved-tint: var(--palette-brand);
  --route-step-height: 80px;
  --route-step-second-line: 24px;
  --route-step-tile-inset: 15px;
  --route-step-tile-size: 50px;
  --route-step-tile-radius: var(--radius-md);
  --route-step-tile-fill: var(--palette-text-emphasis);
  --route-step-tile-icon-tint: var(--palette-on-brand);
  --route-step-text-inset: var(--spacing-lg);
  --route-step-text-top: 15px;
  --route-step-text-to-tile: var(--spacing-sm);
  --route-step-instruction-style: var(--typography-heading);
  --route-step-instruction-color: var(--palette-brand);
  --route-step-instruction-max-lines: 2;
  --route-step-instruction-to-distance: 6px;
  --route-step-distance-style: var(--typography-body-medium);
  --route-step-distance-color: var(--palette-text-secondary);
  --route-trip-height: 230px;
  --route-trip-padding: var(--spacing-lg);
  --route-figures-height: 70px;
  --route-divider-width: 2px;
  --route-divider-color: var(--palette-card-plain);
  --route-divider-to-text: var(--spacing-lg);
  --route-traffic-icon-width: 20px;
  --route-traffic-icon-height: 15px;
  --route-traffic-icon-top: 7px;
  --route-traffic-icon-tint: var(--palette-brand);
  --route-traffic-icon-to-text: 6px;
  --route-traffic-style: var(--typography-body-strong);
  --route-figure-label-style: var(--typography-caption-medium);
  --route-figure-line-gap: 3px;
  --route-figure-number-style: var(--typography-heading);
  --route-figure-unit-style: var(--typography-body-medium);
  --route-figure-color: var(--palette-text-secondary);
  --route-figures-to-progress: var(--spacing-lg);
  --route-progress-ring-inset: 40px;
  --route-progress-ring-size: 20px;
  --route-progress-ring-width: 5px;
  --route-progress-origin-color: var(--palette-brand);
  --route-progress-destination-color: var(--palette-danger);
  --route-progress-parts: 4;
  --route-progress-track-height: 4px;
  --route-progress-done-color: var(--palette-brand);
  --route-progress-ahead-color: var(--palette-card-plain);
  --route-progress-joint-done: 12px;
  --route-progress-joint-ahead: 16px;
  --route-progress-to-names: 8px;
  --route-progress-name-style: var(--typography-caption-strong);
  --route-progress-name-color: var(--palette-brand);
  --route-names-to-buttons: 18px;
  --route-button-height: 40px;
  --route-button-radius: var(--radius-md);
  --route-button-gap: var(--spacing-sm);
  --route-sound-icon-width: 20px;
  --route-sound-icon-height: 15px;
  --route-sound-fill: var(--palette-text-secondary);
  --route-sound-off-fill: var(--palette-icon-muted);
  --route-show-route-fill: var(--palette-brand);
  --route-end-fill: var(--palette-danger);
  --route-button-icon-size: 20px;
  --route-button-icon-to-label: 5px;
  --route-button-label-style: var(--typography-label-strong);
  --route-button-color: var(--palette-on-brand);

  /* ---- Camera: design/component/CameraTokens.kt, object CameraTokens ---- */
  --camera-hint-to-standing: var(--spacing-sm);
  --camera-side-margin: var(--spacing-screen-margin);
  --camera-panel-fill: var(--palette-background);
  --camera-top-panel-height: 149px;
  --camera-top-panel-bottom-radius: var(--radius-card);
  --camera-back-icon-size: 16px;
  --camera-back-top: 18px;
  --camera-back-tint: var(--palette-text-emphasis);
  --camera-back-touch-target: var(--sizing-min-touch-target);
  --camera-title-style: var(--typography-screen-title);
  --camera-title-color: var(--palette-text-emphasis);
  --camera-flash-top: 6px;
  --camera-flash-size: 40px;
  --camera-flash-icon-width: 16px;
  --camera-flash-icon-height: 18px;
  --camera-flash-icon-tint: var(--palette-on-brand);
  --camera-flash-off-fill: var(--palette-text-emphasis);
  --camera-flash-on-fill: var(--palette-brand);
  --camera-flash-to-card: 13px;
  --camera-hint-height: 70px;
  --camera-hint-radius: var(--radius-card);
  --camera-hint-fill: var(--palette-row-plain);
  --camera-hint-tile-inset: 15px;
  --camera-hint-tile-size: 40px;
  --camera-hint-tile-radius: var(--radius-md);
  --camera-hint-tile-fill: var(--palette-brand);
  --camera-hint-icon-size: 24px;
  --camera-hint-icon-tint: var(--palette-on-brand);
  --camera-hint-tile-to-text: var(--spacing-sm);
  --camera-hint-title-top: 15px;
  --camera-hint-title-style: var(--typography-body-bold);
  --camera-hint-title-color: var(--palette-brand);
  --camera-hint-title-to-body: 7px;
  --camera-hint-body-style: var(--typography-caption-medium);
  --camera-hint-body-color: var(--palette-text-emphasis);
  --camera-bottom-panel-height: 100px;
  --camera-bottom-panel-top-radius: var(--radius-lg);
  --camera-bottom-panel-shadow: var(--elevation-floating);
  --camera-controls-top: var(--spacing-lg);
  --camera-shutter-ring: 80px;
  --camera-shutter-ring-width: 2px;
  --camera-shutter-disc: 70px;
  --camera-shutter-color: var(--palette-brand);
  --camera-shutter-icon-size: 30px;
  --camera-shutter-icon-tint: var(--palette-on-brand);
  --camera-side-control-offset: 130px;
  --camera-side-control-size: 60px;
  --camera-switch-fill: var(--palette-brand-outline);
  --camera-switch-icon-size: 30px;
  --camera-switch-icon-tint: var(--palette-text-emphasis);
  --camera-pressed-opacity: 0.7;
  --camera-disabled-opacity: 0.4;
  --camera-blocked-fill: var(--palette-navy);
  --camera-frozen-scrim: var(--palette-scrim);
  --camera-message-color: var(--palette-on-brand);
  --camera-patch-fill: rgba(255, 255, 255, 0.85);
  --camera-patch-radius: 4px;
  --camera-patch-text-color: var(--palette-text-primary);
  --camera-patch-text-weight: 500;
  --camera-patch-text-share: 0.7;
  --camera-patch-text-min: 10px;
  --camera-patch-text-max: 22px;
  --camera-patch-selected-border-width: 2px;
  --camera-patch-selected-border-color: var(--palette-brand);
  --camera-pill-width: 250px;
  --camera-pill-height: 50px;
  --camera-pill-fill: var(--palette-background);
  --camera-pill-above-panel: 25px;
  --camera-pill-inner-inset: 5px;
  --camera-pill-inner-width: 100px;
  --camera-pill-inner-height: 40px;
  --camera-pill-inner-fill: var(--palette-row-plain);
  --camera-pill-label-style: var(--typography-body-strong);
  --camera-pill-label-color: var(--palette-text-emphasis);
  --camera-pill-arrow-width: 20px;
  --camera-pill-arrow-height: 11px;
  --camera-pill-arrow-tint: var(--palette-text-emphasis);
  --camera-result-title-top: var(--spacing-lg);
  --camera-result-title-style: var(--typography-body-strong);
  --camera-result-title-color: var(--palette-text-emphasis);
  --camera-result-title-to-chips: 15px;
  --camera-chip-height: 40px;
  --camera-chip-gap: var(--spacing-sm);
  --camera-chip-padding: var(--spacing-sm);
  --camera-chip-fill: var(--palette-row-plain);
  --camera-chip-icon-to-label: 5px;
  --camera-chip-icon-tint: var(--palette-brand);
  --camera-chip-label-style: var(--typography-label);
  --camera-chip-label-color: var(--palette-text-secondary);
  --camera-chip-on-fill: var(--palette-brand-outline);
  --camera-chip-on-label-color: var(--palette-brand);
  --camera-select-all-icon-size: 16px;
  --camera-copy-icon-size: 16px;
  --camera-listen-icon-width: 20px;
  --camera-listen-icon-height: 15px;
  --camera-rate-style: var(--typography-label);
  --camera-rate-color: var(--palette-text-emphasis);
  --camera-sample-note-top: var(--spacing-sm);
  --camera-sample-note-height: 24px;
  --camera-sample-note-padding: var(--spacing-sm);
  --camera-sample-note-fill: var(--palette-scrim);
  --camera-sample-note-style: var(--typography-caption);
  --camera-sample-note-color: var(--palette-on-brand);
  --camera-live-above-panel: 25px;
  --camera-live-toggle-height: var(--sizing-min-touch-target);
  --camera-live-toggle-padding: var(--spacing-md);
  --camera-live-toggle-icon-size: 20px;
  --camera-live-toggle-icon-to-label: var(--spacing-xs);
  --camera-live-toggle-off-fill: var(--palette-text-emphasis);
  --camera-live-toggle-on-fill: var(--palette-brand);
  --camera-live-toggle-content-color: var(--palette-on-brand);
  --camera-live-toggle-label-style: var(--typography-label-strong);
  --camera-live-caption-to-toggle: var(--spacing-xs);
  --camera-live-caption-radius: var(--radius-chip);
  --camera-live-caption-padding-horizontal: var(--spacing-sm);
  --camera-live-caption-padding-vertical: var(--spacing-xs);
  --camera-live-caption-fill: var(--palette-scrim);
  --camera-live-caption-style: var(--typography-caption-medium);
  --camera-live-caption-color: var(--palette-on-brand);
  --camera-live-busy-icon-size: 14px;
  --camera-live-busy-icon-to-text: var(--spacing-xxs);
  --camera-live-action-style: var(--typography-label-bold);
  --camera-live-action-color: var(--palette-on-brand);
  --camera-live-action-height: var(--sizing-min-touch-target);
  --camera-live-line-fade-millis: var(--motion-selection-millis);

  /* ---- Currency: design/component/CurrencyTokens.kt, object CurrencyTokens ---- */
  --currency-background: var(--palette-background);
  --currency-side-margin: var(--spacing-screen-margin);
  --currency-header-height: 154px;
  --currency-header-bottom-radius: var(--radius-card);
  --currency-header-subtitle-to-bottom: var(--spacing-lg);
  --currency-header-to-row: var(--spacing-lg);
  --currency-row-height: 60px;
  --currency-row-radius: var(--radius-card);
  --currency-row-fill: var(--palette-surface);
  --currency-row-icon-inset: 15px;
  --currency-row-icon-size: 20px;
  --currency-row-icon-tint: var(--palette-text-emphasis);
  --currency-row-icon-to-label: 5px;
  --currency-row-label-style: var(--typography-body-medium);
  --currency-row-label-color: var(--palette-text-emphasis);
  --currency-caret-width: 10px;
  --currency-caret-height: 6px;
  --currency-caret-tint: var(--palette-placeholder);
  --currency-row-caret-inset: var(--spacing-lg);
  --currency-row-value-to-caret: 8px;
  --currency-row-value-style: var(--typography-body-strong);
  --currency-row-value-color: var(--palette-brand);
  --currency-row-to-panel: var(--spacing-sm);
  --currency-panel-radius: var(--radius-card);
  --currency-panel-fill: var(--palette-surface);
  --currency-panel-padding: var(--spacing-sm);
  --currency-card-height: 125px;
  --currency-card-radius: var(--radius-card);
  --currency-card-fill: var(--palette-background);
  --currency-card-gap: var(--spacing-sm);
  --currency-card-inset: var(--spacing-lg);
  --currency-card-label-style: var(--typography-body-medium);
  --currency-card-label-color: var(--palette-text-emphasis);
  --currency-card-label-to-value: 8px;
  --currency-card-value-style: var(--typography-headline-bold);
  --currency-card-value-color: var(--palette-brand);
  --currency-cursor-color: var(--palette-brand);
  --currency-value-to-chip: var(--spacing-sm);
  --currency-value-placeholder-width: 120px;
  --currency-value-placeholder-height: 35px;
  --currency-value-placeholder-radius: var(--radius-xs);
  --currency-value-placeholder-fill: var(--palette-surface);
  --currency-chip-width: 116px;
  --currency-chip-height: 40px;
  --currency-chip-fill: var(--palette-background);
  --currency-chip-border-width: 1px;
  --currency-chip-border-color: var(--palette-card-plain);
  --currency-chip-flag-inset: 5px;
  --currency-chip-flag-size: 30px;
  --currency-chip-no-flag-tint: var(--palette-placeholder);
  --currency-chip-flag-to-code: var(--spacing-sm);
  --currency-chip-code-style: var(--typography-body-strong);
  --currency-chip-code-color: var(--palette-text-emphasis);
  --currency-chip-caret-inset: 15px;
  --currency-chip-touch-target: var(--sizing-min-touch-target);
  --currency-swap-ring: 70px;
  --currency-swap-ring-fill: var(--palette-surface);
  --currency-swap-disc: 50px;
  --currency-swap-disc-fill: var(--palette-brand);
  --currency-swap-icon-size: 30px;
  --currency-swap-icon-tint: var(--palette-on-brand);
  --currency-cards-to-foot: 15px;
  --currency-foot-leading-inset: 15px;
  --currency-foot-badge-size: 40px;
  --currency-foot-badge-radius: var(--radius-md);
  --currency-foot-badge-fill: var(--palette-brand);
  --currency-foot-icon-width: 24px;
  --currency-foot-icon-height: 14px;
  --currency-foot-icon-tint: var(--palette-on-brand);
  --currency-foot-badge-to-text: var(--spacing-sm);
  --currency-foot-line-style: var(--typography-label);
  --currency-foot-line-color: var(--palette-text-emphasis);
  --currency-foot-line-gap: 5px;
  --currency-foot-line-max-lines: 2;
  --currency-foot-text-to-note: var(--spacing-sm);
  --currency-foot-trailing-inset: 14px;
  --currency-foot-note-top: 2px;
  --currency-foot-note-width: 113px;
  --currency-foot-note-style: var(--typography-caption-medium);
  --currency-foot-note-color: var(--palette-text-emphasis);
  --currency-foot-note-max-lines: 8;
  --currency-foot-to-bottom: 35px;
  --currency-foot-min-height: 58px;
  --currency-failed-style: var(--typography-label);
  --currency-failed-color: var(--palette-text-secondary);
  --currency-retry-color: var(--palette-brand);
  --currency-camera-height: 124px;
  --currency-camera-radius: var(--radius-card);
  --currency-camera-fill: var(--palette-brand);
  --currency-camera-icon-size: 40px;
  --currency-camera-icon-top: 27px;
  --currency-camera-icon-to-label: var(--spacing-sm);
  --currency-camera-label-style: var(--typography-body-medium);
  --currency-camera-color: var(--palette-on-brand);
  --currency-camera-off-opacity: 0.4;
  --currency-camera-bottom-inset: 30px;
  --currency-camera-min-gap: var(--spacing-lg);
  --currency-sheet-row-height: 50px;
  --currency-sheet-row-inset: var(--spacing-lg);
  --currency-sheet-flag-size: 30px;
  --currency-sheet-flag-to-name: var(--spacing-sm);
  --currency-sheet-name-style: var(--typography-body-medium);
  --currency-sheet-name-color: var(--palette-text-emphasis);
  --currency-sheet-code-style: var(--typography-body-medium);
  --currency-sheet-code-color: var(--palette-text-secondary);
  --currency-sheet-search-to-no-match: 40px;

  /* ---- FloatingButton: design/component/FloatingButtonTokens.kt, object FloatingButtonTokens ---- */
  --floating-button-size: 70px;
  --floating-button-image-size: 110px;
  --floating-button-side-inset: var(--spacing-sm);
  --floating-button-band-top-inset: var(--spacing-sm);
  --floating-button-band-bottom-inset: var(--spacing-sm);
  --floating-button-default-above-bottom-bar: 242px;
  --floating-button-settle-millis: 250ms;

  /* ---- RoomSafety: design/component/RoomSafetyTokens.kt, object RoomSafetyTokens ---- */
  --room-safety-background: var(--palette-background);
  --room-safety-side-margin: var(--spacing-screen-margin);
  --room-safety-hero-height: 220px;
  --room-safety-hero-bottom-radius: var(--radius-card);
  --room-safety-hero-title-to-subtitle: 14px;
  --room-safety-hero-subtitle-to-bottom: 30px;
  --room-safety-hero-subtitle-max-lines: 2;
  --room-safety-hero-to-sample-note: var(--spacing-sm);
  --room-safety-sample-note-style: var(--typography-caption-medium);
  --room-safety-sample-note-color: var(--palette-text-muted);
  --room-safety-heading-icon-width: 30px;
  --room-safety-heading-icon-height: 30px;
  --room-safety-heading-icon-tint: var(--palette-brand);
  --room-safety-heading-icon-to-title: 10px;
  --room-safety-heading-title-style: var(--typography-title);
  --room-safety-heading-title-color: var(--palette-text-muted);
  --room-safety-block-to-heading: var(--spacing-lg);
  --room-safety-heading-to-block: 15px;
  --room-safety-check-tile-height: 120px;
  --room-safety-tile-gap: var(--spacing-xs);
  --room-safety-tile-radius: var(--radius-md);
  --room-safety-tile-fill: var(--palette-surface);
  --room-safety-check-icon-size: 30px;
  --room-safety-check-icon-top: 20px;
  --room-safety-check-label-top: 60px;
  --room-safety-check-label-style: var(--typography-caption-tall-strong);
  --room-safety-check-label-color: var(--palette-text-emphasis);
  --room-safety-check-label-max-lines: 2;
  --room-safety-check-label-inset: var(--spacing-xxs);
  --room-safety-unknown-tint: var(--palette-error);
  --room-safety-broadcast-tint: var(--palette-apricot);
  --room-safety-network-tint: var(--palette-positive);
  --room-safety-camera-tint: var(--palette-violet);
  --room-safety-tiles-to-banner: var(--spacing-lg);
  --room-safety-banner-height: 150px;
  --room-safety-banner-radius: var(--radius-card);
  --room-safety-banner-inset: var(--spacing-lg);
  --room-safety-banner-title-top: 25px;
  --room-safety-banner-title-style: var(--typography-title-large);
  --room-safety-banner-title-max-lines: 2;
  --room-safety-banner-body-top: 93px;
  --room-safety-banner-body-width: 212px;
  --room-safety-banner-body-style: var(--typography-label);
  --room-safety-banner-body-max-lines: 3;
  --room-safety-banner-text-color: var(--palette-on-brand);
  --room-safety-how-step-height: 140px;
  --room-safety-how-square-size: 30px;
  --room-safety-how-square-top: 20px;
  --room-safety-how-square-radius: var(--radius-xs);
  --room-safety-how-square-fill: var(--palette-brand);
  --room-safety-how-glyph-size: 16px;
  --room-safety-how-glyph-tint: var(--palette-on-brand);
  --room-safety-how-title-top: 57px;
  --room-safety-how-title-style: var(--typography-label-strong);
  --room-safety-how-title-color: var(--palette-text-emphasis);
  --room-safety-how-title-max-lines: 2;
  --room-safety-how-title-one-line-min-scale: var(--sizing-one-line-min-scale);
  --room-safety-how-body-top: 84px;
  --room-safety-how-body-width: 108px;
  --room-safety-how-body-style: var(--typography-caption-loose);
  --room-safety-how-body-color: var(--palette-text-emphasis-veil);
  --room-safety-how-body-max-lines: 3;
  --room-safety-how-body-to-bottom: 20px;
  --room-safety-steps-to-button: 56px;
  --room-safety-button-height: 60px;
  --room-safety-button-radius: var(--radius-md);
  --room-safety-button-horizontal-padding: 50px;
  --room-safety-button-fill: var(--palette-brand);
  --room-safety-button-label-color: var(--palette-on-brand);
  --room-safety-button-label-style: var(--typography-body-strong);
  --room-safety-button-to-bottom: var(--spacing-lg);
  --room-safety-header-to-notice: var(--spacing-sm);
  --room-safety-notice-to-line: 30px;
  --room-safety-scan-line-style: var(--typography-body-medium);
  --room-safety-scan-line-color: var(--palette-text-emphasis);
  --room-safety-line-to-picture: 0px;
  --room-safety-scan-inset: 40px;
  --room-safety-bar-height: 30px;
  --room-safety-bar-radius: var(--radius-xs);
  --room-safety-bar-track: var(--palette-brand-mist);
  --room-safety-bar-fill: var(--palette-brand);
  --room-safety-bar-fill-min-width: 76px;
  --room-safety-bar-text-trailing-inset: 8px;
  --room-safety-bar-number-style: var(--typography-title-large);
  --room-safety-bar-sign-style: var(--typography-label-bold);
  --room-safety-bar-text-color: var(--palette-on-brand);
  --room-safety-bar-to-steps: var(--spacing-lg);
  --room-safety-steps-row-count: 4;
  --room-safety-steps-first-row-centre: 32px;
  --room-safety-steps-row-pitch: 44px;
  --room-safety-steps-height: 196px;
  --room-safety-steps-radius: var(--radius-card);
  --room-safety-steps-fill: var(--palette-background);
  --room-safety-steps-border-width: 1px;
  --room-safety-steps-border-color: var(--palette-brand-outline);
  --room-safety-steps-inset: var(--spacing-lg);
  --room-safety-step-disc-size: 18px;
  --room-safety-step-disc-fill: var(--palette-border);
  --room-safety-step-rail-width: 4px;
  --room-safety-step-rail-fill: var(--palette-border);
  --room-safety-step-dot-size: 12px;
  --room-safety-step-dot-done: var(--palette-brand);
  --room-safety-step-dot-idle: var(--palette-card-plain);
  --room-safety-step-disc-to-label: 13px;
  --room-safety-step-label-max-lines: 2;
  --room-safety-step-row-padding: 6px;
  --room-safety-step-done-style: var(--typography-label);
  --room-safety-step-running-style: var(--typography-label-bold);
  --room-safety-step-waiting-style: var(--typography-label-regular);
  --room-safety-step-label-color: var(--palette-text-secondary);
  --room-safety-step-running-color: var(--palette-brand);
  --room-safety-step-mark-size: 24px;
  --room-safety-step-done-mark-tint: var(--palette-positive);
  --room-safety-step-running-mark-tint: var(--palette-brand);
  --room-safety-step-waiting-mark-tint: var(--palette-brand-quiet);
  --room-safety-steps-to-tip: 42px;
  --room-safety-tip-min-height: 70px;
  --room-safety-tip-radius: var(--radius-card);
  --room-safety-tip-fill: var(--palette-brand-mist);
  --room-safety-tip-padding: 15px;
  --room-safety-tip-icon-size: 18px;
  --room-safety-tip-icon-tint: var(--palette-text-emphasis);
  --room-safety-tip-icon-to-text: var(--spacing-sm);
  --room-safety-tip-title-style: var(--typography-label-bold);
  --room-safety-tip-title-to-body: var(--spacing-sm);
  --room-safety-tip-body-style: var(--typography-caption);
  --room-safety-tip-text-color: var(--palette-text-emphasis);
  --room-safety-tip-to-bottom: var(--spacing-lg);
  --room-safety-notice-to-picture: 51px;
  --room-safety-picture-box-height: 307px;
  --room-safety-picture-width-possible-camera: 192px;
  --room-safety-picture-width-none-found: 180px;
  --room-safety-picture-width-could-not-check: 180px;
  --room-safety-picture-height-possible-camera: 180px;
  --room-safety-picture-height-none-found: 180px;
  --room-safety-picture-height-could-not-check: 180px;
  --room-safety-neutral-picture-size: 180px;
  --room-safety-verdict-disc-size: 120px;
  --room-safety-verdict-disc-fill: var(--palette-surface);
  --room-safety-verdict-glyph-size: 56px;
  --room-safety-verdict-glyph-tint: var(--palette-brand-quiet);
  --room-safety-verdict-over-picture: 8px;
  --room-safety-verdict-style: var(--typography-headline-bold);
  --room-safety-verdict-color-possible-camera: var(--palette-error);
  --room-safety-verdict-color-none-found: var(--palette-text-emphasis);
  --room-safety-verdict-color-could-not-check: var(--palette-text-emphasis);
  --room-safety-verdict-to-sentence: var(--spacing-sm);
  --room-safety-sentence-style: var(--typography-body-loose);
  --room-safety-sentence-color: var(--palette-text-muted);
  --room-safety-sentence-width: 301px;
  --room-safety-sentence-lines: 2;
  --room-safety-sentence-to-counters: var(--spacing-lg);
  --room-safety-counter-height: 110px;
  --room-safety-counter-icon-size: 30px;
  --room-safety-counter-icon-top: 15px;
  --room-safety-counter-number-top: 48px;
  --room-safety-counter-number-style: var(--typography-button);
  --room-safety-counter-label-top: 79px;
  --room-safety-counter-label-style: var(--typography-micro-strong);
  --room-safety-counter-text-color: var(--palette-text-emphasis);
  --room-safety-counter-label-inset: var(--spacing-xxs);
  --room-safety-counter-label-max-lines: 2;
  --room-safety-counter-label-one-line-min-scale: var(--sizing-one-line-min-scale);
  --room-safety-device-row-height: 80px;
  --room-safety-device-row-gap: var(--spacing-sm);
  --room-safety-device-row-radius: var(--radius-card);
  --room-safety-device-row-fill: var(--palette-surface);
  --room-safety-device-disc-inset: 15px;
  --room-safety-device-disc-top: 15px;
  --room-safety-device-disc-size: 50px;
  --room-safety-device-disc-fill: var(--palette-brand);
  --room-safety-device-glyph-size: 24px;
  --room-safety-device-glyph-tint: var(--palette-on-brand);
  --room-safety-device-disc-to-text: 15px;
  --room-safety-device-name-style: var(--typography-body-bold);
  --room-safety-device-name-color: var(--palette-brand);
  --room-safety-device-detail-style: var(--typography-label);
  --room-safety-device-detail-color: var(--palette-text-emphasis);
  --room-safety-device-text-to-pill: var(--spacing-sm);
  --room-safety-device-pill-trailing-inset: var(--spacing-lg);
  --room-safety-device-pill-min-width: 60px;
  --room-safety-device-pill-height: 30px;
  --room-safety-device-pill-padding: var(--spacing-xs);
  --room-safety-device-pill-radius: var(--radius-chip);
  --room-safety-device-pill-fill: var(--palette-text-emphasis);
  --room-safety-device-pill-style: var(--typography-caption-medium);
  --room-safety-device-pill-color: var(--palette-on-brand);
  --room-safety-rows-to-button: var(--spacing-lg);
  --room-safety-button-to-save: var(--spacing-lg);
  --room-safety-save-style: var(--typography-body-strong);
  --room-safety-save-color: var(--palette-text-emphasis);
  --room-safety-save-to-bottom: 0px;
  --room-safety-button-to-limits: var(--spacing-lg);
  --room-safety-sentence-to-limits: var(--spacing-lg);
  --room-safety-limits-gap: var(--spacing-sm);
  --room-safety-limits-style: var(--typography-caption);
  --room-safety-limits-color: var(--palette-text-emphasis);
  --room-safety-hero-to-unavailable-note: var(--spacing-sm);
  --room-safety-hand-check-button-height: 60px;
  --room-safety-hand-check-button-radius: var(--radius-md);
  --room-safety-hand-check-button-horizontal-padding: 50px;
  --room-safety-hand-check-button-fill: var(--palette-brand);
  --room-safety-hand-check-button-label-color: var(--palette-on-brand);
  --room-safety-hand-check-button-label-style: var(--typography-body-strong);
  --room-safety-hand-check-text-style: var(--typography-body-strong);
  --room-safety-hand-check-text-color: var(--palette-brand);
  --room-safety-sentence-to-settings: var(--spacing-sm);
  --room-safety-step-not-checked-style: var(--typography-label-regular);
  --room-safety-step-not-checked-mark-tint: var(--palette-brand-quiet);
  --room-safety-step-note-style: var(--typography-caption);
  --room-safety-step-note-color: var(--palette-text-muted);
  --room-safety-step-label-to-note: 2px;
  --room-safety-device-head-to-reason: var(--spacing-xxs);
  --room-safety-device-reason-to-next: var(--spacing-xs);
  --room-safety-device-next-style: var(--typography-caption);
  --room-safety-device-next-color: var(--palette-text-muted);
  --room-safety-device-row-bottom-padding: 15px;
  --room-safety-disc-fill-possible-camera: var(--palette-error);
  --room-safety-disc-fill-nearby-signal: var(--palette-brand-quiet);
  --room-safety-disc-fill-not-identified: var(--palette-brand);
  --room-safety-disc-fill-recognised: var(--palette-brand);
  --room-safety-disc-fill-yours: var(--palette-brand);
  --room-safety-pill-fill-possible-camera: var(--palette-error);
  --room-safety-pill-fill-not-identified: var(--palette-apricot);
  --room-safety-pill-fill-nearby-signal: var(--palette-brand-quiet);
  --room-safety-pill-fill-recognised: var(--palette-text-emphasis);
  --room-safety-pill-fill-yours: var(--palette-text-emphasis);
  --room-safety-pill-text-color-not-identified: var(--palette-navy);
  --room-safety-pill-text-color-nearby-signal: var(--palette-navy);
  --room-safety-pill-text-color-possible-camera: var(--palette-on-brand);
  --room-safety-pill-text-color-recognised: var(--palette-on-brand);
  --room-safety-pill-text-color-yours: var(--palette-on-brand);
  --room-safety-empty-list-style: var(--typography-label);
  --room-safety-empty-list-color: var(--palette-text-muted);
  --room-safety-guide-header-to-position: var(--spacing-lg);
  --room-safety-guide-position-style: var(--typography-caption-medium);
  --room-safety-guide-position-color: var(--palette-text-muted);
  --room-safety-guide-position-to-title: var(--spacing-xs);
  --room-safety-guide-title-style: var(--typography-title-large);
  --room-safety-guide-title-color: var(--palette-text-emphasis);
  --room-safety-guide-title-to-body: var(--spacing-sm);
  --room-safety-guide-body-style: var(--typography-body-loose);
  --room-safety-guide-body-color: var(--palette-text-muted);
  --room-safety-guide-body-to-points: var(--spacing-lg);
  --room-safety-guide-point-gap: var(--spacing-sm);
  --room-safety-guide-point-radius: var(--radius-card);
  --room-safety-guide-point-fill: var(--palette-surface);
  --room-safety-guide-point-padding: 15px;
  --room-safety-guide-point-disc-size: 30px;
  --room-safety-guide-point-disc-fill: var(--palette-brand);
  --room-safety-guide-point-number-style: var(--typography-label-bold);
  --room-safety-guide-point-number-color: var(--palette-on-brand);
  --room-safety-guide-point-disc-to-text: var(--spacing-sm);
  --room-safety-guide-point-title-style: var(--typography-label-bold);
  --room-safety-guide-point-title-color: var(--palette-text-emphasis);
  --room-safety-guide-point-title-to-body: var(--spacing-xs);
  --room-safety-guide-point-body-style: var(--typography-caption);
  --room-safety-guide-point-body-color: var(--palette-text-emphasis);
  --room-safety-guide-points-to-torch: var(--spacing-lg);
  --room-safety-guide-torch-button-height: 60px;
  --room-safety-guide-torch-button-radius: var(--radius-md);
  --room-safety-guide-torch-button-horizontal-padding: 50px;
  --room-safety-guide-torch-button-fill: var(--palette-brand);
  --room-safety-guide-torch-button-label-color: var(--palette-on-brand);
  --room-safety-guide-torch-button-label-style: var(--typography-body-strong);
  --room-safety-guide-torch-note-style: var(--typography-label);
  --room-safety-guide-torch-note-color: var(--palette-text-muted);
  --room-safety-guide-to-limits: var(--spacing-lg);
  --room-safety-guide-limits-to-button: var(--spacing-lg);
  --room-safety-guide-next-button-height: 60px;
  --room-safety-guide-next-button-radius: var(--radius-md);
  --room-safety-guide-next-button-horizontal-padding: 50px;
  --room-safety-guide-next-button-fill: var(--palette-brand);
  --room-safety-guide-next-button-label-color: var(--palette-on-brand);
  --room-safety-guide-next-button-label-style: var(--typography-body-strong);
  --room-safety-guide-button-to-previous: var(--spacing-lg);
  --room-safety-guide-previous-style: var(--typography-body-strong);
  --room-safety-guide-previous-color: var(--palette-text-emphasis);
  --room-safety-guide-to-bottom: var(--spacing-lg);
  --room-safety-limits-to-summary: var(--spacing-lg);
  --room-safety-summary-fill: var(--palette-surface);
  --room-safety-summary-radius: var(--radius-card);
  --room-safety-summary-padding: 15px;
  --room-safety-summary-line-gap: var(--spacing-md);
  --room-safety-summary-disc-size: 30px;
  --room-safety-summary-glyph-size: 16px;
  --room-safety-summary-disc-to-text: var(--spacing-sm);
  --room-safety-summary-title-style: var(--typography-label-bold);
  --room-safety-summary-title-color: var(--palette-text-emphasis);
  --room-safety-summary-title-to-items: var(--spacing-xxs);
  --room-safety-summary-item-gap: 2px;
  --room-safety-summary-item-style: var(--typography-caption);
  --room-safety-summary-item-color: var(--palette-text-emphasis);
  --room-safety-heading-to-note: 0px;
  --room-safety-section-note-style: var(--typography-caption);
  --room-safety-section-note-color: var(--palette-text-muted);
  --room-safety-note-to-rows: var(--spacing-sm);

  /* ---- Weather: design/component/WeatherTokens.kt, object WeatherTokens ---- */
  --weather-background: var(--palette-background);
  --weather-side-margin: var(--spacing-screen-margin);
  --weather-header-to-content: var(--spacing-lg);
  --weather-sample-note-style: var(--typography-caption);
  --weather-sample-note-color: var(--palette-text-secondary);
  --weather-sample-note-to-row: var(--spacing-sm);
  --weather-row-height: 64px;
  --weather-row-radius: var(--radius-card);
  --weather-row-fill: var(--palette-surface);
  --weather-row-inset: 15px;
  --weather-row-flag-size: 36px;
  --weather-row-flag-to-text: var(--spacing-sm);
  --weather-row-city-style: var(--typography-body-strong);
  --weather-row-city-color: var(--palette-text-emphasis);
  --weather-row-city-to-country: 3px;
  --weather-row-country-style: var(--typography-caption);
  --weather-row-country-color: var(--palette-text-secondary);
  --weather-caret-width: 10px;
  --weather-caret-height: 6px;
  --weather-caret-tint: var(--palette-placeholder);
  --weather-row-text-to-caret: var(--spacing-sm);
  --weather-row-to-note: var(--spacing-xs);
  --weather-note-icon-size: 12px;
  --weather-note-icon-tint: var(--palette-brand);
  --weather-note-icon-to-text: var(--spacing-xxs);
  --weather-note-style: var(--typography-caption-medium);
  --weather-note-color: var(--palette-brand);
  --weather-row-to-now: var(--spacing-lg);
  --weather-now-min-height: 150px;
  --weather-now-radius: var(--radius-card);
  --weather-now-fill: var(--palette-surface);
  --weather-now-inset: var(--spacing-lg);
  --weather-now-label-style: var(--typography-body-medium);
  --weather-now-label-color: var(--palette-text-emphasis);
  --weather-now-label-to-temperature: var(--spacing-xs);
  --weather-now-temperature-style: var(--typography-hero);
  --weather-now-temperature-color: var(--palette-brand);
  --weather-now-temperature-to-sky: var(--spacing-xs);
  --weather-now-sky-style: var(--typography-body-strong);
  --weather-now-sky-color: var(--palette-text-emphasis);
  --weather-now-sky-to-range: var(--spacing-xxs);
  --weather-now-range-style: var(--typography-label);
  --weather-now-range-color: var(--palette-text-secondary);
  --weather-now-image-size: 64px;
  --weather-now-text-to-image: var(--spacing-sm);
  --weather-now-to-days-title: var(--spacing-xl);
  --weather-days-title-style: var(--typography-title);
  --weather-days-title-color: var(--palette-text-emphasis);
  --weather-days-title-to-list: var(--spacing-xs);
  --weather-day-height: 56px;
  --weather-day-image-size: 26px;
  --weather-day-image-to-name: var(--spacing-sm);
  --weather-day-name-width: 76px;
  --weather-day-name-style: var(--typography-body-medium);
  --weather-day-name-color: var(--palette-text-emphasis);
  --weather-day-name-to-date: 2px;
  --weather-day-date-style: var(--typography-caption);
  --weather-day-date-color: var(--palette-text-secondary);
  --weather-day-name-to-sky: var(--spacing-sm);
  --weather-day-sky-style: var(--typography-label);
  --weather-day-sky-color: var(--palette-text-secondary);
  --weather-day-sky-max-lines: 2;
  --weather-day-figure-width: 44px;
  --weather-day-high-style: var(--typography-body-strong);
  --weather-day-high-color: var(--palette-text-emphasis);
  --weather-day-low-style: var(--typography-body);
  --weather-day-low-color: var(--palette-text-secondary);
  --weather-day-separator-height: 1px;
  --weather-day-separator-color: var(--palette-border);
  --weather-content-to-foot: var(--spacing-xl);
  --weather-foot-style: var(--typography-caption);
  --weather-foot-color: var(--palette-text-secondary);
  --weather-foot-line-gap: var(--spacing-xxs);
  --weather-foot-to-bottom: var(--spacing-xl);
  --weather-placeholder-days: 4;
  --weather-placeholder-day-height: 40px;
  --weather-placeholder-day-gap: var(--spacing-md);
  --weather-placeholder-radius: var(--radius-xs);
  --weather-placeholder-fill: var(--palette-surface);
  --weather-row-to-message: 40px;
  --weather-sheet-row-height: 56px;
  --weather-sheet-row-inset: var(--spacing-lg);
  --weather-sheet-flag-size: 30px;
  --weather-sheet-flag-to-name: var(--spacing-sm);
  --weather-sheet-city-style: var(--typography-body-medium);
  --weather-sheet-city-color: var(--palette-text-emphasis);
  --weather-sheet-city-to-country: 2px;
  --weather-sheet-country-style: var(--typography-caption);
  --weather-sheet-country-color: var(--palette-text-secondary);
  --weather-sheet-badge-style: var(--typography-caption-strong);
  --weather-sheet-badge-color: var(--palette-brand);
  --weather-sheet-badge-to-tick: var(--spacing-xs);
  --weather-sheet-tick-size: 20px;
  --weather-sheet-tick-tint: var(--palette-brand);
  --weather-sheet-row-touch-target: var(--sizing-min-touch-target);
  --weather-sheet-search-to-no-match: 40px;
  --weather-header-title-style: var(--typography-screen-title);
  --weather-header-title-color: var(--palette-text-emphasis);
  --weather-header-back-size: 16px;
  --weather-section-gap: 20px;
  --weather-header-to-hero: 20px;
  --weather-hero-height: 205px;
  --weather-hero-radius: 20px;
  --weather-hero-fill: var(--palette-surface);
  --weather-hero-inset: 20px;
  --weather-hero-city-top: 30px;
  --weather-hero-city-style: var(--typography-headline-bold);
  --weather-hero-city-color: var(--palette-brand);
  --weather-hero-city-min-scale: 0.6;
  --weather-hero-city-to-caret: 8px;
  --weather-hero-caret-width: 10px;
  --weather-hero-caret-height: 6px;
  --weather-hero-caret-tint: var(--palette-brand);
  --weather-hero-date-top: 75px;
  --weather-hero-date-style: var(--typography-body-medium);
  --weather-hero-date-color: var(--palette-text-emphasis);
  --weather-hero-temperature-top: 104px;
  --weather-hero-temperature-style: var(--typography-hero);
  --weather-hero-temperature-color: var(--palette-brand);
  --weather-hero-sky-top: 156px;
  --weather-hero-sky-style: var(--typography-body-medium);
  --weather-hero-sky-color: var(--palette-text-emphasis);
  --weather-hero-image-size: 120px;
  --weather-hero-image-trailing-inset: 30px;
  --weather-hero-placeholder-date-width: 180px;
  --weather-hero-placeholder-temperature-width: 90px;
  --weather-hero-placeholder-sky-width: 120px;
  --weather-hero-placeholder-fill: var(--palette-background);
  --weather-measure-height: 120px;
  --weather-measure-gap: 8px;
  --weather-measure-radius: 15px;
  --weather-measure-fill: var(--palette-surface);
  --weather-measure-image-top: 15px;
  --weather-measure-image-box: 40px;
  --weather-measure-value-top: 60px;
  --weather-measure-value-style: var(--typography-body-bold);
  --weather-measure-value-line-height: 20px;
  --weather-measure-value-color: var(--palette-text-emphasis);
  --weather-measure-label-top: 85px;
  --weather-measure-label-style: var(--typography-caption-tall);
  --weather-measure-label-color: var(--palette-text-emphasis-soft);
  --weather-hours-height: 110px;
  --weather-hours-radius: 15px;
  --weather-hours-fill: var(--palette-surface);
  --weather-hour-pitch: 66px;
  --weather-hour-first-center: 35px;
  --weather-hour-now-width: 60px;
  --weather-hour-now-height: 100px;
  --weather-hour-now-inset: 5px;
  --weather-hour-now-radius: 15px;
  --weather-hour-now-fill: var(--palette-background);
  --weather-hour-divider-width: 2px;
  --weather-hour-divider-height: 60px;
  --weather-hour-divider-top: 25px;
  --weather-hour-divider-color: var(--palette-on-brand-half);
  --weather-hour-label-center: 24.5px;
  --weather-hour-label-style: var(--typography-caption-medium);
  --weather-hour-label-color: var(--palette-text-emphasis-soft);
  --weather-hour-image-center: 54px;
  --weather-hour-image-size: 30px;
  --weather-hour-temperature-center: 84.5px;
  --weather-hour-temperature-style: var(--typography-body-bold);
  --weather-hour-temperature-color: var(--palette-text-emphasis);
  --weather-day-row-height: 50px;
  --weather-days-radius: 15px;
  --weather-days-fill: var(--palette-surface);
  --weather-day-row-separator: 2px;
  --weather-day-row-separator-color: var(--palette-background);
  --weather-day-row-inset: 20px;
  --weather-day-row-name-style: var(--typography-label);
  --weather-day-row-name-color: var(--palette-brand);
  --weather-day-row-image-leading: 97px;
  --weather-day-row-image-size: 30px;
  --weather-day-row-high-from-trailing: 136px;
  --weather-day-row-high-style: var(--typography-body-bold);
  --weather-day-row-high-color: var(--palette-text-emphasis);
  --weather-day-row-low-from-trailing: 79px;
  --weather-day-row-low-style: var(--typography-body-strong);
  --weather-day-row-low-color: var(--palette-text-emphasis-soft);
  --weather-days-to-rain: 24px;
  --weather-rain-height: 60px;
  --weather-rain-radius: 15px;
  --weather-rain-fill: var(--palette-brand);
  --weather-rain-tile-inset: 5px;
  --weather-rain-tile-size: 50px;
  --weather-rain-tile-radius: 10px;
  --weather-rain-tile-fill: var(--palette-background);
  --weather-rain-image-size: 30px;
  --weather-rain-tile-to-text: 7px;
  --weather-rain-title-top: 12px;
  --weather-rain-title-style: var(--typography-label-bold);
  --weather-rain-line-top: 34px;
  --weather-rain-line-style: var(--typography-caption-medium);
  --weather-rain-text-color: var(--palette-on-brand);
  --weather-content-to-foot-frame: 15px;
  --weather-placeholder-measures: 4;
  --weather-placeholder-day-rows: 3;

  /* ---- SavedPlaces: design/component/SavedPlacesTokens.kt, object SavedPlacesTokens ---- */
  --saved-places-background: var(--palette-background);
  --saved-places-side-margin: var(--spacing-screen-margin);
  --saved-places-header-to-content: var(--spacing-lg);
  --saved-places-sample-note-style: var(--typography-caption);
  --saved-places-sample-note-color: var(--palette-text-secondary);
  --saved-places-sample-note-to-content: var(--spacing-sm);
  --saved-places-standing-to-content: var(--spacing-md);
  --saved-places-standing-to-blocked-kept: var(--spacing-lg);
  --saved-places-blocked-kept-style: var(--typography-label);
  --saved-places-blocked-kept-color: var(--palette-text-secondary);
  --saved-places-blocked-kept-to-clear: var(--spacing-xs);
  --saved-places-clear-color: var(--palette-danger);
  --saved-places-kept-style: var(--typography-caption);
  --saved-places-kept-color: var(--palette-text-secondary);
  --saved-places-kept-icon-width: 12px;
  --saved-places-kept-icon-height: 10px;
  --saved-places-kept-icon-tint: var(--palette-danger);
  --saved-places-kept-icon-to-text: var(--spacing-xxs);
  --saved-places-kept-to-cards: var(--spacing-sm);
  --saved-places-card-gap: var(--spacing-sm);
  --saved-places-cards-to-note: var(--spacing-lg);
  --saved-places-note-gap: var(--spacing-md);
  --saved-places-cards-to-more: var(--spacing-md);
  --saved-places-more-color: var(--palette-brand);
  --saved-places-plan-day-button-height: 70px;
  --saved-places-plan-day-button-radius: 22px;
  --saved-places-plan-day-button-horizontal-padding: 50px;
  --saved-places-plan-day-button-fill: var(--palette-brand);
  --saved-places-plan-day-button-label-color: var(--palette-on-brand);
  --saved-places-plan-day-button-label-style: var(--typography-button);
  --saved-places-cards-to-plan-day: var(--spacing-xl);
  --saved-places-plan-day-icon-size: 20px;
  --saved-places-plan-day-to-suggestions: var(--spacing-xxl);
  --saved-places-suggestions-icon-size: 20px;
  --saved-places-suggestions-icon-tint: var(--palette-brand);
  --saved-places-suggestions-icon-to-title: var(--spacing-xs);
  --saved-places-suggestions-title-style: var(--typography-title-bold);
  --saved-places-suggestions-title-color: var(--palette-navy);
  --saved-places-suggestions-title-to-detail: var(--spacing-xxs);
  --saved-places-suggestions-detail-style: var(--typography-label);
  --saved-places-suggestions-detail-color: var(--palette-text-secondary);
  --saved-places-suggestions-detail-to-button: var(--spacing-md);
  --saved-places-suggest-button-height: 60px;
  --saved-places-suggest-button-radius: var(--radius-md);
  --saved-places-suggest-button-horizontal-padding: 50px;
  --saved-places-suggest-button-fill: var(--palette-brand);
  --saved-places-suggest-button-label-color: var(--palette-on-brand);
  --saved-places-suggest-button-label-style: var(--typography-body-strong);
  --saved-places-suggestions-button-to-cards: var(--spacing-md);
  --saved-places-suggestions-message-style: var(--typography-caption-medium);
  --saved-places-suggestions-message-color: var(--palette-text-secondary);
  --saved-places-suggestions-failure-color: var(--palette-danger);
  --saved-places-suggestions-button-to-message: var(--spacing-sm);
  --saved-places-content-to-credit: var(--spacing-xl);
  --saved-places-credit-style: var(--typography-micro);
  --saved-places-credit-color: var(--palette-text-secondary);
  --saved-places-credit-to-bottom: var(--spacing-xxl);
  --saved-places-placeholder-count: 3;

  /* ---- Emergency: design/component/EmergencyTokens.kt, object EmergencyTokens ---- */
  --emergency-background: var(--palette-background);
  --emergency-side-margin: var(--spacing-screen-margin);
  --emergency-header-to-content: var(--spacing-lg);
  --emergency-row-to-section: var(--spacing-xl);
  --emergency-section-gap: var(--spacing-xxl);
  --emergency-section-title-style: var(--typography-title);
  --emergency-section-title-color: var(--palette-text-emphasis);
  --emergency-section-title-to-content: var(--spacing-sm);
  --emergency-section-note-style: var(--typography-label);
  --emergency-section-note-color: var(--palette-text-secondary);
  --emergency-section-title-to-note: var(--spacing-xxs);
  --emergency-card-gap: var(--spacing-xs);
  --emergency-main-height: 96px;
  --emergency-main-radius: var(--radius-card);
  --emergency-main-fill: var(--palette-danger);
  --emergency-main-inset: var(--spacing-lg);
  --emergency-main-icon-circle: 48px;
  --emergency-main-icon-circle-fill: var(--palette-background);
  --emergency-main-icon-size: 24px;
  --emergency-main-icon-tint: var(--palette-danger);
  --emergency-main-icon-to-text: var(--spacing-md);
  --emergency-main-label-style: var(--typography-label);
  --emergency-main-label-color: var(--palette-on-brand);
  --emergency-main-label-to-number: var(--spacing-xxs);
  --emergency-main-number-style: var(--typography-headline-bold);
  --emergency-main-number-color: var(--palette-on-brand);
  --emergency-main-pill-height: 40px;
  --emergency-main-pill-inset: var(--spacing-md);
  --emergency-main-pill-fill: var(--palette-background);
  --emergency-main-pill-style: var(--typography-body-strong);
  --emergency-main-pill-color: var(--palette-danger);
  --emergency-main-to-failure: var(--spacing-xs);
  --emergency-failure-style: var(--typography-label);
  --emergency-failure-color: var(--palette-error);
  --emergency-main-to-rows: var(--spacing-sm);
  --emergency-row-height: 60px;
  --emergency-row-radius: var(--radius-md);
  --emergency-row-fill: var(--palette-surface);
  --emergency-row-inset: 15px;
  --emergency-row-icon-size: 22px;
  --emergency-row-icon-tint: var(--palette-danger);
  --emergency-row-icon-to-label: var(--spacing-sm);
  --emergency-row-label-style: var(--typography-body-medium);
  --emergency-row-label-color: var(--palette-text-emphasis);
  --emergency-row-number-style: var(--typography-title);
  --emergency-row-number-color: var(--palette-text-emphasis);
  --emergency-row-gap: var(--spacing-xs);
  --emergency-rows-to-note: var(--spacing-md);
  --emergency-note-style: var(--typography-caption);
  --emergency-note-color: var(--palette-text-secondary);
  --emergency-phrase-radius: var(--radius-card);
  --emergency-phrase-fill: var(--palette-surface);
  --emergency-phrase-inset: var(--spacing-md);
  --emergency-phrase-local-style: var(--typography-title-large);
  --emergency-phrase-local-color: var(--palette-navy);
  --emergency-phrase-local-to-own: var(--spacing-xxs);
  --emergency-phrase-own-style: var(--typography-label);
  --emergency-phrase-own-color: var(--palette-text-secondary);
  --emergency-phrase-gap: var(--spacing-xs);
  --emergency-shown-background: var(--palette-background);
  --emergency-shown-inset: var(--spacing-xl);
  --emergency-shown-hint-style: var(--typography-label);
  --emergency-shown-hint-color: var(--palette-text-secondary);
  --emergency-shown-max-font-size: 48px;
  --emergency-shown-min-font-size: 24px;
  --emergency-shown-line-height-ratio: 1.2;
  --emergency-shown-local-color: var(--palette-navy);
  --emergency-shown-local-to-own: var(--spacing-md);
  --emergency-shown-own-style: var(--typography-subhead);
  --emergency-shown-own-color: var(--palette-text-secondary);
  --emergency-shown-button-gap: var(--spacing-sm);
  --emergency-shown-no-voice-style: var(--typography-label);
  --emergency-shown-no-voice-color: var(--palette-text-secondary);
  --emergency-talk-field-min-lines: 2;
  --emergency-talk-field-max-lines: 6;
  --emergency-talk-spinner-size: 18px;
  --emergency-speak-icon-size: 22px;
  --emergency-nearby-row-gap: var(--spacing-xs);

  /* ---- Safety: design/component/SafetyTokens.kt, object SafetyTokens ---- */
  --safety-background: var(--palette-background);
  --safety-side-margin: var(--spacing-screen-margin);
  --safety-header-to-content: var(--spacing-lg);
  --safety-row-to-section: var(--spacing-xl);
  --safety-country-placeholder-height: 64px;
  --safety-country-placeholder-radius: var(--radius-card);
  --safety-country-placeholder-fill: var(--palette-surface);
  --safety-header-to-message: 40px;
  --safety-section-gap: var(--spacing-xxl);
  --safety-section-title-style: var(--typography-title);
  --safety-section-title-color: var(--palette-text-emphasis);
  --safety-section-title-to-content: var(--spacing-sm);
  --safety-updated-style: var(--typography-caption);
  --safety-updated-color: var(--palette-text-secondary);
  --safety-section-title-to-updated: var(--spacing-xxs);
  --safety-card-gap: var(--spacing-sm);
  --safety-card-radius: var(--radius-card);
  --safety-card-fill: var(--palette-surface);
  --safety-card-padding: var(--spacing-md);
  --safety-band-width: 4px;
  --safety-icon-size: 20px;
  --safety-image-size: 20px;
  --safety-image-backing-size: 26px;
  --safety-image-backing-fill: var(--palette-navy);
  --safety-image-backing-overhang: 3px;
  --safety-icon-to-label: var(--spacing-xs);
  --safety-label-style: var(--typography-caption-strong);
  --safety-label-to-title: var(--spacing-xs);
  --safety-title-style: var(--typography-body-strong);
  --safety-title-color: var(--palette-text-emphasis);
  --safety-title-to-body: var(--spacing-xxs);
  --safety-body-style: var(--typography-label);
  --safety-body-color: var(--palette-text-primary);
  --safety-body-to-line: var(--spacing-xs);
  --safety-unconfirmed-style: var(--typography-caption-strong);
  --safety-line-style: var(--typography-caption);
  --safety-line-color: var(--palette-text-secondary);
  --safety-lines-to-source: var(--spacing-sm);
  --safety-source-rule: var(--palette-border);
  --safety-rule-to-source: var(--spacing-xs);
  --safety-source-style: var(--typography-caption);
  --safety-source-color: var(--palette-text-secondary);
  --safety-licence-style: var(--typography-micro);
  --safety-licence-color: var(--palette-text-muted);
  --safety-link-style: var(--typography-caption-strong);
  --safety-link-color: var(--palette-brand);
  --safety-link-min-height: var(--sizing-min-touch-target);
  --safety-link-icon-size: 14px;
  --safety-highlight-width: 2px;
  --safety-alerts-to-authorities: var(--spacing-sm);
  --safety-authorities-style: var(--typography-label);
  --safety-authorities-color: var(--palette-text-secondary);
  --safety-placeholder-count: 2;
  --safety-placeholder-height: 120px;
  --safety-placeholder-fill: var(--palette-surface);
  --safety-intro-style: var(--typography-label);
  --safety-intro-color: var(--palette-text-secondary);
  --safety-intro-to-items: var(--spacing-md);
  --safety-item-title-style: var(--typography-body-strong);
  --safety-item-title-color: var(--palette-text-emphasis);
  --safety-item-title-to-part: var(--spacing-xs);
  --safety-part-label-style: var(--typography-caption-strong);
  --safety-part-label-color: var(--palette-text-emphasis);
  --safety-part-label-to-text: var(--spacing-xxs);
  --safety-part-text-style: var(--typography-label);
  --safety-part-text-color: var(--palette-text-primary);
  --safety-part-gap: var(--spacing-sm);
  --safety-item-sources-style: var(--typography-caption);
  --safety-item-sources-color: var(--palette-text-secondary);
  --safety-items-to-general: var(--spacing-lg);
  --safety-general-fill: var(--palette-brand-wash);
  --safety-general-title-style: var(--typography-body-strong);
  --safety-general-title-color: var(--palette-brand);
  --safety-general-style: var(--typography-label);
  --safety-general-color: var(--palette-text-primary);
  --safety-general-to-sources: var(--spacing-lg);
  --safety-source-row-gap: var(--spacing-xs);
  --safety-sources-to-checked: var(--spacing-md);
  --safety-checked-style: var(--typography-caption);
  --safety-checked-color: var(--palette-text-secondary);
  --safety-failure-style: var(--typography-label);
  --safety-failure-color: var(--palette-error);
  --safety-grade-color-info: var(--palette-brand);
  --safety-grade-color-warning: var(--palette-warning);
  --safety-grade-color-danger: var(--palette-danger);

  /* ---- Vault: design/component/VaultTokens.kt, object VaultTokens ---- */
  --vault-background: var(--palette-background);
  --vault-side-margin: var(--spacing-screen-margin);
  --vault-header-to-content: var(--spacing-lg);
  --vault-block-gap: var(--spacing-lg);
  --vault-sample-note-style: var(--typography-caption);
  --vault-sample-note-color: var(--palette-text-secondary);
  --vault-panel-top: 48px;
  --vault-panel-icon-circle: 88px;
  --vault-panel-icon-fill: var(--palette-brand-wash);
  --vault-panel-icon-size: 40px;
  --vault-panel-icon-tint: var(--palette-brand);
  --vault-panel-icon-to-title: var(--spacing-lg);
  --vault-panel-title-style: var(--typography-heading);
  --vault-panel-title-color: var(--palette-text-emphasis);
  --vault-panel-title-to-body: var(--spacing-xs);
  --vault-panel-body-style: var(--typography-body);
  --vault-panel-body-color: var(--palette-text-secondary);
  --vault-panel-body-to-rules: var(--spacing-lg);
  --vault-rules-radius: var(--radius-card);
  --vault-rules-fill: var(--palette-surface);
  --vault-rules-padding: var(--spacing-md);
  --vault-rule-gap: var(--spacing-sm);
  --vault-rule-lead-style: var(--typography-label-bold);
  --vault-rule-text-style: var(--typography-label);
  --vault-rule-color: var(--palette-text-emphasis);
  --vault-panel-body-to-button: var(--spacing-xl);
  --vault-button-to-message: var(--spacing-sm);
  --vault-message-style: var(--typography-caption);
  --vault-message-color: var(--palette-error);
  --vault-row-gap: var(--spacing-sm);
  --vault-list-to-about: var(--spacing-xl);
  --vault-content-radius: var(--radius-card);
  --vault-content-fill: var(--palette-surface);
  --vault-content-max-height: 420px;
  --vault-content-loading-height: 240px;
  --vault-pdf-page-gap: var(--spacing-sm);
  --vault-line-style: var(--typography-caption);
  --vault-line-color: var(--palette-text-secondary);
  --vault-content-to-line: var(--spacing-sm);
  --vault-pill-to-line: var(--spacing-sm);
  --vault-expiry-pill-fill-positive: var(--palette-positive);
  --vault-expiry-pill-fill-neutral: var(--palette-warning);
  --vault-expiry-pill-fill-ended: var(--palette-inactive);
  --vault-expiry-line-style: var(--typography-label);
  --vault-expiry-line-color: var(--palette-text-emphasis);
  --vault-expiry-note-style: var(--typography-caption);
  --vault-expiry-note-color: var(--palette-text-secondary);
  --vault-details-note-style: var(--typography-caption);
  --vault-details-note-color: var(--palette-text-secondary);
  --vault-panel-to-note: var(--spacing-xs);
  --vault-unchecked-radius: var(--radius-card);
  --vault-unchecked-fill: var(--palette-surface);
  --vault-unchecked-padding: var(--spacing-md);
  --vault-unchecked-title-style: var(--typography-label-bold);
  --vault-unchecked-title-color: var(--palette-error);
  --vault-mrz-size: 12px;
  --vault-mrz-min-scale: 0.6;
  --vault-mrz-color: var(--palette-text-emphasis);
  --vault-mrz-gap: var(--spacing-xxs);
  --vault-unchecked-text-style: var(--typography-caption);
  --vault-unchecked-text-color: var(--palette-text-secondary);
  --vault-reading-style: var(--typography-caption);
  --vault-reading-color: var(--palette-text-secondary);
  --vault-cover-fill: var(--palette-background);
  --vault-cover-icon-size: 56px;
  --vault-cover-icon-tint: var(--palette-brand);
  --vault-cover-title-style: var(--typography-heading);
  --vault-cover-title-color: var(--palette-text-emphasis);
  --vault-cover-line-style: var(--typography-caption);
  --vault-cover-line-color: var(--palette-text-secondary);
}
/* ==== end of the written tokens ==== */

/*
 * Maak on the web: the travel companion's own components.
 *
 * A page of the companion links this file after css/maak.css:
 *
 *   <link rel="stylesheet" href="../../css/maak.css">
 *   <link rel="stylesheet" href="../../css/family-companion.css">
 *
 * The block above is written by a script from the Kotlin tokens. Everything
 * below is written by hand, by the kit's rules: a component is named after the
 * Android component it mirrors (PlaceCard.kt is .place-card, CompanionStanding.kt
 * is .companion-standing, RoundMapButton is .round-map-button), a part of a
 * screen that Android keeps private to the screen is named after the screen
 * (.places__, .place-page__, .trip-, .route-, .camera-, .currency-), every size
 * and colour is a token, and nothing says left or right.
 *
 * What only a website has says so where it starts: the page's ground, the band,
 * the lift, the panel, the split, the frames that show a page's other states,
 * and the conversation, which has no Android component yet.
 *
 * Written phone first: the rules as they stand are the phone, then
 *
 *   @media (min-width: 768px)    a tablet
 *   @media (min-width: 1100px)   a desktop
 *
 * Where the design draws a control lower than a finger (a 30 tall chip, a 24
 * wide heart), the control is 44 and the drawing is its inner shape, as the
 * kit does for the voucher's button.
 */

/* ==========================================================================
   1. The page of the chosen look: ground, band, lift, panel, split. Web only.
   ========================================================================== */

/* The ground: the page's white on a phone, as in the apps; the pale blue the
   chosen look stands white cards on from a tablet up. On <body>, beside .page. */
.companion-page { --companion-lift: calc(var(--spacing-xxl) * 2); background: var(--palette-background); }

/* The band: what a page of the companion opens on. On a phone it is the apps'
   own header: a picture with a round foot (the menu, the converter:
   CatalogueHeaderUi), a plain bar with the way back and a centred title (the
   trip planner, the camera: CompanionHeader in CompanionParts.kt), or the bar
   laid on the map (places). From a tablet up all three are the chosen look's
   blue band, across the whole window, with its words in the middle. It stands
   directly in <main>, outside any .container. */
.companion-band { --web-focus-color: var(--palette-on-brand); position: relative; isolation: isolate; color: var(--palette-on-brand); }
.companion-band__inner { position: relative; display: flex; flex-direction: column; }
.companion-band__bar { display: grid; grid-template-columns: var(--sizing-min-touch-target) minmax(0, 1fr) auto; align-items: center; min-block-size: calc(var(--screen-header-height) + var(--screen-header-title-top)); margin-inline: calc(var(--spacing-sm) * -1); }
.companion-band__back, .companion-band__action { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sizing-min-touch-target); block-size: var(--sizing-min-touch-target); border-radius: 50%; color: inherit; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.companion-band__back .icon { --icon-size: var(--catalogue-list-back-icon-size); }
.companion-band__action .icon { --icon-size: var(--trip-planner-share-size); }
.companion-band__action[aria-pressed="true"] { color: var(--palette-brand); }
.companion-band__actions { display: flex; align-items: center; justify-content: flex-end; min-inline-size: var(--sizing-min-touch-target); }
.companion-band__title { text-align: center; font: var(--typography-screen-title) var(--font-family); }
.companion-band__subtitle { font: var(--catalogue-list-subtitle-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.companion-band__tools { display: flex; flex-direction: column; gap: var(--places-search-to-chips); }

/* Plain: the apps' white header. */
.companion-band--plain { color: var(--trip-planner-header-tint); --web-focus-color: var(--palette-brand); }
.companion-band--plain .companion-band__subtitle { display: none; }
.companion-band--plain .companion-band__back:hover, .companion-band--plain .companion-band__action:hover { background: var(--palette-surface); color: var(--palette-brand); }

/* With a picture: the catalogue list's header without its tabs. */
.companion-band--picture { overflow: hidden; min-block-size: var(--companion-menu-hero-height); display: flex; flex-direction: column; background: linear-gradient(to bottom, var(--plans-hero-plain-background)); border-end-start-radius: var(--companion-menu-hero-bottom-radius); border-end-end-radius: var(--companion-menu-hero-bottom-radius); }
.companion-band--short { min-block-size: var(--currency-header-height); border-end-start-radius: var(--currency-header-bottom-radius); border-end-end-radius: var(--currency-header-bottom-radius); }
.companion-band--picture .companion-band__inner { flex: 1 1 auto; padding-block: var(--spacing-xs) var(--spacing-lg); }
.companion-band--picture .companion-band__bar { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); }
.companion-band--picture .companion-band__title { text-align: start; margin-inline: var(--spacing-sm); font: var(--catalogue-list-title-style) var(--font-family); }
.companion-band--picture .companion-band__subtitle { margin-block-start: var(--catalogue-list-title-to-subtitle); }
.companion-band__picture { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Drawn for Arabic, its people at the far end from the text: turned round where reading starts at the other side. */
.companion-band--mirrored .companion-band__picture { transform: scaleX(var(--mirror)); }
/* The brand colour rising from the foot, so that white text can be read on any picture. */
.companion-band--picture::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 20%, var(--palette-brand) 100%); opacity: 0.9; }
.companion-band--picture .companion-band__back:hover, .companion-band--picture .companion-band__action:hover { background: var(--palette-on-brand-faint); }

/* What follows the band. */
.companion-lift { position: relative; z-index: 1; margin-block-start: var(--companion-menu-hero-to-grid); }
.companion-band--plain + .companion-lift { margin-block-start: var(--spacing-xs); }

/* A calm white card. On a phone its content stands on the page, as in the apps. */
.companion-panel { min-inline-size: 0; }
.companion-panel + .companion-panel { margin-block-start: var(--spacing-lg); }
.companion-split > .companion-panel + .companion-panel { margin-block-start: 0; }
.companion-panel__title { margin-block-end: var(--spacing-md); color: var(--place-page-section-title-color); font: var(--typography-title) var(--font-family); }

/* Two parts: one column on a phone, in the order they are written; on a
   desktop what is read, and beside it what stays in view. Either part may be
   written first. */
.companion-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
.companion-split__main, .companion-split__aside { min-inline-size: 0; }

@media (min-width: 768px) {
  .companion-page { background: var(--palette-brand-wash); }

  .companion-band, .companion-band--plain { overflow: hidden; display: block; min-block-size: 0; color: var(--palette-on-brand); --web-focus-color: var(--palette-on-brand); background: linear-gradient(125deg, var(--palette-brand-deep), var(--palette-brand) 45%, var(--palette-place-bank)); border-radius: 0; }
  /* Two pale circles, as the chosen look draws them. */
  .companion-band::before { content: ""; position: absolute; z-index: -1; inset-block-start: calc(var(--web-hero-height) * -0.5); inset-inline-end: calc(var(--web-hero-height) * -0.35); inline-size: calc(var(--web-hero-height) * 1.5); block-size: calc(var(--web-hero-height) * 1.5); border-radius: 50%; background: var(--palette-on-brand-faint); opacity: 0.25; }
  .companion-band--picture::before { content: none; }
  /* With a picture the words stand where reading starts, clear of what the picture shows at its far end, as in the apps. */
  .companion-band--picture::after { background: linear-gradient(to var(--inline-end), var(--palette-brand-deep), transparent 68%), linear-gradient(to bottom, transparent 35%, var(--palette-brand) 100%); opacity: 0.9; }
  .companion-band .companion-band__inner, .companion-band--picture .companion-band__inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); padding-block: calc(var(--spacing-xxl) * 1.5) calc(var(--spacing-xxl) * 1.5); text-align: center; }
  .companion-band--picture .companion-band__inner { padding-block-start: calc(var(--spacing-xxl) * 3); }
  .companion-band--short .companion-band__inner { padding-block-start: calc(var(--spacing-xxl) * 2); }
  .companion-band--lifted .companion-band__inner { padding-block-end: calc(var(--spacing-xxl) * 1.5 + var(--companion-lift)); }
  .companion-band .companion-band__bar { display: block; flex: none; min-block-size: 0; margin-inline: 0; }
  /* The way back and the page's own actions stand at the two top corners of the band. */
  .companion-band__back { position: absolute; inset-block-start: var(--spacing-lg); inset-inline-start: var(--web-gutter); background: var(--palette-on-brand-faint); }
  .companion-band__actions { position: absolute; inset-block-start: var(--spacing-lg); inset-inline-end: var(--web-gutter); gap: var(--spacing-xs); }
  .companion-band__action { background: var(--palette-on-brand-faint); }
  .companion-band__action[aria-pressed="true"] { background: var(--palette-on-brand); color: var(--palette-brand); }
  .companion-band .companion-band__back:hover, .companion-band .companion-band__action:hover { background: var(--palette-navy-veil); color: var(--palette-on-brand); }
  .companion-band .companion-band__title { margin-inline: 0; text-align: center; font: var(--typography-hero) var(--font-family); }
  .companion-band .companion-band__subtitle { display: block; max-inline-size: 60ch; margin-block-start: 0; font: var(--typography-subhead-large) var(--font-family); line-height: 1.5; opacity: 0.92; }
  .companion-band__tools { inline-size: 100%; max-inline-size: 680px; align-items: center; margin-block-start: var(--spacing-xs); }
  .companion-band__tools > .search-field { align-self: stretch; text-align: start; }
  .companion-band--picture .companion-band__inner { align-items: flex-start; text-align: start; }
  .companion-band--picture .companion-band__title { text-align: start; }
  .companion-band--picture .companion-band__subtitle { max-inline-size: 44ch; }
  .companion-band--picture .companion-band__tools { align-items: flex-start; }

  .companion-lift, .companion-band--plain + .companion-lift { margin-block-start: var(--spacing-xl); }
  .companion-band--lifted + .companion-lift { margin-block-start: calc(var(--companion-lift) * -1); }

  .companion-panel { padding: var(--spacing-xl); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
}
@media (min-width: 1100px) {
  .companion-split { grid-template-columns: minmax(0, 1fr) var(--web-aside); gap: var(--spacing-xl); align-items: start; }
  .companion-split--aside-start { grid-template-columns: var(--web-aside) minmax(0, 1fr); }
  .companion-split__main { grid-column: 1; grid-row: 1; }
  .companion-split__aside { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: calc(var(--web-header-height) + var(--spacing-lg)); }
  .companion-split--aside-start .companion-split__main { grid-column: 2; }
  .companion-split--aside-start .companion-split__aside { grid-column: 1; }
}

/* The other states of a page, shown under it as frames: a device of these
   design pages, not of the website. Each frame holds a part of the page as it
   is drawn in that state. */
.companion-states { margin-block-start: var(--web-section-gap); padding-block-start: var(--spacing-xxl); border-block-start: 2px dashed var(--palette-brand-outline); }
.companion-states__title { color: var(--palette-navy); font: var(--typography-title-large) var(--font-family); }
.companion-states__note { max-inline-size: 72ch; margin-block: var(--spacing-xs) var(--spacing-xl); color: var(--palette-text-secondary); font: var(--typography-label-tall) var(--font-family); }
.companion-states__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--spacing-xl) var(--spacing-lg); align-items: start; }
.companion-state { display: flex; flex-direction: column; gap: var(--spacing-sm); min-inline-size: 0; }
.companion-state__label { color: var(--palette-text-emphasis); font: var(--typography-caption-strong) var(--font-family); line-height: var(--typography-caption-loose-line); }
.companion-state__frame { position: relative; overflow: hidden; padding: var(--spacing-md); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: inset 0 0 0 1px var(--palette-brand-outline); }
.companion-state__frame--flush { padding: 0; }
.companion-state__frame--tall { min-block-size: 420px; }
/* A part of a frame that keeps its own margin where the frame has none. */
.companion-state__part { padding: var(--spacing-md); }
.companion-state__frame .camera-stage { min-block-size: 340px; padding: var(--spacing-xxl) var(--spacing-md); }
/* A sheet or a dialog stays inside its frame here; on the website it lies over the window. */
.companion-state__frame .scrim { position: absolute; animation: none; }
.companion-state__frame .sheet, .companion-state__frame .confirm-dialog { animation: none; }
@media (min-width: 768px) {
  .companion-state--wide { grid-column: span 2; }
}

/* A line of an icon and some words: IconLine in TripPlannerScreen.kt, DestinationLine in RouteScreen.kt. */
.icon-line { display: flex; align-items: center; gap: var(--trip-planner-card-icon-to-text); color: var(--trip-planner-card-line-color); font: var(--trip-planner-card-line-style) var(--font-family); }
.icon-line .icon { --icon-size: var(--trip-planner-length-icon-size); }

/* ==========================================================================
   2. The menu: CompanionMenuScreen.kt
   ========================================================================== */

/* The tiles: two columns on a phone, the ninth across both, as the design
   draws them; three by three from a tablet up, as white cards. */
.companion-menu { display: grid; grid-template-columns: repeat(var(--companion-menu-columns), minmax(0, 1fr)); gap: var(--companion-menu-tile-gap); }
.companion-menu__tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-sm); min-block-size: var(--companion-menu-tile-height); padding: var(--spacing-md) var(--companion-menu-tile-label-inset); border-radius: var(--companion-menu-tile-radius); background: var(--companion-menu-tile-fill); color: var(--companion-menu-tile-label-color); font: var(--companion-menu-tile-label-style) var(--font-family); text-align: center; transition: box-shadow var(--motion-selection-millis) var(--motion-easing), transform var(--motion-selection-millis) var(--motion-easing); }
a.companion-menu__tile:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.companion-menu__tile--wide { grid-column: 1 / -1; }
.companion-menu__image { inline-size: var(--companion-menu-tile-image-size); block-size: var(--companion-menu-tile-image-size); object-fit: contain; }
/* A tile whose screen does not exist: drawn, dimmed, marked, and not a control. */
.companion-menu__tile.is-disabled .companion-menu__image, .companion-menu__tile.is-disabled .companion-menu__label { opacity: var(--companion-menu-tile-off-opacity); }
.companion-menu__soon { position: absolute; inset-block-start: var(--companion-menu-soon-top); inset-inline-start: var(--companion-menu-soon-leading-inset); display: inline-flex; align-items: center; block-size: var(--companion-menu-soon-height); padding-inline: var(--companion-menu-soon-padding); border-radius: var(--companion-menu-soon-radius); background: var(--companion-menu-soon-fill); color: var(--companion-menu-soon-label-color); font: var(--companion-menu-soon-label-style) var(--font-family); }
@media (min-width: 768px) {
  .companion-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--web-grid-gap); }
  .companion-menu__tile { gap: var(--spacing-md); min-block-size: calc(var(--companion-menu-tile-height) + var(--spacing-xxl) * 1.5); background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); font: var(--typography-title) var(--font-family); }
  a.companion-menu__tile:hover { box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft), 0 0 0 2px var(--palette-brand-outline); transform: translateY(calc(var(--spacing-xxs) * -1)); }
  .companion-menu__tile--wide { grid-column: auto; }
  .companion-menu__image { inline-size: calc(var(--companion-menu-tile-image-size) * 1.4); block-size: calc(var(--companion-menu-tile-image-size) * 1.4); }
}

/* ==========================================================================
   3. Where the customer stands: CompanionStanding.kt
   ========================================================================== */

/* The card: the paid part of a screen gives way to it. */
.companion-standing { --_accent: var(--companion-standing-accent-not-included); display: flex; flex-direction: column; align-items: center; padding: var(--companion-standing-padding); border-radius: var(--companion-standing-radius); background: var(--companion-standing-fill); box-shadow: inset 0 0 0 var(--companion-standing-border-width) var(--companion-standing-border-color); text-align: center; }
.companion-standing--not-included { --_accent: var(--companion-standing-accent-not-included); }
.companion-standing--included { --_accent: var(--companion-standing-accent-included); }
.companion-standing--taste { --_accent: var(--companion-standing-accent-taste); }
.companion-standing--sign-in-needed { --_accent: var(--companion-standing-accent-sign-in-needed); }
.companion-standing--allowance-used { --_accent: var(--companion-standing-accent-allowance-used); }
.companion-standing--paused { --_accent: var(--companion-standing-accent-paused); }
.companion-standing--unavailable { --_accent: var(--companion-standing-accent-unavailable); }
.companion-standing__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--companion-standing-icon-circle); block-size: var(--companion-standing-icon-circle); border-radius: 50%; background: var(--_accent); color: var(--companion-standing-icon-tint); }
.companion-standing__icon .icon { --icon-size: var(--companion-standing-icon-size); }
.companion-standing__title { margin-block-start: var(--companion-standing-icon-to-title); color: var(--companion-standing-title-color); font: var(--companion-standing-title-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.companion-standing__message { margin-block-start: var(--companion-standing-title-to-message); color: var(--companion-standing-message-color); font: var(--companion-standing-message-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.companion-standing__points { align-self: stretch; display: flex; flex-direction: column; gap: var(--companion-standing-point-gap); margin-block-start: var(--companion-standing-message-to-points); text-align: start; }
.companion-standing__point { display: flex; align-items: flex-start; gap: var(--companion-standing-point-icon-to-text); color: var(--companion-standing-point-color); font: var(--companion-standing-point-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.companion-standing__point .icon { --icon-size: var(--companion-standing-point-icon-size); margin-block-start: 2px; color: var(--companion-standing-point-icon-tint); }
.companion-standing__action { align-self: stretch; margin-block-start: var(--companion-standing-content-to-button); }
/* How much of the allowance is left: a thin bar filled from where reading starts. */
.companion-standing__meter { display: block; inline-size: 100%; block-size: var(--companion-standing-meter-height); margin-block-start: var(--companion-standing-meter-top); border: 0; border-radius: var(--companion-standing-meter-radius); background: var(--companion-standing-meter-track); overflow: hidden; appearance: none; -webkit-appearance: none; color: var(--companion-standing-meter-fill); }
.companion-standing__meter::-webkit-progress-bar { background: var(--companion-standing-meter-track); }
.companion-standing__meter::-webkit-progress-value { background: currentColor; border-radius: var(--companion-standing-meter-radius); }
.companion-standing__meter::-moz-progress-bar { background: currentColor; border-radius: var(--companion-standing-meter-radius); }
.companion-standing__meter--low { color: var(--companion-standing-meter-low-fill); }
/* The note: slim, over working content. */
.companion-standing--note { flex-direction: row; align-items: center; gap: var(--companion-standing-note-icon-to-text); padding: var(--companion-standing-note-padding-vertical) var(--companion-standing-note-padding-horizontal); border-radius: var(--companion-standing-note-radius); text-align: start; }
.companion-standing--note > .icon { --icon-size: var(--companion-standing-note-icon-size); color: var(--_accent); }
.companion-standing__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.companion-standing--note .companion-standing__title { margin: 0; color: var(--companion-standing-note-title-color); font: var(--companion-standing-note-title-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.companion-standing--note .companion-standing__message { margin: 0; color: var(--companion-standing-note-message-color); font: var(--companion-standing-note-message-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.companion-standing__link { flex: none; display: inline-flex; align-items: center; min-block-size: var(--companion-standing-note-action-touch-target); padding-inline: var(--spacing-xs); border-radius: var(--radius-chip); color: var(--companion-standing-note-action-color); font: var(--companion-standing-note-action-style) var(--font-family); }
.companion-standing__link:hover { color: var(--palette-brand-shade); }

/* ==========================================================================
   4. The map, and what lies on it: CompanionMap.kt, CompanionParts.kt
   ========================================================================== */

/* Where the map is drawn. The map itself is its provider's, put here by its
   own script when the page is wired; in these design pages a few streets,
   two parks and some water stand in for it, so that what lies on a map can be
   seen on one. */
.companion-map {
  position: relative; isolation: isolate; overflow: hidden; background-color: var(--palette-brand-wash);
  background-image:
    radial-gradient(ellipse 46% 40% at var(--inline-end) 4%, var(--palette-brand-outline) 0 99%, transparent 100%),
    radial-gradient(circle at 24% 70%, var(--palette-positive-wash) 0 64px, transparent 65px),
    radial-gradient(circle at 68% 82%, var(--palette-positive-wash) 0 46px, transparent 47px),
    linear-gradient(118deg, transparent calc(50% - 7px), var(--palette-background) calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
    repeating-linear-gradient(14deg, transparent 0 62px, var(--palette-background) 62px 68px),
    repeating-linear-gradient(104deg, transparent 0 88px, var(--palette-background) 88px 94px);
}
.companion-map__spot { position: absolute; transform: translate(calc(var(--mirror) * 50%), -50%); }
/* Where things stand on the stand-in map. On the website a place's own position decides. */
.companion-map__spot--1 { inset-block-start: 47%; inset-inline-start: 24%; }
.companion-map__spot--2 { inset-block-start: 53%; inset-inline-start: 66%; }
.companion-map__spot--3 { inset-block-start: 68%; inset-inline-start: 40%; }
.companion-map__spot--4 { inset-block-start: 76%; inset-inline-start: 72%; }
.companion-map__spot--5 { inset-block-start: 45%; inset-inline-start: 84%; }
.companion-map__spot--6 { inset-block-start: 82%; inset-inline-start: 20%; }
.companion-map__spot--user { inset-block-start: 61%; inset-inline-start: 52%; }
.companion-map__spot--origin { inset-block-start: 36%; inset-inline-start: 74%; }
.companion-map__spot--destination { inset-block-start: 60%; inset-inline-start: 48%; }
/* A place: a circle in its category's colour with its icon. */
.companion-map__pin { --_color: var(--palette-text-secondary); display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sizing-min-touch-target); block-size: var(--sizing-min-touch-target); border-radius: 50%; color: var(--companion-map-pin-icon-tint); }
.companion-map__pin::before { content: ""; position: absolute; z-index: -1; inline-size: var(--companion-map-pin-size); block-size: var(--companion-map-pin-size); border-radius: 50%; background: var(--_color); border: var(--companion-map-pin-outline-width) solid var(--companion-map-pin-outline-color); box-shadow: var(--companion-map-pin-shadow); }
.companion-map__pin .icon { --icon-size: var(--companion-map-pin-icon-size); }
.companion-map__pin[aria-current="true"], .companion-map__pin.is-selected { z-index: 1; }
.companion-map__pin[aria-current="true"]::before, .companion-map__pin.is-selected::before { inline-size: var(--companion-map-pin-selected-size); block-size: var(--companion-map-pin-selected-size); }
.companion-map__pin[aria-current="true"] .icon, .companion-map__pin.is-selected .icon { --icon-size: var(--companion-map-pin-selected-icon-size); }
/* Where the customer is. */
.companion-map__user { inline-size: var(--companion-map-origin-ring-size); block-size: var(--companion-map-origin-ring-size); border-radius: 50%; background: var(--palette-brand); border: 3px solid var(--palette-background); box-shadow: 0 0 0 var(--spacing-sm) var(--palette-brand-faint); }
/* A route: a ring where it starts, a pin where it ends, and its line between them. */
.companion-map__origin { inline-size: var(--companion-map-origin-ring-size); block-size: var(--companion-map-origin-ring-size); border-radius: 50%; background: var(--companion-map-origin-ring-fill); border: var(--companion-map-origin-ring-width) solid var(--companion-map-origin-ring-color); }
.companion-map__destination { color: var(--companion-map-destination-tint); --icon-size: calc(var(--companion-map-destination-height) * 1.4); transform: translate(calc(var(--mirror) * 50%), -100%); }
.companion-map__route { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; transform: scaleX(calc(var(--mirror) * -1)); }
.companion-map__line { fill: none; stroke: var(--companion-map-route-line-color); stroke-width: var(--companion-map-route-line-width); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.companion-map__line--walk { stroke: var(--companion-map-walk-color); stroke-dasharray: 0 calc(var(--companion-map-walk-dot) + var(--companion-map-walk-gap)); }
.companion-map__line--other { stroke: var(--palette-icon-muted); }
/* A build with no key for the map: a plain fill and one line. */
.companion-map--not-configured { display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); background: var(--companion-map-not-configured-fill); color: var(--companion-map-not-configured-color); font: var(--companion-map-not-configured-style) var(--font-family); text-align: center; }
/* On the website a page is never half a plain fill. With no map (no key, or
   the provider's script could not be had) the page is composed without it:
   places--no-map and route-stage--no-map, further down. Where the map would
   be, a slim strip says so, and what the page lays on a map (the weather, the
   sample note, the way back to one's own position) stands in the strip. */
.companion-map--strip { position: static; isolation: auto; overflow: visible; flex-wrap: wrap; justify-content: flex-start; gap: var(--spacing-xs) var(--spacing-md); min-block-size: calc(var(--sizing-min-touch-target) + 2 * var(--spacing-xs)); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md); text-align: start; }
.companion-map--strip > p { flex: 1 1 18ch; min-inline-size: 0; }

/* The provider's own map, drawn by its script (CompanionMap.kt): its tiles
   fill the box in place of the stand-in's streets. Until its first frame, and
   behind it, the plain fill. */
.companion-map--live { background-image: none; background-color: var(--companion-map-not-configured-fill); }
.companion-map__canvas { position: absolute; inset: 0; z-index: -1; }
/* What the page lays on that map, each thing at its own point of the ground.
   The point is data: the map's layer sets it, as the provider's script sets
   its own markers'. What a thing looks like is the rules above: a mark is the
   stand-in's spot, standing on a point the map gives. Never mirrored: a map
   reads the same way in every language. */
.companion-map__layer { position: absolute; top: 0; left: 0; direction: ltr; }
.companion-map__mark { position: absolute; transform: translate(-50%, -50%); }
/* The destination's pin stands on its point. */
.companion-map__mark.companion-map__destination { transform: translate(-50%, -100%); }
/* A route's line, in the layer's own points. A stretch in its line's own colour (a ride by public transport) is handed that colour as data. */
.companion-map__lines { position: absolute; top: 0; left: 0; inline-size: 1px; block-size: 1px; overflow: visible; pointer-events: none; }
.companion-map__lines .companion-map__line { stroke: var(--data-color, var(--companion-map-route-line-color)); vector-effect: none; }
.companion-map__lines .companion-map__line--walk { stroke: var(--data-color, var(--companion-map-walk-color)); }
/* The customer while guidance runs: a white disc with an arrow turned to the direction of travel, which is data. The arrow points up and to the right in its file. */
.companion-map__user--heading { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--companion-map-user-marker-size); block-size: var(--companion-map-user-marker-size); border: 0; background: var(--companion-map-user-marker-fill); color: var(--companion-map-user-marker-icon-tint); box-shadow: var(--companion-map-user-marker-shadow); }
.companion-map__user--heading .icon { --icon-size: var(--companion-map-user-marker-icon-size); transform: rotate(calc(var(--data-heading, 45deg) - 45deg)); }
/* The provider's own mark and its terms stand along the map's foot, the mark at the left in every language: what the
   page lays at the foot's two corners stands above them, and never over them. */
.companion-map--live .places__weather, .companion-map--live .places__locate { inset-block-end: calc(var(--spacing-lg) + var(--spacing-md)); }
/* Who the map's data comes from, in the source's own words. */
.companion-map__credit { position: absolute; inset-block-end: var(--spacing-xs); inset-inline-start: var(--spacing-sm); color: var(--route-credit-color); font: var(--route-credit-style) var(--font-family); }

/* RoundMapButton: a white disc over the map with one icon. */
.round-map-button { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--places-locate-size); block-size: var(--places-locate-size); border-radius: 50%; background: var(--places-locate-fill); color: var(--places-locate-icon-tint); box-shadow: var(--places-locate-shadow); transition: color var(--motion-selection-millis) var(--motion-easing); }
.round-map-button .icon { --icon-size: var(--places-locate-icon-size); }
.round-map-button:hover { color: var(--palette-brand-shade); }
.round-map-button--route { inline-size: var(--route-recentre-size); block-size: var(--route-recentre-size); }
.round-map-button--route .icon { --icon-size: var(--route-recentre-icon-size); }

/* SampleCapsule: that what is shown is sample content. */
.sample-capsule { display: inline-flex; align-items: center; min-block-size: var(--camera-sample-note-height); padding-inline: var(--camera-sample-note-padding); border-radius: var(--camera-sample-note-height); background: var(--camera-sample-note-fill); color: var(--camera-sample-note-color); font: var(--camera-sample-note-style) var(--font-family); }

/* ==========================================================================
   5. Places nearby: PlacesScreen.kt, PlaceCard.kt
   ========================================================================== */

/* The page. On a phone, the apps' screen: the map with the bar, the search and
   the chips laid on it, then the list. On a desktop, a web page: the band with
   the search in its middle, and under it the list beside the map, which stays
   in view while the list is read. One markup: .places__top is the map block on
   a phone and dissolves on a desktop, where its two children take their own
   places in the grid. */
.places { display: grid; grid-template-columns: minmax(0, 1fr); }
.places__top { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-block-size: var(--places-map-height); border-end-start-radius: var(--places-map-bottom-radius); border-end-end-radius: var(--places-map-bottom-radius); }
.places__top .companion-band { z-index: 1; }
/* The brand colour falling from the top of the map, behind the bar and the search. */
.places__top .companion-band::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block-start: 0; block-size: calc(var(--places-map-height) * 0.6); background: linear-gradient(to bottom, var(--places-map-fade)); pointer-events: none; }
.places__map { position: absolute; inset: 0; z-index: 0; }
/* The apps let the chips slide sideways; a page lets them run onto a second row, so that none is out of sight. */
.places__chips { display: flex; flex-wrap: wrap; gap: 0 var(--places-chip-gap); }
.places__list { padding-inline: var(--web-gutter); padding-block-start: var(--places-map-to-standing); display: flex; flex-direction: column; gap: var(--places-filters-to-cards); min-inline-size: 0; }
.places__cards { display: flex; flex-direction: column; gap: var(--places-card-gap); }
.places__filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--places-filters-gap); }
.places__filters .segmented-control { flex: 1 1 200px; max-inline-size: 280px; }
.places__credit { color: var(--places-credit-color); font: var(--places-credit-style) var(--font-family); }
/* What stands on the map: the weather, the sample note, the round button. */
.places__weather { position: absolute; inset-block-end: var(--spacing-lg); inset-inline-start: var(--places-locate-trailing-inset); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); }
.places__locate { position: absolute; inset-block-end: var(--places-locate-bottom-inset); inset-inline-end: var(--places-locate-trailing-inset); }
/* The list is being asked for again for the area the map moved to: a thin line under the map. */
.places-refresh { display: block; block-size: var(--places-refresh-line-height); border-radius: var(--places-refresh-line-height); background: linear-gradient(to var(--inline-end), var(--places-refresh-line-color) 0 40%, var(--palette-brand-outline) 40% 100%); }

/* A category of place, on the map. A chip that is a choice: the chosen one is the brand colour. */
.place-chip { --_color: var(--palette-text-secondary); flex: none; display: inline-flex; align-items: center; min-block-size: var(--sizing-min-touch-target); border-radius: var(--places-chip-height); cursor: pointer; }
.place-chip__shape { display: inline-flex; align-items: center; gap: var(--places-chip-icon-to-label); block-size: var(--places-chip-height); padding-inline: var(--places-chip-padding); border-radius: var(--places-chip-height); background: var(--places-chip-fill); color: var(--places-chip-label-color); font: var(--places-chip-label-style) var(--font-family); white-space: nowrap; box-shadow: 0 0 var(--spacing-sm) var(--palette-shadow-soft); transition: background-color var(--motion-selection-millis) var(--motion-easing), color var(--motion-selection-millis) var(--motion-easing); }
.place-chip__shape .icon { --icon-size: var(--places-chip-icon-size); color: var(--_color); }
.place-chip[aria-pressed="true"] .place-chip__shape { background: var(--places-chip-selected-fill); color: var(--places-chip-selected-color); }
.place-chip[aria-pressed="true"] .place-chip__shape .icon { color: inherit; }
.place-chip:disabled, .place-chip.is-disabled { opacity: var(--places-off-opacity); pointer-events: none; }
/* "Open now", over the list: on the page, not on the map. */
.place-chip--open-now { --_color: var(--places-open-now-tint); }
.place-chip--open-now .place-chip__shape { background: var(--places-open-now-fill); box-shadow: none; }

/* The weather where the customer is: a small capsule on the map. */
.places-weather { display: inline-flex; align-items: center; gap: var(--places-weather-to-credit); min-block-size: var(--places-weather-height); padding-inline: var(--places-weather-padding); border-radius: var(--places-weather-height); background: var(--places-weather-fill); color: var(--places-weather-color); font: var(--places-weather-style) var(--font-family); box-shadow: 0 0 var(--spacing-sm) var(--palette-shadow-soft); }
.places-weather__credit { color: var(--places-weather-credit-color); font: var(--places-weather-credit-style) var(--font-family); }

/* PlaceCard.kt. The card opens the place: its name is the link, stretched over
   the card; the heart and "Directions" are controls of their own, above it. */
.place-card { --_color: var(--palette-text-secondary); position: relative; display: grid; grid-template-columns: var(--place-card-picture-width) minmax(0, 1fr); gap: var(--place-card-picture-to-text); min-block-size: var(--place-card-min-height); padding: var(--place-card-picture-inset); border-radius: var(--place-card-radius); background: var(--place-card-fill); box-shadow: inset 0 0 0 var(--place-card-border-width) var(--palette-brand-outline); transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.place-card:hover { box-shadow: inset 0 0 0 2px var(--palette-brand-outline); }
.place-card[aria-current="true"], .place-card.is-selected { box-shadow: inset 0 0 0 2px var(--palette-brand); }
.place-card__picture { position: relative; overflow: hidden; align-self: stretch; min-block-size: var(--place-card-picture-height); border-radius: var(--place-card-picture-radius); background: var(--place-card-picture-loading-fill); }
.place-card__picture img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* A place with no picture: its category's icon, large, on a soft fill of its colour. */
.place-card__artwork { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--_color); }
.place-card__artwork::before { content: ""; position: absolute; inset: 0; background: var(--_color); opacity: var(--place-card-artwork-fill-opacity); }
.place-card__artwork .icon { --icon-size: var(--place-card-artwork-icon-size); }
.place-card__heart { position: absolute; z-index: 2; inset-block-start: 0; inset-inline-start: 0; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--place-card-heart-touch-target); block-size: var(--place-card-heart-touch-target); color: var(--place-card-heart-tint); }
.place-card__heart::before { content: ""; position: absolute; inline-size: var(--place-card-heart-circle); block-size: var(--place-card-heart-circle); border-radius: 50%; background: var(--place-card-heart-fill); }
.place-card__heart .icon { position: relative; --icon-size: var(--place-card-heart-width); }
.place-card__heart[aria-pressed="true"] { color: var(--place-card-heart-saved-tint); }
.place-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--place-card-row-gap); min-inline-size: 0; padding-block: calc(var(--place-card-name-top) - var(--place-card-picture-inset)) calc(var(--place-card-button-bottom-inset) - var(--place-card-picture-inset) - 7px); padding-inline-end: calc(var(--place-card-badge-inset) - var(--place-card-picture-inset)); }
.place-card__heading { align-self: stretch; display: flex; align-items: flex-start; gap: var(--place-card-name-to-badge); }
.place-card__names { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--place-card-name-to-kind); }
/* The link is a finger tall without moving the line under it. */
.place-card__name { padding-block: 11px; margin-block: -11px; color: var(--place-card-name-color); font: var(--place-card-name-style) var(--font-family); line-height: var(--typography-body-loose-line); overflow-wrap: anywhere; }
.place-card__name::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--place-card-radius); }
.place-card__kind { color: var(--place-card-kind-color); font: var(--place-card-kind-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.place-card__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--place-card-badge-size); block-size: var(--place-card-badge-size); border-radius: var(--place-card-badge-radius); background: var(--_color); color: var(--place-card-badge-icon-tint); }
.place-card__badge .icon { --icon-size: var(--place-card-badge-icon-size); }
.place-card__directions { position: relative; z-index: 2; display: inline-flex; align-items: center; min-block-size: var(--place-card-button-touch-target); margin-block-start: auto; border-radius: var(--place-card-button-height); }
.place-card__directions > span { display: inline-flex; align-items: center; gap: var(--place-card-button-icon-to-label); block-size: var(--place-card-button-height); padding-inline: var(--place-card-button-leading-padding) var(--place-card-button-trailing-padding); border-radius: var(--place-card-button-height); background: var(--place-card-button-fill); color: var(--place-card-button-color); font: var(--place-card-button-label-style) var(--font-family); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.place-card__directions .icon { --icon-size: var(--place-card-button-icon-size); }
.place-card__directions:hover > span { background: var(--palette-brand-shade); }
/* While the places are looked for: an empty shape of a card's size. */
.placeholder--place-card { block-size: var(--place-card-min-height); border-radius: var(--place-card-radius); background: var(--places-placeholder-fill); }

/* PlaceRating, PlaceOpen, PlaceFacts: drawn on the card and on the place's own page. */
.place-rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--place-card-rating-gap); color: var(--place-card-rating-color); font: var(--place-card-rating-style) var(--font-family); }
.place-rating .icon { --icon-size: var(--place-card-star-size); color: var(--place-card-star-tint); }
.place-rating__count { font: var(--place-card-rating-count-style) var(--font-family); }
.place-open { margin-inline-start: var(--spacing-xs); color: var(--place-card-open-color); font: var(--place-card-open-style) var(--font-family); }
.place-open--closed { color: var(--place-card-closed-color); }
.place-open:first-child { margin-inline-start: 0; }
.place-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xxs) var(--place-card-fact-gap); color: var(--place-card-fact-color); font: var(--place-card-fact-style) var(--font-family); }
.place-facts__fact { display: inline-flex; align-items: center; gap: var(--place-card-fact-icon-to-text); white-space: nowrap; }
.place-facts .icon { --icon-size: var(--place-card-clock-size); }

@media (min-width: 768px) {
  .places__list { padding-inline: 0; }
}
@media (min-width: 1100px) {
  .places { grid-template-columns: minmax(var(--web-gutter), 1fr) minmax(0, 440px) minmax(0, 720px) minmax(var(--web-gutter), 1fr); column-gap: var(--spacing-xl); }
  .places__top { display: contents; }
  .places__top .companion-band { grid-column: 1 / -1; grid-row: 1; }
  .places__top .companion-band::before { content: ""; inset-inline: auto; inset-block-start: calc(var(--web-hero-height) * -0.5); inset-inline-end: calc(var(--web-hero-height) * -0.35); inline-size: calc(var(--web-hero-height) * 1.5); block-size: calc(var(--web-hero-height) * 1.5); border-radius: 50%; background: var(--palette-on-brand-faint); opacity: 0.25; }
  .places__chips { justify-content: center; }
  /* Nothing lies on the top of the map here, so the stand-in places spread over the whole of it. */
  .places__map .companion-map__spot--1 { inset-block-start: 30%; }
  .places__map .companion-map__spot--2 { inset-block-start: 44%; }
  .places__map .companion-map__spot--3 { inset-block-start: 62%; }
  .places__map .companion-map__spot--5 { inset-block-start: 24%; }
  .places__map .companion-map__spot--user { inset-block-start: 54%; }
  .places__list { grid-column: 2; grid-row: 2; margin-block-start: calc(var(--companion-lift) * -1); padding: var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); position: relative; z-index: 1; }
  .places__map { grid-column: 3; grid-row: 2; position: sticky; inset: auto; inset-block-start: calc(var(--web-header-height) + var(--spacing-lg)); z-index: 1; align-self: start; block-size: calc(var(--places-map-height) * 1.36); margin-block-start: calc(var(--companion-lift) * -1); border-radius: var(--radius-card); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  /* A tablet: the band, then the map as a card, then the list. */
  .places { padding-inline: var(--web-gutter); row-gap: var(--spacing-lg); }
  .places__top { display: contents; }
  .places__top .companion-band { margin-inline: calc(var(--web-gutter) * -1); }
  .places__top .companion-band::before { content: none; }
  .places__chips { justify-content: center; }
  .places__map { position: relative; inset: auto; block-size: var(--places-map-height); margin-block-start: calc(var(--companion-lift) * -1); border-radius: var(--radius-card); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); z-index: 1; }
  .places__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
}

/* With no map (.companion-map--strip says when): the band, the strip, and the
   list across the page, its cards side by side where there is room. On a
   phone the bar, the search and the chips have no map to lie on: they stand
   on the band's own colour. One markup, as with a map. */
.places--no-map .places__top { display: contents; }
.places--no-map .companion-band { margin-inline: 0; padding-block-end: var(--spacing-lg); background: linear-gradient(125deg, var(--palette-brand-deep), var(--palette-brand) 45%, var(--palette-place-bank)); border-end-start-radius: var(--places-map-bottom-radius); border-end-end-radius: var(--places-map-bottom-radius); }
.places--no-map .places__top .companion-band::before { content: none; }
/* The strip on a phone: the line and the capsules one over the other where reading starts, the round button beside them. */
.places--no-map .places__map { position: static; inset: auto; z-index: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; block-size: auto; margin: var(--spacing-md) var(--web-gutter) 0; padding-block: var(--spacing-sm); box-shadow: none; }
.places--no-map .places__map > p, .places--no-map .places__weather { grid-column: 1; }
.places--no-map .places__weather { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
.places--no-map .places__locate { position: static; grid-column: 2; grid-row: 1 / span 2; margin-inline-start: auto; }
@media (min-width: 768px) {
  .places--no-map .companion-band { padding-block-end: 0; border-radius: 0; }
  .places--no-map .places__top .companion-band::before { content: ""; }
  /* From a tablet up: one row on a white card, the line where reading starts and the rest at the far end. */
  .places--no-map .places__map { position: relative; z-index: 1; display: flex; margin: calc(var(--companion-lift) * -1) 0 0; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
  .places--no-map .places__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--spacing-md); }
}
@media (min-width: 1100px) {
  .places--no-map { grid-template-columns: minmax(var(--web-gutter), 1fr) minmax(0, var(--web-container)) minmax(var(--web-gutter), 1fr); row-gap: var(--spacing-lg); }
  .places--no-map .places__map { grid-column: 2; grid-row: 2; align-self: auto; }
  .places--no-map .places__list { grid-column: 2; grid-row: 3; margin-block-start: 0; padding: var(--spacing-xl); }
}

/* ==========================================================================
   6. A place's own page: PlaceScreen.kt
   ========================================================================== */

/* On a phone the picture, the name, the buttons, then the details. On a
   desktop the details are read beside a panel that stays in view: where the
   place is, and what to do about it. One markup, placed by areas. */
.place-page { --_color: var(--palette-text-secondary); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "picture" "header" "panel" "content"; }
.place-page__picture { grid-area: picture; position: relative; isolation: isolate; overflow: hidden; block-size: var(--place-page-picture-height); margin-inline: calc(var(--web-gutter) * -1); border-end-start-radius: var(--place-page-picture-bottom-radius); border-end-end-radius: var(--place-page-picture-bottom-radius); background: var(--place-card-picture-loading-fill); color: var(--place-page-icon-tint); --web-focus-color: var(--palette-on-brand); }
.place-page__picture img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* A veil at the top, so that the icons can be read on any picture. */
.place-page__picture::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block-start: 0; block-size: var(--place-page-picture-scrim-height); background: linear-gradient(to bottom, var(--place-page-picture-scrim), transparent); }
.place-page__artwork { position: absolute; inset: 0; z-index: -2; display: flex; align-items: center; justify-content: center; color: var(--_color); background: var(--palette-background); }
.place-page__artwork::before { content: ""; position: absolute; inset: 0; background: var(--_color); opacity: var(--place-page-artwork-fill-opacity); }
.place-page__artwork .icon { --icon-size: var(--place-page-artwork-icon-size); }
.place-page__picture--artwork { color: var(--palette-text-emphasis); --web-focus-color: var(--palette-brand); }
.place-page__picture--artwork::before { content: none; }
.place-page__icons { display: flex; align-items: center; gap: var(--spacing-xxs); padding: var(--spacing-xs) var(--spacing-sm); }
.place-page__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--place-page-icon-touch-target); block-size: var(--place-page-icon-touch-target); border-radius: 50%; color: inherit; }
.place-page__icon .icon { --icon-size: var(--place-page-share-icon-size); }
.place-page__icon:first-child { margin-inline-end: auto; }
.place-page__icon:first-child .icon { --icon-size: var(--place-page-back-icon-size); }
.place-page__icon:hover { background: var(--palette-navy-veil); }
.place-page__icon[aria-pressed="true"] { color: var(--place-page-saved-tint); }
.place-page__photo-credit { position: absolute; inset-block-end: var(--place-page-picture-credit-inset); inset-inline-end: var(--place-page-picture-credit-inset); padding: var(--spacing-xxs) var(--place-page-picture-credit-padding); border-radius: var(--place-page-picture-credit-radius); background: var(--place-page-picture-credit-fill); color: var(--place-page-picture-credit-color); font: var(--place-page-picture-credit-style) var(--font-family); }
.place-page__header { grid-area: header; display: flex; flex-direction: column; padding-block-start: var(--place-page-picture-to-name); }
.place-page__name { color: var(--place-page-name-color); font: var(--place-page-name-style) var(--font-family); overflow-wrap: anywhere; }
.place-page__kind { margin-block-start: var(--place-page-name-to-kind); color: var(--place-page-kind-color); font: var(--place-page-kind-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.place-page__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--place-page-fact-row-gap) var(--place-page-fact-gap); margin-block-start: var(--place-page-kind-to-facts); }
.place-page__price { color: var(--place-page-price-color); font: var(--place-page-price-style) var(--font-family); }
.place-page__panel { grid-area: panel; display: flex; flex-direction: column; min-inline-size: 0; padding-block-start: var(--place-page-facts-to-buttons); }
.place-page__map { display: none; }
.place-page__message { margin-block-start: var(--place-page-buttons-to-message); color: var(--place-page-message-color); font: var(--place-page-message-style) var(--font-family); }
.place-page__content { grid-area: content; display: flex; flex-direction: column; gap: var(--place-page-section-gap); min-inline-size: 0; padding-block-start: var(--place-page-buttons-to-content); }
.place-page__rows .action-row__subtitle { white-space: normal; line-height: var(--typography-label-tall-line); }
.place-page__notice { color: var(--place-page-notice-color); font: var(--place-page-notice-style) var(--font-family); }
.place-page__credit { color: var(--place-page-credit-color); font: var(--place-page-credit-style) var(--font-family); }
.placeholder--place-row { block-size: var(--place-page-placeholder-height); border-radius: var(--radius-md); background: var(--place-page-placeholder-fill); }
.placeholder--place-row + .placeholder--place-row { margin-block-start: var(--place-page-row-gap); }

/* The things to do with the place: round buttons with a label under each. */
.place-buttons { display: flex; flex-wrap: wrap; gap: var(--place-page-button-row-gap) var(--place-page-button-gap); }
.place-button { display: flex; flex-direction: column; align-items: center; gap: var(--place-page-button-to-label); inline-size: var(--place-page-button-label-width); color: var(--place-page-button-label-color); font: var(--place-page-button-label-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: center; border-radius: var(--radius-md); }
.place-button__disc { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--place-page-button-size); block-size: var(--place-page-button-size); border-radius: 50%; background: var(--place-page-secondary-fill); color: var(--place-page-secondary-icon-tint); box-shadow: inset 0 0 0 var(--place-page-secondary-border-width) var(--palette-brand-outline); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.place-button__disc .icon { --icon-size: var(--place-page-button-icon-size); }
.place-button:hover .place-button__disc { background: var(--palette-brand-wash); }
.place-button--primary .place-button__disc { background: var(--place-page-primary-fill); color: var(--place-page-primary-icon-tint); box-shadow: none; }
.place-button--primary:hover .place-button__disc { background: var(--palette-brand-shade); }

/* A part of the details: its title, then what the map says. */
.place-section__title { margin-block-end: var(--place-page-section-title-to-content); color: var(--place-page-section-title-color); font: var(--place-page-section-title-style) var(--font-family); }
.place-hours__status { color: var(--place-page-hours-open-color); font: var(--place-page-hours-status-style) var(--font-family); }
.place-hours__status--closed { color: var(--place-page-hours-closed-color); }
.place-hours__lines { display: flex; flex-direction: column; gap: var(--place-page-hours-line-gap); margin-block-start: var(--spacing-xs); color: var(--place-page-hours-line-color); font: var(--place-page-hours-line-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.place-hours__line { display: flex; justify-content: space-between; gap: var(--spacing-md); }
.place-reviews__text { color: var(--place-page-review-color); font: var(--place-page-review-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.place-reviews__disclosure { margin-block-start: var(--place-page-review-to-disclosure); color: var(--place-page-disclosure-color); font: var(--place-page-disclosure-style) var(--font-family); line-height: var(--typography-caption-line); }
.place-reviews__links { display: flex; flex-wrap: wrap; gap: 0 var(--place-page-link-gap); margin-block-start: var(--place-page-disclosure-to-links); }
.place-reviews__link { display: inline-flex; align-items: center; min-block-size: var(--place-page-link-touch-target); color: var(--place-page-link-color); font: var(--place-page-link-style) var(--font-family); border-radius: var(--spacing-xxs); }
.place-reviews__link:hover { color: var(--palette-brand-shade); text-decoration: underline; text-underline-offset: 0.25em; }
.place-access { display: flex; flex-direction: column; gap: var(--place-page-access-row-gap); }
.place-access__row { display: flex; align-items: center; gap: var(--place-page-access-icon-to-text); color: var(--place-page-access-label-color); font: var(--place-page-access-label-style) var(--font-family); }
.place-access__row .icon { --icon-size: var(--place-page-access-icon-size); color: var(--place-page-access-yes-tint); }
.place-access__row--no .icon { color: var(--place-page-access-no-tint); }
.place-access__value { margin-inline-start: auto; color: var(--place-page-access-value-color); font: var(--place-page-access-value-style) var(--font-family); }

@media (min-width: 768px) {
  .place-page { margin-block-start: var(--spacing-lg); }
  .place-page__picture { margin-inline: 0; block-size: calc(var(--place-page-picture-height) * 1.4); border-radius: var(--radius-card); }
  .place-page__name { font: var(--typography-display) var(--font-family); }
  .place-page__map { display: block; block-size: calc(var(--place-page-picture-height) * 0.8); border-radius: var(--radius-md); margin-block-end: var(--spacing-lg); }
  .place-page__panel { margin-block-start: var(--place-page-facts-to-buttons); padding: var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
  .place-page__content { padding: var(--spacing-xl); margin-block-start: var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
  /* Equal cells from where reading starts: four fill the panel's row, and two stand side by side, never at its two edges. */
  .place-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--place-page-button-label-width), 1fr)); justify-items: center; gap: var(--place-page-button-row-gap) var(--spacing-xs); }
}
@media (min-width: 1100px) {
  .place-page { grid-template-columns: minmax(0, 1fr) var(--web-aside); grid-template-areas: "picture panel" "header panel" "content panel"; grid-template-rows: auto auto 1fr; column-gap: var(--spacing-xl); align-items: start; }
  .place-page__panel { position: sticky; inset-block-start: calc(var(--web-header-height) + var(--spacing-lg)); margin-block-start: 0; }
}

/* ==========================================================================
   7. The trip planner: TripPlannerScreen.kt
   ========================================================================== */

/* TripCard: the trip in a picture and three lines. Not a control; its button is. */
.trip-card { display: grid; grid-template-columns: var(--trip-planner-card-picture-width) minmax(0, 1fr); gap: var(--trip-planner-card-picture-to-text); min-block-size: var(--trip-planner-card-height); padding: var(--trip-planner-card-picture-inset); border-radius: var(--trip-planner-card-radius); background: var(--trip-planner-card-fill); box-shadow: inset 0 0 0 var(--trip-planner-card-border-width) var(--palette-brand-outline); }
.trip-card__picture { align-self: stretch; inline-size: 100%; block-size: 100%; min-block-size: var(--trip-planner-card-picture-height); object-fit: cover; border-radius: var(--trip-planner-card-picture-radius); background: var(--trip-planner-card-picture-fallback-fill); }
.trip-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); min-inline-size: 0; }
.trip-card__title { color: var(--trip-planner-card-title-color); font: var(--trip-planner-card-title-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.trip-card__edit { display: inline-flex; align-items: center; min-block-size: var(--sizing-min-touch-target); margin-block-start: auto; border-radius: var(--trip-planner-edit-height); }
.trip-card__edit > span { display: inline-flex; align-items: center; gap: var(--trip-planner-edit-icon-to-label); block-size: var(--trip-planner-edit-height); padding-inline: var(--trip-planner-edit-padding); border-radius: var(--trip-planner-edit-height); background: var(--trip-planner-edit-fill); color: var(--trip-planner-edit-color); font: var(--trip-planner-edit-label-style) var(--font-family); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.trip-card__edit .icon { --icon-size: var(--trip-planner-edit-icon-size); }
.trip-card__edit:hover > span { background: var(--palette-brand-shade); }
.trip-card__edit:disabled, .trip-card__edit.is-disabled { opacity: var(--button-disabled-opacity); pointer-events: none; }
.trip-card__message { margin-block-start: var(--trip-planner-card-to-message); color: var(--trip-planner-message-color); font: var(--trip-planner-message-style) var(--font-family); }
.trip-tabs { margin-block: var(--trip-planner-card-to-tabs) var(--trip-planner-tabs-to-rows); overflow-x: auto; scrollbar-width: none; }
.trip-tabs::-webkit-scrollbar { display: none; }

/* StopRow: a rail (dot, icon, time) and a card. Not a control. */
.trip-stops { display: flex; flex-direction: column; gap: var(--trip-planner-row-gap); }
.trip-stop { --_color: var(--palette-text-secondary); position: relative; display: grid; grid-template-columns: var(--trip-planner-rail-width) minmax(0, 1fr); gap: var(--trip-planner-rail-to-card); min-block-size: var(--trip-planner-row-height); }
.trip-stop__rail { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--trip-planner-centre-to-time); padding-inline-start: calc(var(--trip-planner-dot-size) + var(--trip-planner-dot-to-icon)); }
/* The dotted line that joins the day's stops, and the dot of this one. */
.trip-stop__rail::before { content: ""; position: absolute; inset-block: calc(var(--trip-planner-row-gap) * -0.5); inset-inline-start: calc(var(--trip-planner-dot-size) / 2); border-inline-start: var(--trip-planner-line-width) dashed var(--trip-planner-line-color); }
.trip-stop:first-child .trip-stop__rail::before { inset-block-start: 50%; }
.trip-stop:last-child .trip-stop__rail::before { inset-block-end: 50%; }
.trip-stop__rail::after { content: ""; position: absolute; inset-block-start: calc(50% - var(--trip-planner-dot-size) / 2); inset-inline-start: 0; inline-size: var(--trip-planner-dot-size); block-size: var(--trip-planner-dot-size); border-radius: 50%; background: var(--trip-planner-dot-fill); }
.trip-stop__kind { --icon-size: var(--trip-planner-kind-icon-size); color: var(--_color); }
.trip-stop__time { color: var(--trip-planner-time-color); font: var(--trip-planner-time-style) var(--font-family); }
.trip-stop__card { display: grid; grid-template-columns: var(--trip-planner-stop-picture-width) minmax(0, 1fr); gap: var(--trip-planner-stop-picture-to-text); align-items: center; padding: var(--trip-planner-stop-picture-inset); border-radius: var(--trip-planner-stop-radius); background: var(--trip-planner-stop-fill); box-shadow: inset 0 0 0 var(--trip-planner-stop-border-width) var(--palette-brand-outline); }
.trip-stop__picture { inline-size: 100%; block-size: var(--trip-planner-stop-picture-height); object-fit: cover; border-radius: var(--trip-planner-stop-picture-radius); background: var(--trip-planner-stop-picture-fallback-fill); }
.trip-stop__fallback { display: flex; align-items: center; justify-content: center; block-size: var(--trip-planner-stop-picture-height); border-radius: var(--trip-planner-stop-picture-radius); background: var(--trip-planner-stop-picture-fallback-fill); color: var(--trip-planner-stop-picture-fallback-icon-tint); }
.trip-stop__fallback .icon { --icon-size: var(--trip-planner-stop-picture-fallback-icon-size); }
.trip-stop__text { display: flex; flex-direction: column; gap: var(--trip-planner-stop-line-gap); min-inline-size: 0; }
.trip-stop__name { color: var(--trip-planner-stop-name-color); font: var(--trip-planner-stop-name-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.trip-stop__line { color: var(--trip-planner-stop-kind-color); font: var(--trip-planner-stop-kind-style) var(--font-family); }
.placeholder--trip-card { block-size: var(--trip-planner-card-height); border-radius: var(--trip-planner-card-radius); background: var(--trip-planner-placeholder-fill); }
.placeholder--trip-stop { block-size: var(--trip-planner-row-height); border-radius: var(--trip-planner-stop-radius); background: var(--trip-planner-placeholder-fill); }
.placeholder--tabs { block-size: var(--segmented-control-compact-touch-target); border-radius: var(--segmented-control-radius); background: var(--trip-planner-placeholder-fill); }

/* DayBar: the day in one line, and the way to its route. */
.trip-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-xs) var(--spacing-md); min-block-size: var(--trip-planner-bar-height); margin-block-start: var(--trip-planner-rows-to-bar); padding: var(--spacing-xs) var(--trip-planner-bar-button-inset); border-radius: var(--trip-planner-bar-radius); background: var(--trip-planner-bar-fill); color: var(--trip-planner-bar-color); font: var(--trip-planner-bar-label-style) var(--font-family); --web-focus-color: var(--palette-on-brand); }
.trip-bar__button { display: inline-flex; align-items: center; justify-content: center; gap: var(--trip-planner-bar-button-icon-to-label); min-block-size: var(--sizing-min-touch-target); padding-inline: var(--trip-planner-bar-button-padding); border-radius: var(--trip-planner-bar-button-radius); background: var(--trip-planner-bar-button-fill); color: inherit; font: inherit; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.trip-bar__button .icon { --icon-size: var(--trip-planner-bar-button-icon-size); }
.trip-bar__button:hover { background: var(--palette-brand-deep); }
.trip-bar__button[aria-disabled="true"], .trip-bar__button.is-disabled { opacity: var(--trip-planner-bar-button-off-opacity); pointer-events: none; }
.trip-bar__summary { display: inline-flex; align-items: center; gap: var(--trip-planner-bar-summary-icon-to-text); padding-inline: var(--spacing-sm); }
.trip-bar__summary .icon { --icon-size: var(--trip-planner-bar-summary-icon-height); }

/* ComposeForm: no plan yet. Where to, for how long, and the button that has one written. */
.trip-compose { display: flex; flex-direction: column; gap: var(--trip-planner-compose-group-gap); }
.trip-compose__label { display: block; margin-block-end: var(--trip-planner-compose-label-to-control); color: var(--trip-planner-compose-label-color); font: var(--trip-planner-compose-label-style) var(--font-family); }
.trip-compose__failure { margin-block-start: calc(var(--trip-planner-compose-button-to-message) - var(--trip-planner-compose-group-gap)); color: var(--trip-planner-compose-failure-color); font: var(--trip-planner-compose-failure-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: center; }
.trip-credit { margin-block-start: var(--trip-planner-content-to-credit); color: var(--trip-planner-credit-color); font: var(--trip-planner-credit-style) var(--font-family); }

@media (min-width: 1100px) {
  /* Beside the day's stops, the trip stays in view: its picture across the card, its lines under it. */
  .companion-split__aside .trip-card { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-md); padding: var(--spacing-md); }
  .companion-split__aside .trip-card__picture { block-size: calc(var(--trip-planner-card-picture-height) * 1.3); min-block-size: 0; }
  .companion-split__aside .trip-card__text { padding-inline: var(--spacing-xs); padding-block-end: var(--spacing-xs); }
  .companion-split__aside .trip-card__title { font: var(--typography-heading) var(--font-family); }
  .trip-stop { grid-template-columns: calc(var(--trip-planner-rail-width) * 1.4) minmax(0, 1fr); }
  .trip-stop__card { grid-template-columns: calc(var(--trip-planner-stop-picture-width) * 1.5) minmax(0, 1fr); gap: var(--spacing-lg); }
}

/* ==========================================================================
   8. A route: RouteScreen.kt
   ========================================================================== */

/* The screen: the map, and two cards that float over it. On a phone the first
   is at the top and the second at the foot, as in the apps. On a desktop the
   map is wide and the two cards stand in a column at the side where reading
   starts, clear of the route. */
.route-stage { position: relative; isolation: isolate; overflow: hidden; margin-inline: calc(var(--web-gutter) * -1); display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-xl); min-block-size: calc(var(--places-map-height) * 1.5); padding: var(--route-back-to-top-card) var(--route-side-margin) var(--route-bottom-card-edge-gap); }
.route-stage__map { position: absolute; inset: 0; z-index: -1; }
.route-stage__top, .route-stage__bottom { display: flex; flex-direction: column; gap: var(--route-recentre-to-card); min-inline-size: 0; }
.route-stage__recentre { align-self: flex-end; }
.route-stage__credit { align-self: flex-end; margin-block: calc(var(--route-recentre-to-card) * -0.5) calc(var(--route-recentre-to-card) * -1 + var(--route-credit-to-card)); color: var(--route-credit-color); font: var(--route-credit-style) var(--font-family); }
/* The floating card of the route screen: white, round, with the shadow of what floats over a map. */
.route-card { border-radius: var(--route-card-radius); background: var(--route-card-fill); box-shadow: var(--route-card-shadow); }

/* EndsCard: where from, where to, how, and what it comes to. */
.route-ends { display: flex; flex-direction: column; padding: var(--route-ends-from-top) var(--route-modes-inset) var(--spacing-md); }
.route-ends__ends { position: relative; display: flex; flex-direction: column; gap: var(--route-ends-name-to-label); padding-inline: calc(var(--route-ends-marker-inset) - var(--route-modes-inset) + var(--route-ends-ring-size) + var(--route-ends-marker-to-text)) var(--spacing-xs); margin-block-end: var(--spacing-md); }
/* The dashes that join the ring to the pin. */
.route-ends__ends::before { content: ""; position: absolute; inset-block: calc(var(--route-ends-ring-size) + var(--spacing-xs)) calc(var(--route-ends-pin-height) + var(--spacing-md)); inset-inline-start: calc(var(--route-ends-marker-inset) - var(--route-modes-inset) + var(--route-ends-ring-size) / 2); border-inline-start: var(--route-ends-dash-width) dashed var(--route-ends-dash-color); }
.route-ends__end { position: relative; display: flex; flex-direction: column; gap: var(--route-ends-label-to-name); }
.route-ends__label { color: var(--route-ends-label-color); font: var(--route-ends-label-style) var(--font-family); }
.route-ends__name { color: var(--route-ends-name-color); font: var(--route-ends-name-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.route-ends__ring { position: absolute; inset-block-start: 2px; inset-inline-start: calc((var(--route-ends-ring-size) + var(--route-ends-marker-to-text)) * -1); inline-size: var(--route-ends-ring-size); block-size: var(--route-ends-ring-size); border-radius: 50%; border: var(--route-ends-ring-width) solid var(--route-ends-ring-color); background: var(--palette-background); }
.route-ends__pin { position: absolute; inset-block-start: 2px; inset-inline-start: calc((var(--route-ends-ring-size) + var(--route-ends-marker-to-text)) * -1 + 2px); --icon-size: var(--route-ends-pin-height); color: var(--route-ends-pin-tint); }
/* Summary: the line under the modes. */
.route-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--spacing-xxs) var(--route-summary-gap); margin-block-start: var(--route-modes-to-summary); color: var(--route-summary-color); font: var(--route-summary-sentence-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: center; }
.route-summary__distance { font: var(--route-summary-distance-style) var(--font-family); }
.route-summary__note { flex-basis: 100%; margin-block-start: calc(var(--route-summary-to-note) - var(--spacing-xxs)); color: var(--route-summary-note-color); font: var(--route-summary-note-style) var(--font-family); }
.route-summary__action { display: inline-flex; align-items: center; min-block-size: var(--sizing-min-touch-target); margin-block: calc(var(--spacing-md) * -1); padding-inline: var(--spacing-xs); color: var(--route-summary-action-color); font: var(--typography-caption-strong) var(--font-family); border-radius: var(--radius-chip); }
.placeholder--route-summary { inline-size: var(--route-summary-placeholder-width); block-size: var(--route-summary-placeholder-height); margin-inline: auto; margin-block-start: var(--route-modes-to-summary); border-radius: var(--spacing-xs); background: var(--route-summary-placeholder-fill); }
/* Leg: one stretch of a route by public transport. Not a control. */
.route-legs { display: flex; flex-direction: column; gap: var(--route-leg-gap); max-block-size: var(--route-legs-max-height); margin-block-start: var(--route-summary-to-legs); padding-inline: var(--spacing-xs); overflow-y: auto; }
.route-leg { display: flex; align-items: flex-start; gap: var(--route-leg-icon-to-text); }
.route-leg__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--route-leg-icon-circle); block-size: var(--route-leg-icon-circle); border-radius: 50%; background: var(--route-leg-icon-circle-fill); color: var(--route-leg-icon-tint); }
.route-leg__icon .icon { --icon-size: var(--route-leg-icon-size); }
.route-leg__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--route-leg-title-to-detail); }
.route-leg__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--route-leg-badge-to-title); color: var(--route-leg-title-color); font: var(--route-leg-title-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* A line's badge wears its operator's own colours, which are data: the screen hands them as --data-color and --data-ink
   on the badge itself, and nothing else of a look is ever handed so. Without them, the colour of its kind, or the sheet's own. */
.route-leg__badge { display: inline-flex; align-items: center; block-size: var(--route-leg-badge-height); padding-inline: var(--route-leg-badge-padding); border-radius: var(--route-leg-badge-radius); background: var(--data-color, var(--_color, var(--route-leg-badge-fill))); color: var(--data-ink, var(--route-leg-badge-color)); font: var(--route-leg-badge-style) var(--font-family); }
.route-leg__detail { color: var(--route-leg-detail-color); font: var(--route-leg-detail-style) var(--font-family); line-height: var(--typography-caption-line); }
.route-leg__times { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--route-leg-title-to-detail); color: var(--route-leg-duration-color); font: var(--route-leg-duration-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.route-leg__time { color: var(--route-leg-time-color); font: var(--route-leg-time-style) var(--font-family); line-height: var(--typography-caption-line); }

/* DestinationCard: where the route ends, and the button that starts it. */
.route-destination { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: var(--route-destination-picture-to-text); min-block-size: var(--route-destination-height); padding: var(--route-destination-picture-inset); }
.route-destination__picture { inline-size: 100%; block-size: 100%; min-block-size: var(--route-destination-picture-height); max-block-size: calc(var(--route-destination-picture-height) * 1.3); object-fit: cover; border-radius: var(--route-destination-picture-radius); background: var(--route-destination-picture-fallback-fill); }
.route-destination__fallback { display: flex; align-items: center; justify-content: center; min-block-size: var(--route-destination-picture-height); border-radius: var(--route-destination-picture-radius); background: var(--route-destination-picture-fallback-fill); color: var(--route-destination-picture-fallback-icon-tint); }
.route-destination__fallback .icon { --icon-size: var(--route-destination-picture-fallback-icon-size); }
.route-destination__text { display: flex; flex-direction: column; gap: var(--route-destination-area-to-day); min-inline-size: 0; padding-block: calc(var(--route-destination-name-top) - var(--route-destination-picture-inset)) var(--spacing-xxs); padding-inline-end: calc(var(--route-destination-trailing-inset) - var(--route-destination-picture-inset)); }
.route-destination__name { margin-block-end: calc(var(--route-destination-name-to-area) - var(--route-destination-area-to-day)); color: var(--route-destination-name-color); font: var(--route-destination-name-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.route-destination__actions { display: flex; align-items: center; gap: var(--spacing-sm); margin-block-start: auto; padding-block-start: var(--spacing-xs); }
.route-destination__start { flex: 1 1 0; min-inline-size: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--route-start-icon-to-label); min-block-size: var(--sizing-min-touch-target); padding-inline: var(--spacing-sm); border-radius: var(--route-start-radius); background: var(--route-start-fill); color: var(--route-start-color); font: var(--route-start-label-style) var(--font-family); text-align: center; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.route-destination__start .icon { --icon-size: var(--route-start-icon-size); }
.route-destination__start:hover { background: var(--palette-brand-shade); }
.route-destination__start[aria-disabled="true"], .route-destination__start.is-disabled { opacity: var(--route-start-off-opacity); pointer-events: none; }
.route-destination__save { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sizing-min-touch-target); block-size: var(--sizing-min-touch-target); border-radius: var(--route-save-radius); background: var(--route-save-fill); color: var(--route-save-tint); }
.route-destination__save .icon { --icon-size: var(--route-save-icon-height); }
.route-destination__save[aria-pressed="true"] { color: var(--route-saved-tint); }
.route-destination__hint { color: var(--route-start-hint-color); font: var(--route-start-hint-style) var(--font-family); }
.route-destination__hint--failed { color: var(--route-start-message-color); }

/* StepCard: the next thing to do. A turn is a direction on the road: its icon is never mirrored. */
.route-step { display: flex; align-items: center; gap: var(--route-step-text-to-tile); min-block-size: var(--route-step-height); padding: var(--spacing-sm) var(--route-step-tile-inset) var(--spacing-sm) var(--route-step-text-inset); }
.route-step__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--route-step-instruction-to-distance); }
.route-step__instruction { color: var(--route-step-instruction-color); font: var(--route-step-instruction-style) var(--font-family); }
.route-step__distance { color: var(--route-step-distance-color); font: var(--route-step-distance-style) var(--font-family); }
.route-step__tile { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--route-step-tile-size); block-size: var(--route-step-tile-size); border-radius: var(--route-step-tile-radius); background: var(--route-step-tile-fill); color: var(--route-step-tile-icon-tint); }
.route-step__tile .icon { --icon-size: 24px; }

/* TripCard of the route screen: three figures, the progress line, three buttons. */
.route-trip { display: flex; flex-direction: column; padding: var(--route-trip-padding); }
.route-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-block-size: var(--route-figures-height); }
.route-figures__figure { display: flex; flex-direction: column; gap: var(--route-figure-line-gap); padding-inline: var(--spacing-md); color: var(--route-figure-color); font: var(--route-figure-label-style) var(--font-family); }
.route-figures__figure + .route-figures__figure { border-inline-start: var(--route-divider-width) solid var(--route-divider-color); }
.route-figures__figure:first-child { padding-inline-start: 0; }
.route-figures__number { font: var(--route-figure-number-style) var(--font-family); }
.route-figures__number small { font: var(--route-figure-unit-style) var(--font-family); }
.route-figures__traffic { color: var(--palette-text-emphasis); font: var(--route-traffic-style) var(--font-family); }
.route-figures__figure > .icon { --icon-size: var(--route-traffic-icon-width); color: var(--route-traffic-icon-tint); }
/* Progress: how much of the way is behind the customer. */
.route-progress { display: flex; align-items: center; margin-block-start: var(--route-figures-to-progress); padding-inline: var(--spacing-md); }
.route-progress__ring { flex: none; inline-size: var(--route-progress-ring-size); block-size: var(--route-progress-ring-size); border-radius: 50%; border: var(--route-progress-ring-width) solid var(--route-progress-origin-color); background: var(--palette-background); }
.route-progress__ring--destination { border-color: var(--route-progress-destination-color); }
.route-progress__part { flex: 1 1 0; block-size: var(--route-progress-track-height); background: var(--route-progress-ahead-color); }
.route-progress__part.is-done { background: var(--route-progress-done-color); }
.route-progress__joint { flex: none; inline-size: var(--route-progress-joint-ahead); block-size: var(--route-progress-joint-ahead); border-radius: 50%; background: var(--route-progress-ahead-color); }
.route-progress__joint.is-done { inline-size: var(--route-progress-joint-done); block-size: var(--route-progress-joint-done); background: var(--route-progress-done-color); }
.route-progress__names { display: flex; justify-content: space-between; gap: var(--spacing-md); margin-block-start: var(--route-progress-to-names); color: var(--route-progress-name-color); font: var(--route-progress-name-style) var(--font-family); }
.route-buttons { display: flex; gap: var(--route-button-gap); margin-block-start: var(--route-names-to-buttons); }
.route-button { flex: 1 1 0; min-inline-size: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--route-button-icon-to-label); min-block-size: var(--sizing-min-touch-target); padding-inline: var(--spacing-sm); border-radius: var(--route-button-radius); background: var(--route-show-route-fill); color: var(--route-button-color); font: var(--route-button-label-style) var(--font-family); }
.route-button .icon { --icon-size: var(--route-button-icon-size); }
.route-button--end { background: var(--route-end-fill); }
/* Off: "Show route" on a page with no map to show it on. */
.route-button:disabled { opacity: var(--route-start-off-opacity); cursor: default; }
.route-button--sound { flex: none; inline-size: var(--sizing-min-touch-target); padding-inline: 0; background: var(--route-sound-fill); }
.route-button--sound[aria-pressed="false"] { background: var(--route-sound-off-fill); }

@media (min-width: 768px) {
  .route-stage { margin-inline: 0; min-block-size: calc(var(--places-map-height) * 1.4); padding: var(--spacing-xl); border-radius: var(--radius-card); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
  .route-stage__top, .route-stage__bottom { inline-size: 100%; max-inline-size: calc(var(--web-sheet-width) - var(--spacing-xxl)); }
  .route-stage__recentre { position: absolute; inset-block-end: var(--spacing-xl); inset-inline-end: var(--spacing-xl); }
  .route-stage__credit { position: absolute; inset-block-end: var(--spacing-xs); inset-inline-end: calc(var(--spacing-xl) + var(--route-recentre-size) + var(--spacing-md)); margin: 0; }
}

/* With no map (.companion-map--strip says when) there is no stage: the strip,
   then the two cards on the page, one under the other on a phone and side by
   side from a tablet up. Nothing floats, because there is nothing to float over. */
.route-stage--no-map { isolation: auto; overflow: visible; justify-content: flex-start; gap: var(--spacing-md); min-block-size: 0; margin-inline: 0; padding: 0; border-radius: 0; box-shadow: none; }
.route-stage--no-map .route-stage__map { position: static; z-index: auto; }
/* Who the route comes from, and that it is sample content: under the card, so that the two cards start level. */
.route-stage--no-map .route-stage__credit { position: static; order: 1; align-self: flex-start; margin: 0; }
@media (min-width: 768px) {
  .route-stage--no-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--spacing-lg); }
  .route-stage--no-map .route-stage__map { grid-column: 1 / -1; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
  .route-stage--no-map .route-stage__top, .route-stage--no-map .route-stage__bottom { max-inline-size: none; }
}

/* ==========================================================================
   9. Snap and ask: CameraScreen.kt
   ========================================================================== */

/* The screen. On a phone, top down: the hint, the note, the picture, and the
   panel that rises over its foot, as in the apps. On a desktop the picture is
   wide, and the hint, the note and the panel stand in a column beside it. */
.camera { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hint" "standing" "stage" "panel"; }
.camera__hint { grid-area: hint; margin-block-end: var(--spacing-sm); }
.camera__standing { grid-area: standing; margin-block-end: var(--spacing-sm); }
.camera__stage { grid-area: stage; margin-inline: calc(var(--web-gutter) * -1); }
.camera__panel { grid-area: panel; position: relative; z-index: 1; margin-inline: calc(var(--web-gutter) * -1); margin-block-start: calc(var(--camera-bottom-panel-top-radius) * -1); padding: var(--camera-controls-top) var(--web-gutter) var(--spacing-lg); border-start-start-radius: var(--camera-bottom-panel-top-radius); border-start-end-radius: var(--camera-bottom-panel-top-radius); background: var(--camera-panel-fill); box-shadow: var(--camera-bottom-panel-shadow); }

/* Hint: the card under the title. Not a control. */
.camera-hint { display: flex; align-items: center; gap: var(--camera-hint-tile-to-text); min-block-size: var(--camera-hint-height); padding: var(--spacing-sm) var(--camera-hint-tile-inset); border-radius: var(--camera-hint-radius); background: var(--camera-hint-fill); }
.camera-hint__tile { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--camera-hint-tile-size); block-size: var(--camera-hint-tile-size); border-radius: var(--camera-hint-tile-radius); background: var(--camera-hint-tile-fill); color: var(--camera-hint-icon-tint); }
.camera-hint__tile .icon { --icon-size: var(--camera-hint-icon-size); }
.camera-hint__text { display: flex; flex-direction: column; gap: var(--camera-hint-title-to-body); min-inline-size: 0; }
.camera-hint__title { color: var(--camera-hint-title-color); font: var(--camera-hint-title-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.camera-hint__body { color: var(--camera-hint-body-color); font: var(--camera-hint-body-style) var(--font-family); line-height: var(--typography-caption-loose-line); }

/* The stage: the camera's picture, or the picture that was taken or chosen,
   and what is laid over it. A dark fill where there is no picture. */
.camera-stage { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-md); min-block-size: calc(var(--places-map-height) * 1.1); padding: var(--spacing-xxl) var(--spacing-lg) calc(var(--camera-bottom-panel-top-radius) + var(--spacing-xxl)); background: var(--camera-blocked-fill); color: var(--camera-message-color); --web-focus-color: var(--palette-on-brand); }
.camera-stage__picture { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* A picture that was chosen is shown whole, with the dark fill round it. */
.camera-stage--whole .camera-stage__picture { object-fit: contain; }
.camera-stage--frozen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--camera-frozen-scrim); }
/* In these design pages a sheet of paper stands in for the customer's picture: its lines are where text was found. */
.camera-stage__sheet { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); inline-size: 100%; max-inline-size: 420px; padding: var(--spacing-xl) var(--spacing-lg); border-radius: var(--spacing-xs); background: var(--palette-row-plain); color: var(--palette-text-primary); font: var(--typography-label) var(--font-family); line-height: var(--typography-label-tall-line); box-shadow: var(--elevation-floating); }
.camera-stage--result .camera-stage__sheet { background: var(--palette-card-plain); }
.camera-stage__heading { margin-block-start: var(--spacing-sm); font: var(--typography-title) var(--font-family); }
.camera-stage__row { align-self: stretch; display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-md); }
.camera-stage__note { position: absolute; inset-block-start: var(--camera-sample-note-top); inset-inline: 0; display: flex; justify-content: center; }
/* Patch: a piece of text found in the picture, and what is written over it. In a translation it can be chosen. */
.camera-patch { display: inline-flex; align-items: center; min-block-size: 24px; padding: 2px var(--spacing-xs); border-radius: var(--camera-patch-radius); background: var(--camera-patch-fill); color: var(--camera-patch-text-color); font-weight: var(--camera-patch-text-weight); text-align: start; cursor: pointer; }
.camera-patch[aria-checked="true"] { box-shadow: 0 0 0 var(--camera-patch-selected-border-width) var(--camera-patch-selected-border-color); }
.camera-patch--still { cursor: default; }
/* Pill: what was found, and what it became. Labels, not buttons. */
.camera-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); min-inline-size: var(--camera-pill-width); block-size: var(--camera-pill-height); padding: var(--camera-pill-inner-inset); border-radius: var(--camera-pill-height); background: var(--camera-pill-fill); color: var(--camera-pill-label-color); font: var(--camera-pill-label-style) var(--font-family); box-shadow: var(--elevation-floating); direction: ltr; }
.camera-pill__label { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--camera-pill-inner-width); block-size: var(--camera-pill-inner-height); padding-inline: var(--spacing-sm); border-radius: var(--camera-pill-inner-height); background: var(--camera-pill-inner-fill); }
.camera-pill .icon { --icon-size: var(--camera-pill-arrow-width); color: var(--camera-pill-arrow-tint); }
/* Message: what the stage says when there is no translation to lay over the picture. */
.camera-message { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); max-inline-size: 44ch; text-align: center; }
.camera-message__line { font: var(--typography-body-strong) var(--font-family); line-height: var(--typography-body-loose-line); }
.camera-message__detail { color: var(--palette-on-brand-soft); font: var(--typography-label) var(--font-family); line-height: var(--typography-label-tall-line); }
.camera-message__busy { --icon-size: 24px; animation: camera-turn 1.2s linear infinite; }
@keyframes camera-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .camera-message__busy, .camera-live__busy { animation: none; } }

/* The live reading: its caption and its switch, standing just above the bottom panel. */
.camera-live { display: flex; flex-direction: column; align-items: center; gap: var(--camera-live-caption-to-toggle); margin-block-start: auto; }
.camera-live__caption { display: inline-flex; align-items: center; gap: var(--camera-live-busy-icon-to-text); max-inline-size: 46ch; padding: var(--camera-live-caption-padding-vertical) var(--camera-live-caption-padding-horizontal); border-radius: var(--camera-live-caption-radius); background: var(--camera-live-caption-fill); color: var(--camera-live-caption-color); font: var(--camera-live-caption-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: center; }
.camera-live__busy { flex: none; --icon-size: var(--camera-live-busy-icon-size); animation: camera-turn 1.2s linear infinite; }
.camera-live__action { display: inline-flex; align-items: center; min-block-size: var(--camera-live-action-height); margin-block: calc(var(--spacing-sm) * -1); padding-inline: var(--spacing-xs); color: var(--camera-live-action-color); font: var(--camera-live-action-style) var(--font-family); text-decoration: underline; text-underline-offset: 0.25em; border-radius: var(--radius-chip); }
.camera-live__toggle { display: inline-flex; align-items: center; gap: var(--camera-live-toggle-icon-to-label); min-block-size: var(--camera-live-toggle-height); padding-inline: var(--camera-live-toggle-padding); border-radius: var(--camera-live-toggle-height); background: var(--camera-live-toggle-off-fill); color: var(--camera-live-toggle-content-color); font: var(--camera-live-toggle-label-style) var(--font-family); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.camera-live__toggle .icon { --icon-size: var(--camera-live-toggle-icon-size); }
.camera-live__toggle[aria-checked="true"] { background: var(--camera-live-toggle-on-fill); }
.camera-live__toggle:disabled, .camera-live__toggle.is-disabled { opacity: var(--camera-disabled-opacity); pointer-events: none; }

/* Controls: switch camera, the shutter, the gallery. */
.camera-controls { display: flex; align-items: flex-start; justify-content: center; gap: var(--spacing-xl); }
.camera-control { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); min-inline-size: var(--camera-shutter-ring); color: var(--palette-text-secondary); font: var(--typography-caption-medium) var(--font-family); text-align: center; border-radius: var(--radius-md); }
.camera-control__disc { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; inline-size: var(--camera-side-control-size); block-size: var(--camera-side-control-size); margin-block: calc((var(--camera-shutter-ring) - var(--camera-side-control-size)) / 2); border-radius: 50%; background: var(--camera-switch-fill); color: var(--camera-switch-icon-tint); }
.camera-control__disc .icon { --icon-size: var(--camera-switch-icon-size); }
.camera-control__disc img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.camera-control--shutter .camera-control__disc { inline-size: var(--camera-shutter-disc); block-size: var(--camera-shutter-disc); margin-block: calc((var(--camera-shutter-ring) - var(--camera-shutter-disc)) / 2); background: var(--camera-shutter-color); color: var(--camera-shutter-icon-tint); box-shadow: 0 0 0 calc((var(--camera-shutter-ring) - var(--camera-shutter-disc)) / 2 - var(--camera-shutter-ring-width)) var(--camera-panel-fill), 0 0 0 calc((var(--camera-shutter-ring) - var(--camera-shutter-disc)) / 2) var(--camera-shutter-color); }
.camera-control--shutter .camera-control__disc .icon { --icon-size: var(--camera-shutter-icon-size); }
.camera-control:active .camera-control__disc { opacity: var(--camera-pressed-opacity); }
.camera-control:disabled, .camera-control.is-disabled { opacity: var(--camera-disabled-opacity); pointer-events: none; }
/* The apps draw the three controls with no words; a website names them. */
.camera-control__label { display: none; }

/* ResultPanel: a title over three chips, or over the converter's rate line. */
.camera-result { min-inline-size: 0; }
.camera-result__title { color: var(--camera-result-title-color); font: var(--camera-result-title-style) var(--font-family); }
.camera-result__chips { display: flex; flex-wrap: wrap; gap: var(--camera-chip-gap); margin-block-start: var(--camera-result-title-to-chips); }
.camera-result__rate { margin-block-start: var(--camera-result-title-to-chips); color: var(--camera-rate-color); font: var(--camera-rate-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.camera-chip { display: inline-flex; align-items: center; gap: var(--camera-chip-icon-to-label); min-block-size: var(--sizing-min-touch-target); padding-inline: var(--camera-chip-padding); border-radius: var(--sizing-min-touch-target); background: var(--camera-chip-fill); color: var(--camera-chip-label-color); font: var(--camera-chip-label-style) var(--font-family); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.camera-chip .icon { --icon-size: var(--camera-select-all-icon-size); color: var(--camera-chip-icon-tint); }
.camera-chip:hover { background: var(--camera-chip-on-fill); }
.camera-chip[aria-pressed="true"] { background: var(--camera-chip-on-fill); color: var(--camera-chip-on-label-color); }

@media (min-width: 768px) {
  .camera__stage { margin-inline: 0; border-radius: var(--radius-card); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
  .camera__hint, .camera__standing { margin-block-end: var(--spacing-md); }
  .camera__panel { margin-inline: 0; margin-block-start: var(--spacing-md); padding: var(--spacing-xl); border-radius: var(--radius-card); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
  .camera-hint { background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
  .camera-stage { padding-block-end: var(--spacing-xxl); }
  .camera-control__label { display: block; }
  .camera__stage .camera-stage__sheet { max-inline-size: 520px; padding: var(--spacing-xxl) var(--spacing-xl); font: var(--typography-body) var(--font-family); line-height: var(--typography-body-loose-line); }
}
@media (min-width: 1100px) {
  .camera { grid-template-columns: minmax(0, 1fr) var(--web-aside); grid-template-areas: "stage hint" "stage standing" "stage panel" "stage ."; grid-template-rows: auto auto auto 1fr; column-gap: var(--spacing-xl); }
  .camera__panel { margin-block-start: 0; }
  .camera-stage { min-block-size: calc(var(--places-map-height) * 1.2); }
}

/* ==========================================================================
   10. The currency converter: CurrencyScreen.kt
   ========================================================================== */

/* YoursRow: the customer's own currency. One control. */
.currency-row { display: flex; align-items: center; gap: var(--currency-row-icon-to-label); inline-size: 100%; min-block-size: var(--currency-row-height); padding-inline: var(--currency-row-icon-inset) var(--currency-row-caret-inset); border-radius: var(--currency-row-radius); background: var(--currency-row-fill); color: var(--currency-row-label-color); font: var(--currency-row-label-style) var(--font-family); text-align: start; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.currency-row:hover { background: var(--palette-brand-outline); }
.currency-row > .icon:first-child { --icon-size: var(--currency-row-icon-size); color: var(--currency-row-icon-tint); }
.currency-row__label { flex: 1 1 auto; }
.currency-row__value { color: var(--currency-row-value-color); font: var(--currency-row-value-style) var(--font-family); }
.currency-row__caret { inline-size: var(--currency-caret-width); block-size: var(--currency-caret-height); margin-inline-start: calc(var(--currency-row-value-to-caret) - var(--currency-row-icon-to-label)); color: var(--currency-caret-tint); }

/* Panel: the two cards, the swap button between them, and the foot. */
.currency-panel { margin-block-start: var(--currency-row-to-panel); padding: var(--currency-panel-padding); border-radius: var(--currency-panel-radius); background: var(--currency-panel-fill); }
.currency-panel__cards { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--currency-card-gap); }
.currency-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "value chip"; align-items: center; column-gap: var(--currency-value-to-chip); row-gap: var(--currency-card-label-to-value); min-block-size: var(--currency-card-height); padding: var(--currency-card-inset); border-radius: var(--currency-card-radius); background: var(--currency-card-fill); align-content: center; }
.currency-card__label { grid-area: label; color: var(--currency-card-label-color); font: var(--currency-card-label-style) var(--font-family); }
.currency-card__value { grid-area: value; min-inline-size: 0; inline-size: 100%; min-block-size: var(--sizing-min-touch-target); display: flex; align-items: center; color: var(--currency-card-value-color); caret-color: var(--currency-cursor-color); font: var(--currency-card-value-style) var(--font-family); text-align: var(--inline-start); appearance: none; -webkit-appearance: none; }
/* What the amount becomes is a figure, written left to right, and stands where the amount does: where reading starts. */
output.currency-card__value { display: block; line-height: var(--sizing-min-touch-target); }
.currency-card__value:focus-visible { outline: none; }
.currency-card:focus-within { outline: var(--web-focus-width) solid var(--web-focus-color); outline-offset: var(--web-focus-offset); }
.currency-card:has(.currency-chip:focus-visible) { outline: none; }
.placeholder--currency-value { grid-area: value; inline-size: var(--currency-value-placeholder-width); block-size: var(--currency-value-placeholder-height); border-radius: var(--currency-value-placeholder-radius); background: var(--currency-value-placeholder-fill); }
/* Chip: a card's currency, which is a control of its own. */
.currency-chip { grid-area: chip; display: inline-flex; align-items: center; gap: var(--currency-chip-flag-to-code); min-inline-size: var(--currency-chip-width); min-block-size: var(--currency-chip-touch-target); padding-inline: var(--currency-chip-flag-inset) var(--currency-chip-caret-inset); border-radius: var(--currency-chip-touch-target); background: var(--currency-chip-fill); box-shadow: inset 0 0 0 var(--currency-chip-border-width) var(--currency-chip-border-color); color: var(--currency-chip-code-color); font: var(--currency-chip-code-style) var(--font-family); transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.currency-chip:hover { box-shadow: inset 0 0 0 2px var(--palette-brand-outline); }
.currency-chip .flag { --flag-size: var(--currency-chip-flag-size); --flag-ring: 0px; }
.currency-chip > .icon:first-child { --icon-size: var(--currency-chip-flag-size); color: var(--currency-chip-no-flag-tint); }
.currency-chip__code { flex: 1 1 auto; }
.currency-chip__caret { inline-size: var(--currency-caret-width); block-size: var(--currency-caret-height); color: var(--currency-caret-tint); }
/* The swap button: a disc in a ring of the panel's colour, on the line between the two cards. */
.currency-swap { position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(calc(var(--mirror) * 50%), -50%); display: inline-flex; align-items: center; justify-content: center; inline-size: var(--currency-swap-ring); block-size: var(--currency-swap-ring); border-radius: 50%; background: var(--currency-swap-ring-fill); }
.currency-swap__disc { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--currency-swap-disc); block-size: var(--currency-swap-disc); border-radius: 50%; background: var(--currency-swap-disc-fill); color: var(--currency-swap-icon-tint); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.currency-swap__disc .icon { --icon-size: var(--currency-swap-icon-size); }
.currency-swap:hover .currency-swap__disc { background: var(--palette-brand-shade); }
/* Foot: the rate, said three ways, and the caution beside it. */
.currency-foot { display: flex; align-items: flex-start; gap: var(--currency-foot-badge-to-text); min-block-size: var(--currency-foot-min-height); margin-block-start: var(--currency-cards-to-foot); padding-inline: var(--currency-foot-leading-inset) var(--currency-foot-trailing-inset); padding-block-end: var(--spacing-md); }
.currency-foot__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--currency-foot-badge-size); block-size: var(--currency-foot-badge-size); border-radius: var(--currency-foot-badge-radius); background: var(--currency-foot-badge-fill); color: var(--currency-foot-icon-tint); }
.currency-foot__badge .icon { --icon-size: var(--currency-foot-icon-width); }
/* The lines and the caution, beside the badge. The rate is one piece that never breaks ("1 USD ≈ 0.91 EUR"), and how
   long it is depends on the two currencies: the lines are never narrower than it, and when the caution no longer fits
   beside them (a narrow phone, a long rate) it goes under them, across the whole width, and never over them. */
.currency-foot__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--spacing-xs) var(--currency-foot-text-to-note); }
.currency-foot__lines { flex: 999 1 0; min-inline-size: min-content; display: flex; flex-direction: column; gap: var(--currency-foot-line-gap); color: var(--currency-foot-line-color); font: var(--currency-foot-line-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.currency-foot__lines > * { align-self: flex-start; }
.currency-foot__note { flex: 1 1 var(--currency-foot-note-width); margin-block-start: var(--currency-foot-note-top); color: var(--currency-foot-note-color); font: var(--currency-foot-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.currency-foot--failed { align-items: center; flex-wrap: wrap; color: var(--currency-failed-color); font: var(--currency-failed-style) var(--font-family); }
.currency-foot__retry { display: inline-flex; align-items: center; min-block-size: var(--sizing-min-touch-target); padding-inline: var(--spacing-xs); color: var(--currency-retry-color); font: var(--typography-label-bold) var(--font-family); border-radius: var(--radius-chip); }
/* CameraButton: the way to the price check. */
.currency-camera { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--currency-camera-icon-to-label); inline-size: 100%; min-block-size: var(--currency-camera-height); margin-block-start: var(--currency-camera-min-gap); padding: var(--spacing-md); border-radius: var(--currency-camera-radius); background: var(--currency-camera-fill); color: var(--currency-camera-color); font: var(--currency-camera-label-style) var(--font-family); text-align: center; --web-focus-color: var(--palette-brand); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.currency-camera .icon { --icon-size: var(--currency-camera-icon-size); }
.currency-camera:hover { background: var(--palette-brand-shade); }
.currency-camera[aria-disabled="true"], .currency-camera.is-disabled { opacity: var(--currency-camera-off-opacity); pointer-events: none; }
/* CurrencyLine: one currency in the sheet. */
.currency-lines { display: flex; flex-direction: column; max-block-size: 320px; margin-block-start: var(--spacing-sm); overflow-y: auto; }
.currency-line { display: flex; align-items: center; gap: var(--currency-sheet-flag-to-name); min-block-size: var(--currency-sheet-row-height); padding-inline: var(--spacing-sm); border-radius: var(--radius-md); color: var(--currency-sheet-name-color); font: var(--currency-sheet-name-style) var(--font-family); text-align: start; }
.currency-line:hover { background: var(--palette-brand-wash); }
.currency-line[aria-selected="true"] { background: var(--palette-surface); }
.currency-line .flag { --flag-size: var(--currency-sheet-flag-size); --flag-ring: 0px; }
.currency-line > .icon:first-child { --icon-size: var(--currency-sheet-flag-size); color: var(--currency-chip-no-flag-tint); }
.currency-line__name { flex: 1 1 0; min-inline-size: 0; }
.currency-line__code { color: var(--currency-sheet-code-color); font: var(--currency-sheet-code-style) var(--font-family); }
.currency-sheet { padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg); }
.currency-sheet .search-field { margin-block-start: var(--spacing-md); }

@media (min-width: 768px) {
  /* The amount and what it becomes stand side by side, the swap button on the line between them. */
  .currency-panel { padding: var(--spacing-md); }
  .currency-panel__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
  .currency-card { min-block-size: calc(var(--currency-card-height) * 1.2); padding: var(--spacing-xl); }
  .currency-panel__cards > .currency-card:first-child { padding-inline-end: calc(var(--spacing-xl) + var(--currency-swap-ring) / 2); }
  .currency-panel__cards > .currency-card:last-child { padding-inline-start: calc(var(--spacing-xl) + var(--currency-swap-ring) / 2); }
  .currency-swap__disc .icon { transform: rotate(90deg); }
  .currency-foot { padding-block: var(--spacing-xs) var(--spacing-sm); }
  .currency-foot__note { flex-basis: 30%; }
  .currency-camera { margin-block-start: 0; min-block-size: calc(var(--currency-camera-height) * 1.4); }
}

/* In a frame of the states, which is as narrow as a phone whatever the window, the converter keeps its phone form. */
.companion-state__frame .currency-panel { padding: var(--currency-panel-padding); }
.companion-state__frame .currency-panel__cards { grid-template-columns: minmax(0, 1fr); gap: var(--currency-card-gap); }
.companion-state__frame .currency-panel__cards > .currency-card { min-block-size: var(--currency-card-height); padding: var(--currency-card-inset); }
.companion-state__frame .currency-swap__disc .icon { transform: none; }
.companion-state__frame .currency-camera { min-block-size: var(--currency-camera-height); }

/* ==========================================================================
   11. A conversation: the assistant's, and support's. Drawn before the apps
       had such a screen. Support's is wired since (SupportChatScreen.kt and
       SupportCasesScreen.kt in mobile/webApp): its parts follow shared's
       state, and their sizes are this sheet's own, in the kit's tokens.
   ========================================================================== */

.conversation { display: flex; flex-direction: column; min-inline-size: 0; }
.conversation__thread { display: flex; flex-direction: column; gap: var(--spacing-md); padding-block: var(--spacing-md) var(--spacing-lg); }
/* One message: who said it, what, and what may be done about it. */
.conversation-message { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); max-inline-size: min(88%, 620px); }
.conversation-message--customer { align-self: flex-end; align-items: flex-end; }
.conversation-message__who { display: inline-flex; align-items: center; gap: var(--spacing-xs); color: var(--palette-text-secondary); font: var(--typography-caption-strong) var(--font-family); }
.conversation-message__who .icon { --icon-size: 14px; color: var(--palette-brand); }
.conversation-message__bubble { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-card); border-start-start-radius: var(--spacing-xxs); background: var(--palette-surface); color: var(--palette-text-primary); font: var(--typography-body) var(--font-family); line-height: var(--typography-body-loose-line); overflow-wrap: anywhere; }
.conversation-message__bubble > * + * { margin-block-start: var(--spacing-xs); }
.conversation-message--customer .conversation-message__bubble { border-start-start-radius: var(--radius-card); border-start-end-radius: var(--spacing-xxs); background: var(--palette-brand); color: var(--palette-on-brand); }
/* A person of the business: white, outlined, so that it never reads as the assistant. */
.conversation-message--person .conversation-message__bubble { background: var(--palette-background); box-shadow: inset 0 0 0 2px var(--palette-brand-outline); }
.conversation-message__guess { color: var(--palette-text-secondary); font: var(--typography-label) var(--font-family); line-height: var(--typography-label-tall-line); }
.conversation-message__time { color: var(--palette-text-secondary); font: var(--typography-micro) var(--font-family); }
.conversation-message__picture { inline-size: 220px; max-inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.conversation-message__cards { align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); inline-size: 100%; min-inline-size: min(100%, 320px); }
.conversation-message--wide { max-inline-size: 100%; align-self: stretch; }
/* What was read and done for a message, as fixed words. */
.conversation-steps { display: flex; flex-direction: column; gap: var(--spacing-xxs); padding-inline: var(--spacing-xs); color: var(--palette-text-secondary); font: var(--typography-caption-medium) var(--font-family); line-height: var(--typography-caption-loose-line); }
.conversation-steps__step { display: flex; align-items: center; gap: var(--spacing-xs); }
.conversation-steps__step .icon { --icon-size: 14px; color: var(--palette-positive); }
.conversation-steps__step--failed .icon { color: var(--palette-text-secondary); }
/* What may be opened from a message. */
.conversation-choices { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
/* A notice of the server's: not a message of anybody's. */
.conversation-notice { align-self: center; display: inline-flex; align-items: center; gap: var(--spacing-xs); max-inline-size: 60ch; padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md); background: var(--palette-row-plain); color: var(--palette-text-secondary); font: var(--typography-caption-medium) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: center; }
.conversation-notice .icon { flex: none; --icon-size: 16px; color: var(--palette-text-emphasis); }
.conversation-notice--positive .icon { color: var(--palette-positive); }
/* While an answer is written. */
.conversation-typing { display: inline-flex; align-items: center; gap: var(--spacing-xxs); min-block-size: var(--typography-body-loose-line); }
.conversation-typing span { inline-size: var(--spacing-xs); block-size: var(--spacing-xs); border-radius: 50%; background: var(--palette-placeholder); animation: placeholder-breathe 0.9s var(--motion-easing) infinite alternate; }
.conversation-typing span:nth-child(2) { animation-delay: 0.2s; }
.conversation-typing span:nth-child(3) { animation-delay: 0.4s; }
/* Where the customer writes. Pinned to the foot of a phone's window. */
.conversation-composer { position: sticky; inset-block-end: 0; z-index: 2; display: flex; align-items: flex-end; gap: var(--spacing-xs); margin-inline: calc(var(--web-gutter) * -1); padding: var(--spacing-sm) var(--web-gutter) calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px)); background: var(--palette-background); border-block-start: 1px solid var(--palette-border); }
.conversation-composer .form-field { flex: 1 1 0; min-inline-size: 0; }
.conversation-composer__button { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--form-field-height); block-size: var(--form-field-height); border-radius: 50%; background: var(--palette-surface); color: var(--palette-brand); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.conversation-composer__button:hover { background: var(--palette-brand-outline); }
.conversation-composer__button--send { background: var(--palette-brand); color: var(--palette-on-brand); }
.conversation-composer__button--send:hover { background: var(--palette-brand-shade); }
.conversation-composer__button:disabled, .conversation-composer__button.is-disabled { opacity: var(--button-disabled-opacity); pointer-events: none; }
.conversation-composer--off { opacity: var(--button-disabled-opacity); pointer-events: none; }
.conversation__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-xs) var(--spacing-md); padding-block-start: var(--spacing-xs); color: var(--palette-text-secondary); font: var(--typography-caption-medium) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* One conversation in the list of them. */
.conversation-case { display: flex; align-items: center; gap: var(--spacing-sm); inline-size: 100%; min-block-size: var(--action-row-height); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); background: var(--palette-surface); text-align: start; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.conversation-case:hover { background: var(--palette-brand-outline); }
.conversation-case[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--palette-brand); }
.conversation-case__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.conversation-case__title { color: var(--palette-text-emphasis); font: var(--typography-label-strong) var(--font-family); line-height: var(--typography-label-tall-line); }
.conversation-case__line { color: var(--palette-text-secondary); font: var(--typography-caption-medium) var(--font-family); line-height: var(--typography-caption-loose-line); }
.conversation-case + .conversation-case { margin-block-start: var(--spacing-xs); }

/* Support's conversation, as shared's state has it (SupportChatScreen.kt, SupportCasesScreen.kt): the parts the
   first drawing of the page did not have, because the apps had no such screen then. */
/* The words of a message keep their line breaks, and a long address or code breaks instead of pushing the page wide. */
.conversation-message__words { white-space: pre-wrap; overflow-wrap: anywhere; }
/* The customer's own message while it is on its way. */
.conversation-message.is-pending { opacity: var(--button-disabled-opacity); }
/* That a message was not answered, under its bubble, with the way to send it again. */
.conversation-message__failure { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xxs) var(--spacing-sm); color: var(--palette-error); font: var(--typography-caption-medium) var(--font-family); line-height: var(--typography-caption-loose-line); }
.conversation-message__failure .maak-text-button { min-block-size: var(--sizing-min-touch-target); }
/* An empty bubble, while a conversation is read. */
.conversation-message--empty { inline-size: min(70%, 420px); }
.placeholder--bubble { inline-size: 100%; block-size: calc(var(--typography-body-loose-line) * 2 + var(--spacing-sm) * 2); border-radius: var(--radius-card); }
/* Which eSIM the conversation is about: one quiet line with the eSIM's glyph, under the first notice. */
.conversation-about { align-self: center; display: inline-flex; align-items: center; gap: var(--spacing-xs); color: var(--palette-text-emphasis); font: var(--typography-caption-strong) var(--font-family); line-height: var(--typography-caption-loose-line); }
.conversation-about .icon { flex: none; --icon-size: 16px; color: var(--palette-brand); }
/* The questions a new conversation offers: a heading, and one button each, as wide as the column. */
.conversation-starters { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.conversation-starters__title { color: var(--place-page-section-title-color); font: var(--typography-title) var(--font-family); }
.conversation-starters__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); }
.conversation-starter { display: flex; align-items: center; inline-size: 100%; min-block-size: var(--action-row-height); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); background: var(--palette-surface); color: var(--palette-text-emphasis); font: var(--typography-label-strong) var(--font-family); line-height: var(--typography-label-tall-line); text-align: start; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.conversation-starter:hover { background: var(--palette-brand-outline); }
/* Whose turn it is, when it is not the customer's: a glyph, a title and a line, over the message field. */
.conversation-waiting { display: flex; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); background: var(--palette-row-plain); }
.conversation-waiting .icon { flex: none; --icon-size: 20px; color: var(--palette-text-emphasis); }
.conversation-waiting__text { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.conversation-waiting__title { color: var(--palette-text-emphasis); font: var(--typography-label-strong) var(--font-family); line-height: var(--typography-label-tall-line); }
.conversation-waiting__body { color: var(--palette-text-secondary); font: var(--typography-caption-medium) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* What went wrong with the last thing asked, in plain words, over the message field. */
.conversation__message { padding-block-start: var(--spacing-sm); color: var(--palette-error); font: var(--typography-caption-medium) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* How many characters are left, once few are: a bare number before the send button. */
.conversation-composer__counter { align-self: center; color: var(--palette-text-secondary); font: var(--typography-caption-medium) var(--font-family); }
/* What stands where the message field would, in a conversation that takes no more: why, and the way to a new one. */
.conversation__ended { display: flex; flex-direction: column; gap: var(--spacing-sm); padding-block-start: var(--spacing-md); }
.conversation__ended-text { color: var(--palette-text-secondary); font: var(--typography-caption-medium) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: center; }
/* The foot alone under a message (nobody is signed in): the address to write to, in the middle. */
.conversation__foot--centred { justify-content: center; }
.conversation__foot .maak-text-button { min-block-size: var(--sizing-min-touch-target); }
/* The address to write to as plain words, where nothing can open a new email: it can be selected to copy. */
.conversation__address { display: inline-flex; align-items: center; gap: var(--spacing-xs); user-select: text; }
.conversation__address .icon { flex: none; --icon-size: 16px; }
/* Where the page goes when something is added to the conversation: its very foot. It takes no room. */
.conversation__end { block-size: 0; scroll-margin-block-end: var(--spacing-md); }
/* A conversation that is over, in a list: fainter, and it still opens. */
.conversation-case--closed { opacity: 0.6; }
.conversation-case > .icon { flex: none; --icon-size: var(--country-row-arrow-width); color: var(--palette-icon-muted); }
/* The page that lists every conversation: the rows, and the way to a new one. */
.conversation-cases { display: flex; flex-direction: column; }
.conversation-cases > .sample-capsule { align-self: center; margin-block-start: var(--spacing-md); }
.placeholder--conversation-case { block-size: var(--action-row-height); border-radius: var(--radius-md); }
.placeholder--conversation-case + .placeholder--conversation-case { margin-block-start: var(--spacing-xs); }

@media (min-width: 768px) {
  .conversation__thread { padding-block-start: 0; }
  .conversation-composer { position: static; margin-inline: 0; padding: var(--spacing-md) 0 0; background: none; }
  .conversation-message__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conversation-starters__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The list of conversations reads as a column, not across a desktop's whole width. */
  .conversation-cases { max-inline-size: 760px; margin-inline: auto; }
}
@media (min-width: 1100px) {
  /* With no conversation to offer beside it, a conversation keeps a reading width in the middle of the page. */
  .companion-split--alone { grid-template-columns: minmax(0, 760px); justify-content: center; }
  .companion-split--alone .companion-split__main { grid-column: 1; }
}

/* ==========================================================================
   11b. What the wired screens needed beside the designed pages. Added with
        the port (mobile/webApp, screens/companion), and only these: each
        draws something whose place or turn is data, which a designed page
        could only show with a stand-in.
   ========================================================================== */

/* A turn is the straight arrow, turned by quarter turns clockwise: the state
   says how many (NavStepUi.quarterTurns). Never mirrored with the language. */
.route-step__tile[data-quarter-turns="1"] .icon { transform: rotate(90deg); }
.route-step__tile[data-quarter-turns="2"] .icon { transform: rotate(180deg); }
.route-step__tile[data-quarter-turns="3"] .icon { transform: rotate(270deg); }

/* The customer's own picture, with each piece of text found lying over its
   place. Where the picture stands and where each patch lies are data: they
   are the geometry of a drawing (the attributes of an <svg>), never a style.
   These are that drawing's place on the stage and the look of a patch that
   fills the place its text was found in: its words are as tall as the place
   lets them be, and never cut. The pill then stands at the stage's foot, as
   in the apps. A drawing is not mirrored with the language. */
.camera-stage__overlay { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; direction: ltr; }
.camera-stage__overlay foreignObject { overflow: visible; }
.camera-patch__box { display: flex; align-items: center; inline-size: 100%; block-size: 100%; container-type: size; }
.camera-patch--fitted { flex: none; min-inline-size: 100%; block-size: 100%; min-block-size: 0; padding-block: 0; white-space: nowrap; font-size: clamp(10px, 70cqb, 22px); line-height: 1.1; }
/* A patch that can be chosen is a button, and the text it lies over is often half a finger tall. The button is then a
   finger tall round the patch, which stays the size of its text: what is pressed is larger than what is seen. */
.camera-patch-target { flex: none; display: flex; align-items: center; min-inline-size: 100%; block-size: max(100%, var(--sizing-min-touch-target)); border-radius: var(--camera-patch-radius); cursor: pointer; }
.camera-patch-target > .camera-patch--fitted { block-size: 100cqb; }
.camera-patch-target[aria-checked="true"] > .camera-patch { box-shadow: 0 0 0 var(--camera-patch-selected-border-width) var(--camera-patch-selected-border-color); }
.camera-stage__overlay ~ .camera-pill, .camera-stage__overlay ~ .camera-live { margin-block-start: auto; }
/* The file a visitor chooses or takes a picture into: the browser's own, opened by the gallery control and never seen. */
.camera-file { display: none; }

/* ==========================================================================
   11c. A narrow phone, under 360 wide: the same pages, with the parts of a
        fixed size let in so that the words beside them keep their room.
   ========================================================================== */

@media (max-width: 359px) {
  /* A place's picture gives way to its name and its facts. */
  .place-card { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); }
  /* The trip's three figures keep clear of the lines between them. */
  .route-trip { padding: var(--spacing-md); }
  .route-figures__figure { padding-inline: var(--spacing-xs); }
  .route-figures__figure:first-child { padding-inline-start: 0; }
}

/* ==========================================================================
   11d. The room camera check: RoomSafetyScreen.kt. Only a build that has the
        check draws it. One page in four stages (RoomSafetyStageUi): the
        entry, the scan, the result and the check by hand. A website cannot
        look at a network, so its entry says so and leads with the check by
        hand; the scan and the result are drawn where a build runs the
        sample scan.
   ========================================================================== */

/* What stands under the band: one column, in the apps' order. */
.room-check { display: flex; flex-direction: column; gap: var(--room-safety-block-to-heading); min-inline-size: 0; }
.room-check__part { display: flex; flex-direction: column; gap: var(--room-safety-heading-to-block); min-inline-size: 0; }
.room-check .section-header { min-block-size: 0; margin-block-end: 0; gap: var(--room-safety-heading-icon-to-title); }
.room-check .section-header__icon { color: var(--room-safety-heading-icon-tint); --icon-size: var(--room-safety-heading-icon-width); }
.room-check .section-header__title { color: var(--room-safety-heading-title-color); font: var(--room-safety-heading-title-style) var(--font-family); }
/* One centred line: the content is a sample. */
.room-check__sample { text-align: center; color: var(--room-safety-sample-note-color); font: var(--room-safety-sample-note-style) var(--font-family); }
/* The ways on, and what the check cannot see, said beside them and never as small print. */
.room-check__ways { display: flex; flex-direction: column; gap: var(--room-safety-button-to-limits); min-inline-size: 0; }
.room-check__ways .maak-text-button { align-self: center; min-block-size: var(--sizing-min-touch-target); color: var(--room-safety-hand-check-text-color); font: var(--room-safety-hand-check-text-style) var(--font-family); }
.room-check__ways .maak-text-button--plain { color: var(--room-safety-save-color); }
.safety-limits { display: flex; flex-direction: column; gap: var(--room-safety-limits-gap); color: var(--room-safety-limits-color); font: var(--room-safety-limits-style) var(--font-family); line-height: var(--typography-caption-loose-line); }

/* The four things the check names, and a result's four counters: tiles in a row.
   Each tile's icon wears its own colour, which the state hands over. */
.safety-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--room-safety-tile-gap); }
.safety-tile { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); min-block-size: var(--room-safety-check-tile-height); padding: var(--room-safety-check-icon-top) var(--room-safety-check-label-inset) var(--spacing-sm); border-radius: var(--room-safety-tile-radius); background: var(--room-safety-tile-fill); text-align: center; }
.safety-tile .icon { flex: none; color: var(--data-color, var(--_tint, var(--palette-brand))); --icon-size: var(--room-safety-check-icon-size); }
/* The four colours as a drawn page names them; a screen hands each tile's own as --data-color. */
.safety-tile--unknown { --_tint: var(--room-safety-unknown-tint); }
.safety-tile--broadcast { --_tint: var(--room-safety-broadcast-tint); }
.safety-tile--network { --_tint: var(--room-safety-network-tint); }
.safety-tile--camera { --_tint: var(--room-safety-camera-tint); }
.safety-tile__label { color: var(--room-safety-check-label-color); font: var(--room-safety-check-label-style) var(--font-family); overflow-wrap: anywhere; }
.safety-tile--counter { min-block-size: var(--room-safety-counter-height); padding-block-start: var(--room-safety-counter-icon-top); }
.safety-tile__number { color: var(--room-safety-counter-text-color); font: var(--room-safety-counter-number-style) var(--font-family); }
.safety-tile--counter .safety-tile__label { color: var(--room-safety-counter-text-color); font: var(--room-safety-counter-label-style) var(--font-family); }

/* The entry's banner: a picture with two texts on it. Its title breaks where the string does. */
.safety-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-sm); min-block-size: var(--room-safety-banner-height); padding: var(--room-safety-banner-inset); border-radius: var(--room-safety-banner-radius); background: var(--palette-brand); color: var(--room-safety-banner-text-color); }
.safety-banner__picture { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; }
.safety-banner--mirrored .safety-banner__picture { transform: scaleX(var(--mirror)); }
.safety-banner__title { max-inline-size: 62%; font: var(--room-safety-banner-title-style) var(--font-family); white-space: pre-line; }
.safety-banner__body { max-inline-size: var(--room-safety-banner-body-width); font: var(--room-safety-banner-body-style) var(--font-family); line-height: var(--typography-label-tall-line); }

/* "How does the check work?": three steps in a row. */
.safety-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--room-safety-tile-gap); }
.safety-step { display: flex; flex-direction: column; align-items: center; min-block-size: var(--room-safety-how-step-height); padding: var(--room-safety-how-square-top) var(--spacing-xs) var(--room-safety-how-body-to-bottom); border-radius: var(--room-safety-tile-radius); background: var(--room-safety-tile-fill); text-align: center; }
.safety-step__square { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--room-safety-how-square-size); block-size: var(--room-safety-how-square-size); border-radius: var(--room-safety-how-square-radius); background: var(--room-safety-how-square-fill); color: var(--room-safety-how-glyph-tint); }
.safety-step__square .icon { --icon-size: var(--room-safety-how-glyph-size); }
.safety-step__title { margin-block-start: var(--spacing-xs); color: var(--room-safety-how-title-color); font: var(--room-safety-how-title-style) var(--font-family); overflow-wrap: anywhere; }
.safety-step__body { margin-block-start: var(--spacing-xs); color: var(--room-safety-how-body-color); font: var(--room-safety-how-body-style) var(--font-family); overflow-wrap: anywhere; }

/* The scan: a wait. The line, the still picture, how far it is, the four steps, the tip. */
.safety-scan { display: flex; flex-direction: column; min-inline-size: 0; }
.safety-scan__line { margin-block-start: var(--room-safety-notice-to-line); text-align: center; color: var(--room-safety-scan-line-color); font: var(--room-safety-scan-line-style) var(--font-family); }
.safety-scan__picture { display: block; inline-size: min(100%, var(--room-safety-picture-box-height)); margin-inline: auto; aspect-ratio: 1; object-fit: contain; }
.scan-progress { display: flex; align-items: center; gap: var(--spacing-sm); margin-block-end: var(--room-safety-bar-to-steps); }
.scan-progress__bar { flex: 1 1 0; min-inline-size: 0; display: block; block-size: var(--room-safety-bar-height); border: 0; border-radius: var(--room-safety-bar-radius); background: var(--room-safety-bar-track); color: var(--room-safety-bar-fill); overflow: hidden; appearance: none; -webkit-appearance: none; }
.scan-progress__bar::-webkit-progress-bar { background: var(--room-safety-bar-track); border-radius: var(--room-safety-bar-radius); }
.scan-progress__bar::-webkit-progress-value { background: currentColor; border-radius: var(--room-safety-bar-radius); }
.scan-progress__bar::-moz-progress-bar { background: currentColor; border-radius: var(--room-safety-bar-radius); }
/* The share done and its sign, left to right whichever way the page reads. */
.scan-progress__text { flex: none; direction: ltr; color: var(--room-safety-bar-fill); font: var(--room-safety-bar-number-style) var(--font-family); }
.scan-progress__sign { font: var(--room-safety-bar-sign-style) var(--font-family); }

/* The scan's steps, and on a result the same four as they ended. */
.scan-steps { display: flex; flex-direction: column; padding: var(--spacing-xs) var(--room-safety-steps-inset); border: var(--room-safety-steps-border-width) solid var(--room-safety-steps-border-color); border-radius: var(--room-safety-steps-radius); background: var(--room-safety-steps-fill); }
.scan-step { display: grid; grid-template-columns: var(--room-safety-step-disc-size) minmax(0, 1fr) var(--room-safety-step-mark-size); align-items: center; column-gap: var(--room-safety-step-disc-to-label); min-block-size: var(--room-safety-steps-row-pitch); padding-block: var(--spacing-xs); }
.scan-step__dot { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--room-safety-step-disc-size); block-size: var(--room-safety-step-disc-size); border-radius: 50%; background: var(--room-safety-step-disc-fill); }
.scan-step__dot::after { content: ""; inline-size: var(--room-safety-step-dot-size); block-size: var(--room-safety-step-dot-size); border-radius: 50%; background: var(--room-safety-step-dot-idle); }
.scan-step__text { display: flex; flex-direction: column; gap: var(--room-safety-step-label-to-note); min-inline-size: 0; }
.scan-step__label { color: var(--room-safety-step-label-color); font: var(--room-safety-step-waiting-style) var(--font-family); }
.scan-step__note { color: var(--room-safety-step-note-color); font: var(--room-safety-step-note-style) var(--font-family); }
.scan-step__mark { color: var(--room-safety-step-waiting-mark-tint); --icon-size: var(--room-safety-step-mark-size); }
.scan-step--done .scan-step__dot::after { background: var(--room-safety-step-dot-done); }
.scan-step--done .scan-step__label { font: var(--room-safety-step-done-style) var(--font-family); }
.scan-step--done .scan-step__mark { color: var(--room-safety-step-done-mark-tint); }
.scan-step--running .scan-step__label { color: var(--room-safety-step-running-color); font: var(--room-safety-step-running-style) var(--font-family); }
.scan-step--running .scan-step__mark { color: var(--room-safety-step-running-mark-tint); animation: camera-turn 1s linear infinite; }
.scan-step--not-checked .scan-step__mark { color: var(--room-safety-step-not-checked-mark-tint); }
@media (prefers-reduced-motion: reduce) { .scan-step--running .scan-step__mark { animation: none; } }

/* The tip under the scan's steps. */
.safety-tip { display: flex; align-items: flex-start; gap: var(--room-safety-tip-icon-to-text); min-block-size: var(--room-safety-tip-min-height); margin-block-start: var(--room-safety-block-to-heading); padding: var(--room-safety-tip-padding); border-radius: var(--room-safety-tip-radius); background: var(--room-safety-tip-fill); color: var(--room-safety-tip-text-color); }
.safety-tip .icon { flex: none; color: var(--room-safety-tip-icon-tint); --icon-size: var(--room-safety-tip-icon-size); }
.safety-tip__text { display: flex; flex-direction: column; gap: var(--room-safety-tip-title-to-body); min-inline-size: 0; }
.safety-tip__title { font: var(--room-safety-tip-title-style) var(--font-family); }
.safety-tip__body { font: var(--room-safety-tip-body-style) var(--font-family); line-height: var(--typography-caption-loose-line); }

/* How the scan ended: its picture, its title, its sentence. No ending says a room is safe. */
.safety-verdict { display: flex; flex-direction: column; align-items: center; text-align: center; }
.safety-verdict__picture { inline-size: var(--room-safety-picture-width-none-found); block-size: var(--room-safety-picture-height-none-found); object-fit: contain; }
.safety-verdict__title { margin-block-start: var(--room-safety-verdict-over-picture); color: var(--room-safety-verdict-color-none-found); font: var(--room-safety-verdict-style) var(--font-family); }
.safety-verdict__sentence { max-inline-size: 44ch; margin-block-start: var(--room-safety-verdict-to-sentence); color: var(--room-safety-sentence-color); font: var(--room-safety-sentence-style) var(--font-family); }
.safety-verdict--possible-camera .safety-verdict__picture { inline-size: var(--room-safety-picture-width-possible-camera); block-size: var(--room-safety-picture-height-possible-camera); }
.safety-verdict--possible-camera .safety-verdict__title { color: var(--room-safety-verdict-color-possible-camera); }
.safety-verdict .maak-text-button { min-block-size: var(--sizing-min-touch-target); margin-block-start: var(--room-safety-sentence-to-settings); color: var(--room-safety-hand-check-text-color); }

/* A row of a result's lists: a device on the network, or a nearby signal. Its level colours its disc and its pill. */
.safety-devices { display: flex; flex-direction: column; gap: var(--room-safety-device-row-gap); }
.safety-devices__empty { color: var(--room-safety-empty-list-color); font: var(--room-safety-empty-list-style) var(--font-family); }
.safety-device { --_disc: var(--room-safety-disc-fill-recognised); --_pill: var(--room-safety-pill-fill-recognised); display: grid; grid-template-columns: var(--room-safety-device-disc-size) minmax(0, 1fr) auto; align-items: start; column-gap: var(--room-safety-device-disc-to-text); min-block-size: var(--room-safety-device-row-height); padding: var(--room-safety-device-disc-top) var(--room-safety-device-disc-inset) var(--room-safety-device-row-bottom-padding); border-radius: var(--room-safety-device-row-radius); background: var(--room-safety-device-row-fill); }
.safety-device__disc { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--room-safety-device-disc-size); block-size: var(--room-safety-device-disc-size); border-radius: 50%; background: var(--_disc); color: var(--room-safety-device-glyph-tint); }
.safety-device__disc .icon { --icon-size: var(--room-safety-device-glyph-size); }
.safety-device__text { display: flex; flex-direction: column; gap: var(--spacing-xxs); min-inline-size: 0; }
.safety-device__name { color: var(--room-safety-device-name-color); font: var(--room-safety-device-name-style) var(--font-family); }
.safety-device__detail { color: var(--room-safety-device-detail-color); font: var(--room-safety-device-detail-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.safety-device__next { margin-block-start: var(--room-safety-device-reason-to-next); color: var(--room-safety-device-next-color); font: var(--room-safety-device-next-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.safety-device__pill { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--room-safety-device-pill-min-width); min-block-size: var(--room-safety-device-pill-height); padding-inline: var(--room-safety-device-pill-padding); border-radius: var(--room-safety-device-pill-radius); background: var(--_pill); color: var(--room-safety-device-pill-color); font: var(--room-safety-device-pill-style) var(--font-family); text-align: center; }
.safety-device--possible-camera { --_disc: var(--room-safety-disc-fill-possible-camera); --_pill: var(--room-safety-pill-fill-possible-camera); }
.safety-device--not-identified { --_disc: var(--room-safety-disc-fill-not-identified); --_pill: var(--room-safety-pill-fill-not-identified); }
.safety-device--nearby-signal { --_disc: var(--room-safety-disc-fill-nearby-signal); --_pill: var(--room-safety-pill-fill-nearby-signal); }
.safety-device--yours { --_disc: var(--room-safety-disc-fill-yours); --_pill: var(--room-safety-pill-fill-yours); }

/* The check by hand: one short page at a time. */
.safety-guide { display: flex; flex-direction: column; min-inline-size: 0; }
.safety-guide__position { color: var(--room-safety-guide-position-color); font: var(--room-safety-guide-position-style) var(--font-family); }
.safety-guide__title { margin-block-start: var(--room-safety-guide-position-to-title); color: var(--room-safety-guide-title-color); font: var(--room-safety-guide-title-style) var(--font-family); }
.safety-guide__body { margin-block-start: var(--room-safety-guide-title-to-body); color: var(--room-safety-guide-body-color); font: var(--room-safety-guide-body-style) var(--font-family); }
.safety-points { display: flex; flex-direction: column; gap: var(--room-safety-guide-point-gap); margin-block-start: var(--room-safety-guide-body-to-points); }
.safety-point { display: grid; grid-template-columns: var(--room-safety-guide-point-disc-size) minmax(0, 1fr); column-gap: var(--room-safety-guide-point-disc-to-text); align-items: start; padding: var(--room-safety-guide-point-padding); border-radius: var(--room-safety-guide-point-radius); background: var(--room-safety-guide-point-fill); }
.safety-point__disc { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--room-safety-guide-point-disc-size); block-size: var(--room-safety-guide-point-disc-size); border-radius: 50%; background: var(--room-safety-guide-point-disc-fill); color: var(--room-safety-guide-point-number-color); font: var(--room-safety-guide-point-number-style) var(--font-family); }
.safety-point__text { display: flex; flex-direction: column; gap: var(--room-safety-guide-point-title-to-body); min-inline-size: 0; }
.safety-point__title { color: var(--room-safety-guide-point-title-color); font: var(--room-safety-guide-point-title-style) var(--font-family); }
.safety-point__body { color: var(--room-safety-guide-point-body-color); font: var(--room-safety-guide-point-body-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.safety-guide__torch { margin-block-start: var(--room-safety-guide-points-to-torch); }
.safety-guide__torch-note { margin-block-start: var(--room-safety-guide-points-to-torch); color: var(--room-safety-guide-torch-note-color); font: var(--room-safety-guide-torch-note-style) var(--font-family); }

@media (min-width: 768px) {
  /* On the white card the tiles and rows keep their pale ground, and the banner its own height. */
  .safety-banner { min-block-size: calc(var(--room-safety-banner-height) * 1.2); padding-inline: var(--spacing-xl); }
  .safety-banner__title { max-inline-size: 50%; }
  .safety-banner__body { max-inline-size: 40ch; }
  .safety-step { padding-inline: var(--spacing-md); }
  .safety-step__body { max-inline-size: 28ch; }
}

/* ==========================================================================
   11e. Destination weather: WeatherScreen.kt, the designer's frame of
        13 October (1925:1433, mobile/design-specs/delta-2026-10-13/weather.md),
        its content and order as a web page. On a phone the apps' screen: the
        hero card of the city, four measures, the coming hours, the days with
        today first, the strip about rain, the source's lines. From a desktop
        up the hero over two columns: the measures and the strip beside the
        hours and the days.
   ========================================================================== */

/* The page: the hero, then the parts, one under the other on a phone. */
.weather { display: flex; flex-direction: column; gap: var(--weather-section-gap); min-inline-size: 0; }
.weather-parts { display: flex; flex-direction: column; gap: var(--weather-section-gap); min-inline-size: 0; }

/* The hero: the city and a caret, the date, the temperature and the sky, the sky's own picture at the far end. One control. */
.weather-hero { position: relative; display: flex; align-items: center; gap: var(--spacing-md); inline-size: 100%; min-block-size: var(--weather-hero-height); padding: var(--weather-hero-inset); padding-inline-end: var(--weather-hero-image-trailing-inset); border-radius: var(--weather-hero-radius); background: var(--weather-hero-fill); text-align: start; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.weather-hero:hover { background: var(--palette-brand-outline); }
.weather-hero__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); }
.weather-hero__city { display: flex; align-items: center; gap: var(--weather-hero-city-to-caret); max-inline-size: 100%; }
.weather-hero__name { min-inline-size: 0; color: var(--weather-hero-city-color); font: var(--weather-hero-city-style) var(--font-family); }
.weather-hero__caret { flex: none; inline-size: var(--weather-hero-caret-width); block-size: var(--weather-hero-caret-height); color: var(--weather-hero-caret-tint); }
.weather-hero__date { color: var(--weather-hero-date-color); font: var(--weather-hero-date-style) var(--font-family); }
.weather-hero__temperature { color: var(--weather-hero-temperature-color); font: var(--weather-hero-temperature-style) var(--font-family); }
.weather-hero__sky { color: var(--weather-hero-sky-color); font: var(--weather-hero-sky-style) var(--font-family); }
.weather-hero__picture { flex: none; inline-size: var(--weather-hero-image-size); block-size: var(--weather-hero-image-size); object-fit: contain; }
.placeholder--weather-hero-date, .placeholder--weather-hero-temperature, .placeholder--weather-hero-sky { block-size: 18px; border-radius: var(--radius-xs); background: var(--weather-hero-placeholder-fill); }
.placeholder--weather-hero-date { inline-size: var(--weather-hero-placeholder-date-width); }
.placeholder--weather-hero-temperature { inline-size: var(--weather-hero-placeholder-temperature-width); block-size: 40px; }
.placeholder--weather-hero-sky { inline-size: var(--weather-hero-placeholder-sky-width); }

/* The measures the source gave: tiles that share the row equally. Not controls. */
.weather-measures { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--weather-measure-gap); }
.weather-measure { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xxs); min-block-size: var(--weather-measure-height); padding: var(--weather-measure-image-top) var(--spacing-xxs); border-radius: var(--weather-measure-radius); background: var(--weather-measure-fill); text-align: center; }
.weather-measure__picture { display: flex; align-items: center; justify-content: center; inline-size: var(--weather-measure-image-box); block-size: var(--weather-measure-image-box); margin-block-end: var(--spacing-xxs); }
.weather-measure__picture img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.weather-measure__value { color: var(--weather-measure-value-color); font: var(--weather-measure-value-style) var(--font-family); line-height: var(--weather-measure-value-line-height); }
.weather-measure__label { color: var(--weather-measure-label-color); font: var(--weather-measure-label-style) var(--font-family); line-height: var(--weather-measure-value-line-height); overflow-wrap: anywhere; }

/* The coming hours: "Now" on a tile of its own, then the others parted by a pale line. It scrolls inside itself on a narrow phone. */
.weather-hours { display: flex; align-items: stretch; min-block-size: var(--weather-hours-height); padding: var(--weather-hour-now-inset); border-radius: var(--weather-hours-radius); background: var(--weather-hours-fill); overflow-x: auto; scrollbar-width: none; }
.weather-hour { position: relative; flex: 1 1 var(--weather-hour-pitch); min-inline-size: 48px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-block: var(--spacing-sm); }
.weather-hour--now { flex: 0 0 var(--weather-hour-now-width); border-radius: var(--weather-hour-now-radius); background: var(--weather-hour-now-fill); }
.weather-hour + .weather-hour:not(.weather-hour--now)::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--weather-hour-divider-top) - var(--weather-hour-now-inset)); inline-size: var(--weather-hour-divider-width); block-size: var(--weather-hour-divider-height); background: var(--weather-hour-divider-color); }
.weather-hour--now + .weather-hour::before { display: none; }
.weather-hour__label { color: var(--weather-hour-label-color); font: var(--weather-hour-label-style) var(--font-family); white-space: nowrap; }
.weather-hour__picture { display: flex; align-items: center; justify-content: center; inline-size: var(--weather-hour-image-size); block-size: var(--weather-hour-image-size); }
.weather-hour__picture img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.weather-hour__temperature { color: var(--weather-hour-temperature-color); font: var(--weather-hour-temperature-style) var(--font-family); }

/* The days, today first: one card, a row each parted by a white line. The day, its sky's picture, the warmest, the coldest. */
.weather-days { display: flex; flex-direction: column; border-radius: var(--weather-days-radius); background: var(--weather-days-fill); overflow: hidden; }
.weather-day { display: grid; grid-template-columns: minmax(0, 1fr) var(--weather-day-row-image-size) 4.5em 4.5em; align-items: center; column-gap: var(--spacing-md); min-block-size: var(--weather-day-row-height); padding-inline: var(--weather-day-row-inset); }
.weather-day + .weather-day { border-block-start: var(--weather-day-row-separator) solid var(--weather-day-row-separator-color); }
.weather-day__name { min-inline-size: 0; color: var(--weather-day-row-name-color); font: var(--weather-day-row-name-style) var(--font-family); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weather-day__picture { display: flex; align-items: center; justify-content: center; inline-size: var(--weather-day-row-image-size); block-size: var(--weather-day-row-image-size); }
.weather-day__picture img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.weather-day__high { color: var(--weather-day-row-high-color); font: var(--weather-day-row-high-style) var(--font-family); text-align: end; }
.weather-day__low { color: var(--weather-day-row-low-color); font: var(--weather-day-row-low-style) var(--font-family); text-align: end; }

/* Whether rain is forecast for the rest of today: the umbrella on its tile, then the two lines. Not a control. */
.weather-rain { display: flex; align-items: center; gap: var(--weather-rain-tile-to-text); min-block-size: var(--weather-rain-height); padding: var(--weather-rain-tile-inset); padding-inline-end: var(--spacing-md); border-radius: var(--weather-rain-radius); background: var(--weather-rain-fill); }
.weather-rain__tile { flex: none; display: flex; align-items: center; justify-content: center; inline-size: var(--weather-rain-tile-size); block-size: var(--weather-rain-tile-size); border-radius: var(--weather-rain-tile-radius); background: var(--weather-rain-tile-fill); }
.weather-rain__tile img { inline-size: var(--weather-rain-image-size); block-size: var(--weather-rain-image-size); object-fit: contain; }
.weather-rain__text { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.weather-rain__title { color: var(--weather-rain-text-color); font: var(--weather-rain-title-style) var(--font-family); }
.weather-rain__line { color: var(--weather-rain-text-color); font: var(--weather-rain-line-style) var(--font-family); }

/* Who the figures are from, and when they were read: centred lines under it all. */
.weather-foot { display: flex; flex-direction: column; align-items: center; gap: var(--weather-foot-line-gap); margin-block-start: calc(var(--weather-section-gap) * -0.25); color: var(--weather-foot-color); font: var(--weather-foot-style) var(--font-family); text-align: center; }
/* A country's row, which emergency and help and safety and scams draw as the weather's city row was drawn
   (screens/companion/CountryParts.kt), and the line under it that it is where the eSIM is for. */
.weather-place { display: flex; align-items: center; gap: var(--weather-row-flag-to-text); inline-size: 100%; min-block-size: var(--weather-row-height); padding-inline: var(--weather-row-inset); border-radius: var(--weather-row-radius); background: var(--weather-row-fill); text-align: start; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.weather-place:hover { background: var(--palette-brand-outline); }
.weather-place .flag { flex: none; --flag-size: var(--weather-row-flag-size); --flag-ring: 0px; }
.weather-place__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--weather-row-city-to-country); }
.weather-place__city { color: var(--weather-row-city-color); font: var(--weather-row-city-style) var(--font-family); }
.weather-place__country { color: var(--weather-row-country-color); font: var(--weather-row-country-style) var(--font-family); }
.weather-place__caret { flex: none; inline-size: var(--weather-caret-width); block-size: var(--weather-caret-height); margin-inline-start: calc(var(--weather-row-text-to-caret) - var(--weather-row-flag-to-text)); color: var(--weather-caret-tint); }
.weather-note { display: flex; align-items: center; gap: var(--weather-note-icon-to-text); margin-block-start: var(--weather-row-to-note); padding-inline: var(--weather-row-inset); color: var(--weather-note-color); font: var(--weather-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.weather-note .icon { flex: none; --icon-size: var(--weather-note-icon-size); color: var(--weather-note-icon-tint); }
.weather-place + .weather-waiting, .weather-note + .weather-waiting { margin-block-start: var(--weather-row-to-now); }
.weather-place + .status-message, .weather-note + .status-message { margin-block-start: 0; }
/* That the figures are a sample. */
.weather-sample { color: var(--weather-sample-note-color); font: var(--weather-sample-note-style) var(--font-family); text-align: center; }

/* While the weather is read: empty shapes where the measures, the hours and the first days will be. */
.placeholder--weather-measure { block-size: var(--weather-measure-height); border-radius: var(--weather-measure-radius); background: var(--weather-placeholder-fill); }
.placeholder--weather-hours { block-size: var(--weather-hours-height); border-radius: var(--weather-hours-radius); background: var(--weather-placeholder-fill); }
.placeholder--weather-day-row { block-size: var(--weather-day-row-height); background: var(--weather-placeholder-fill); }
.weather-waiting .weather-days { background: transparent; gap: var(--weather-day-row-separator); }

/* The list of cities: the kit's sheet with a field and these rows. */
.weather-sheet { padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg); }
.weather-sheet .search-field { margin-block-start: var(--spacing-md); }
.weather-cities { display: flex; flex-direction: column; max-block-size: 360px; margin-block-start: var(--spacing-sm); overflow-y: auto; }
.weather-city { display: flex; align-items: center; gap: var(--weather-sheet-flag-to-name); min-block-size: max(var(--weather-sheet-row-height), var(--weather-sheet-row-touch-target)); padding-inline: var(--spacing-sm); border-radius: var(--radius-md); text-align: start; }
.weather-city:hover { background: var(--palette-brand-wash); }
.weather-city[aria-checked="true"] { background: var(--palette-surface); }
.weather-city .flag { flex: none; --flag-size: var(--weather-sheet-flag-size); --flag-ring: 0px; }
.weather-city__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--weather-sheet-city-to-country); }
.weather-city__name { color: var(--weather-sheet-city-color); font: var(--weather-sheet-city-style) var(--font-family); }
.weather-city__country { color: var(--weather-sheet-country-color); font: var(--weather-sheet-country-style) var(--font-family); }
.weather-city__badge { flex: none; color: var(--weather-sheet-badge-color); font: var(--weather-sheet-badge-style) var(--font-family); }
.weather-city__tick { flex: none; --icon-size: var(--weather-sheet-tick-size); margin-inline-start: calc(var(--weather-sheet-badge-to-tick) - var(--weather-sheet-flag-to-name)); color: var(--weather-sheet-tick-tint); }

@media (min-width: 768px) {
  /* With no city to show, the one message stands alone in the middle. */
  .weather--alone { max-inline-size: 640px; margin-inline: auto; }
  .weather-hero__temperature { font-size: calc(var(--typography-hero-size) * 1.3); line-height: 1.15; }
  .weather-hours { scrollbar-width: thin; }
}
@media (min-width: 1100px) {
  /* The hero over two columns: the measures and the strip where reading starts, the hours and the days beside them.
     The last row takes what the days need past the measures, so the strip stands right under the measures and not
     at the foot of the days with a hole above it. */
  .weather-parts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; grid-template-areas: "measures hours" "measures days" "rain days"; align-items: start; gap: var(--weather-section-gap); }
  .weather-parts > .weather-measures { grid-area: measures; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-parts > .weather-hours { grid-area: hours; }
  .weather-parts > .weather-days { grid-area: days; }
  .weather-parts > .weather-rain { grid-area: rain; }
  .weather-waiting.weather-parts > .placeholder--weather-hours { grid-area: hours; }
}

/* ==========================================================================
   11f. Saved places: SavedPlacesScreen.kt. Not drawn by the designer
        (mobile/design-specs/FOR-THE-DESIGNER.md). On a phone the apps' screen:
        the line that says where the places are kept, the cards one under the
        other, "Plan a day with these", then "More like these". From a tablet
        up the saved places stand in a white panel, two across; on a desktop
        what is done with them stands beside the list: the day's button, and
        the assistant's suggestions with their own cards.
   ========================================================================== */

.saved { align-items: start; }
.saved__list { min-inline-size: 0; }
/* What is done with the places. On a phone it follows the list; on a desktop it stands beside it, and scrolls with the page: its suggestions can be long. */
.saved .companion-split__aside { position: static; display: flex; flex-direction: column; gap: var(--saved-places-plan-day-to-suggestions); }
.saved .companion-split__aside > .companion-panel + .companion-panel { margin-block-start: 0; }
.saved__sample { margin-block-end: var(--saved-places-sample-note-to-content); color: var(--saved-places-sample-note-color); font: var(--saved-places-sample-note-style) var(--font-family); text-align: center; }
.saved__standing { margin-block-end: var(--saved-places-standing-to-content); }
/* That the places are kept in this browser: a small heart and one line, over the cards. */
.saved__kept { display: flex; align-items: center; gap: var(--saved-places-kept-icon-to-text); margin-block-end: var(--saved-places-kept-to-cards); color: var(--saved-places-kept-color); font: var(--saved-places-kept-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.saved__kept .icon { flex: none; inline-size: var(--saved-places-kept-icon-width); block-size: var(--saved-places-kept-icon-height); color: var(--saved-places-kept-icon-tint); }
.saved__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--saved-places-card-gap); }
/* A place taken out stays where it is, its heart empty, until the page is left: drawn fainter, and its heart keeps it again. */
.saved__cards:not(.saved__suggested) .place-card:has(.place-card__heart[aria-pressed="false"]) .place-card__text { opacity: 0.55; }
/* The notes under the cards: places that could not be read, places that are gone. Each a status message, in a quiet box of its own. */
.saved__notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--saved-places-note-gap); margin-block-start: var(--saved-places-cards-to-note); }
.saved__notes .status-message { padding: var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-surface); }
.saved__show-more { display: flex; justify-content: center; margin-block-start: var(--saved-places-cards-to-more); }
.saved__plan .maak-button .icon { --icon-size: var(--saved-places-plan-day-icon-size); }
/* "More like these": the assistant's sparkle and a title, a line on what it does, the button, and the suggestions under it. */
.saved__title { display: flex; align-items: center; gap: var(--saved-places-suggestions-icon-to-title); color: var(--saved-places-suggestions-title-color); font: var(--saved-places-suggestions-title-style) var(--font-family); }
.saved__title .icon { flex: none; --icon-size: var(--saved-places-suggestions-icon-size); color: var(--saved-places-suggestions-icon-tint); }
.saved__detail { margin-block-start: var(--saved-places-suggestions-title-to-detail); color: var(--saved-places-suggestions-detail-color); font: var(--saved-places-suggestions-detail-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.saved__ask { display: flex; flex-direction: column; gap: var(--saved-places-suggestions-button-to-message); margin-block-start: var(--saved-places-suggestions-detail-to-button); }
.saved__message { color: var(--saved-places-suggestions-message-color); font: var(--saved-places-suggestions-message-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: center; }
.saved__message--failure { color: var(--saved-places-suggestions-failure-color); }
.saved__suggested { margin-block-start: var(--saved-places-suggestions-button-to-cards); }
/* "More like these" as a panel of the aside: never wider than its column, whatever a suggested place is called. */
.saved__more { min-inline-size: 0; }
/* While the places cannot be read, under the standing card: how many the browser keeps, and the way to take them all off. */
.saved__blocked { display: flex; flex-direction: column; align-items: center; gap: var(--saved-places-blocked-kept-to-clear); margin-block-start: var(--saved-places-standing-to-blocked-kept); color: var(--saved-places-blocked-kept-color); font: var(--saved-places-blocked-kept-style) var(--font-family); text-align: center; }
/* Who the places come from, in the source's own words: the last line of the page. */
.saved__credit { margin-block: var(--saved-places-content-to-credit) 0; color: var(--saved-places-credit-color); font: var(--saved-places-credit-style) var(--font-family); text-align: center; }
/* The row to the saved places, under the menu's tiles: the kit's link row, the grid's whole width. */
.companion-menu__saved { margin-block-start: var(--companion-menu-grid-to-saved); }
@media (min-width: 768px) {
  .saved__cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--spacing-md); }
  .saved__notes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  /* Nothing to do with the places (none saved, none readable): the one message or card stands alone, in the middle. */
  .saved--alone { max-inline-size: 640px; margin-inline: auto; }
  .companion-menu__saved { background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft); }
}
@media (min-width: 1100px) {
  .saved--alone { grid-template-columns: minmax(0, 1fr); }
  /* Beside the list a suggestion is one card a row. */
  .saved__suggested { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   11g. Emergency and help: EmergencyScreen.kt. Not drawn by the designer. On a
        phone the apps' screen: the country, its numbers (the ones to remember
        on red cards, the others as rows), the sentences, help nearby. From a
        tablet up each part is a white panel and its cards stand side by side;
        on a desktop the country stays in view beside them. The country's row
        and the list of countries are destination weather's (.weather-place,
        .weather-sheet), as in the apps.
   ========================================================================== */

.emergency { align-items: start; }
.emergency__parts { display: flex; flex-direction: column; gap: var(--emergency-section-gap); min-inline-size: 0; }
.emergency__parts > .companion-panel + .companion-panel { margin-block-start: 0; }
.companion-section__title { color: var(--emergency-section-title-color); font: var(--emergency-section-title-style) var(--font-family); }
.companion-section__note { margin-block-start: var(--emergency-section-title-to-note); color: var(--emergency-section-note-color); font: var(--emergency-section-note-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.companion-section__body { margin-block-start: var(--emergency-section-title-to-content); }
/* A number to remember: one control. Its service's icon on a white disc, the services over the digits, and "Call" on a white pill. */
.emergency-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--emergency-card-gap); }
.emergency-call { display: flex; align-items: center; gap: var(--emergency-main-icon-to-text); inline-size: 100%; min-block-size: var(--emergency-main-height); padding: var(--spacing-sm) var(--emergency-main-inset); border-radius: var(--emergency-main-radius); background: var(--emergency-main-fill); color: var(--emergency-main-number-color); text-align: start; --web-focus-color: var(--palette-navy); transition: filter var(--motion-selection-millis) var(--motion-easing); }
.emergency-call:hover { filter: brightness(0.94); }
.emergency-call__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--emergency-main-icon-circle); block-size: var(--emergency-main-icon-circle); border-radius: 50%; background: var(--emergency-main-icon-circle-fill); color: var(--emergency-main-icon-tint); }
.emergency-call__icon .icon { --icon-size: var(--emergency-main-icon-size); }
.emergency-call__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--emergency-main-label-to-number); }
.emergency-call__label { color: var(--emergency-main-label-color); font: var(--emergency-main-label-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.emergency-call__number { color: var(--emergency-main-number-color); font: var(--emergency-main-number-style) var(--font-family); }
.emergency-call__pill { flex: none; display: inline-flex; align-items: center; block-size: var(--emergency-main-pill-height); padding-inline: var(--emergency-main-pill-inset); border-radius: var(--emergency-main-pill-height); background: var(--emergency-main-pill-fill); color: var(--emergency-main-pill-color); font: var(--emergency-main-pill-style) var(--font-family); }
/* That this device cannot call, or that the maps could not be opened: one line in the error colour. */
.emergency-failure { margin-block-start: var(--emergency-main-to-failure); color: var(--emergency-failure-color); font: var(--emergency-failure-style) var(--font-family); }
/* Every other number: a row, the service where reading starts and the digits at the far end. One control. */
.emergency-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--emergency-row-gap); }
.emergency-cards + .emergency-rows, .emergency-failure + .emergency-rows, .status-message + .emergency-rows { margin-block-start: var(--emergency-main-to-rows); }
.emergency-row { display: flex; align-items: center; gap: var(--emergency-row-icon-to-label); inline-size: 100%; min-block-size: var(--emergency-row-height); padding-inline: var(--emergency-row-inset); border-radius: var(--emergency-row-radius); background: var(--emergency-row-fill); text-align: start; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.emergency-row:hover { background: var(--palette-brand-outline); }
.emergency-row .icon { flex: none; --icon-size: var(--emergency-row-icon-size); color: var(--emergency-row-icon-tint); }
.emergency-row__label { flex: 1 1 0; min-inline-size: 0; color: var(--emergency-row-label-color); font: var(--emergency-row-label-style) var(--font-family); }
.emergency-row__number { flex: none; color: var(--emergency-row-number-color); font: var(--emergency-row-number-style) var(--font-family); }
.emergency-note { margin-block-start: var(--emergency-rows-to-note); color: var(--emergency-note-color); font: var(--emergency-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* A sentence: one control. The country's words large, from their own language's start; the traveller's under them. */
.emergency-phrases { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--emergency-phrase-gap); }
.emergency-phrase { display: flex; flex-direction: column; gap: var(--emergency-phrase-local-to-own); inline-size: 100%; padding: var(--emergency-phrase-inset); border-radius: var(--emergency-phrase-radius); background: var(--emergency-phrase-fill); text-align: start; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.emergency-phrase:hover { background: var(--palette-brand-outline); }
/* The sentence says its own direction (dir), so `start` is its own language's start, whichever way the page reads. */
.emergency-phrase__local { text-align: start; color: var(--emergency-phrase-local-color); font: var(--emergency-phrase-local-style) var(--font-family); line-height: 1.35; overflow-wrap: anywhere; }
.emergency-phrase__own { color: var(--emergency-phrase-own-color); font: var(--emergency-phrase-own-style) var(--font-family); line-height: var(--typography-label-tall-line); }
/* Help nearby: the kit's link rows, each in a cell of its own. */
.emergency-nearby { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--emergency-nearby-row-gap); }
/* One sentence, large, over the whole window, to be held up to somebody: a line that says so, the sentence, the
   traveller's own words, and the buttons at the foot. */
.phrase-shown { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); padding: var(--emergency-shown-inset); padding-block-end: max(var(--emergency-shown-inset), env(safe-area-inset-bottom, 0px)); background: var(--emergency-shown-background); overflow-y: auto; }
.phrase-shown__hint { color: var(--emergency-shown-hint-color); font: var(--emergency-shown-hint-style) var(--font-family); text-align: center; }
.phrase-shown__words { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--emergency-shown-local-to-own); max-inline-size: 22em; text-align: center; }
.phrase-shown__local { color: var(--emergency-shown-local-color); font-family: var(--font-family); font-weight: var(--font-weights-semi-bold); font-size: clamp(var(--emergency-shown-min-font-size), 9vw, var(--emergency-shown-max-font-size)); line-height: var(--emergency-shown-line-height-ratio); overflow-wrap: anywhere; }
.phrase-shown__own { color: var(--emergency-shown-own-color); font: var(--emergency-shown-own-style) var(--font-family); }
.phrase-shown__buttons { flex: none; display: flex; flex-direction: column; gap: var(--emergency-shown-button-gap); inline-size: 100%; max-inline-size: var(--web-sheet-width); }
.phrase-shown__no-voice { color: var(--emergency-shown-no-voice-color); font: var(--emergency-shown-no-voice-style) var(--font-family); text-align: center; }
/* "Read it aloud" and "Stop": the mark before the words, or what turns while the server's voice is fetched; and the
   line under it ("Preparing the voice...", or that the voice could not be played). */
.phrase-shown__speak { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); }
.phrase-shown__speak .icon { --icon-size: var(--emergency-speak-icon-size); }
.phrase-shown__note { color: var(--emergency-shown-no-voice-color); font: var(--emergency-shown-no-voice-style) var(--font-family); text-align: center; }
/* What turns while the server is asked: a ring with one side open, in the colour of the words beside it. */
.talk-spinner { flex: none; display: inline-block; inline-size: var(--emergency-talk-spinner-size); block-size: var(--emergency-talk-spinner-size); border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: talk-spin 0.8s linear infinite; }
@keyframes talk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .talk-spinner { animation-duration: 2.4s; } }
/* "Say something else": a field of several lines that grows with what is typed, its count and its button under it,
   then what went wrong or the translation's card. Each field's words start at its own language's side (dir). */
.emergency-talk + .emergency-talk__notice, .emergency-talk__notice { margin-block-start: var(--spacing-sm); color: var(--emergency-section-note-color); font: var(--emergency-section-note-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.emergency-talk__answer-title { margin-block-start: var(--spacing-xl); margin-block-end: var(--emergency-section-title-to-content); color: var(--emergency-section-title-color); font: var(--emergency-section-title-style) var(--font-family); }
.emergency-talk__box { padding-block: var(--spacing-sm); }
.emergency-talk__box .emergency-talk__input { min-block-size: calc(var(--emergency-talk-field-min-lines) * 1lh); max-block-size: calc(var(--emergency-talk-field-max-lines) * 1lh); line-height: var(--typography-body-loose-line); resize: none; field-sizing: content; overflow-y: auto; }
.emergency-talk__input::placeholder { color: var(--palette-text-secondary); }
.emergency-talk__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin-block-start: var(--spacing-xs); }
.emergency-talk__counter { color: var(--emergency-section-note-color); font: var(--typography-caption) var(--font-family); }
.emergency-talk__counter.is-over { color: var(--emergency-failure-color); }
.emergency-talk__send { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.emergency-talk__result { margin-block-start: var(--spacing-sm); }
@media (min-width: 768px) {
  /* Beside the sentences' two columns, a field has the panel's whole width: a sentence is typed on one line or two. */
  .emergency-talk__answer-title { margin-block-start: var(--spacing-xxl); }
}
/* A weather warning: the picture of what it is about, in the icon's box, on a dark disc that passes the box on every
   side and takes no room, so that its words start where every other card's do. */
.safety-alert__picture { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--safety-image-size); block-size: var(--safety-image-size); }
.safety-alert__picture::before { content: ""; position: absolute; inset: calc(var(--safety-image-backing-overhang) * -1); border-radius: 50%; background: var(--safety-image-backing-fill); }
.safety-alert__picture img { position: relative; inline-size: 100%; block-size: 100%; object-fit: contain; }
/* While the customer's eSIMs are read: empty shapes where the country and its numbers will be. */
.placeholder--emergency-country { block-size: var(--weather-row-height); border-radius: var(--weather-row-radius); background: var(--weather-placeholder-fill); }
.placeholder--emergency-call { block-size: var(--emergency-main-height); border-radius: var(--emergency-main-radius); background: var(--weather-placeholder-fill); }
.placeholder--emergency-row { block-size: var(--emergency-row-height); border-radius: var(--emergency-row-radius); background: var(--weather-placeholder-fill); }
.emergency-waiting { display: flex; flex-direction: column; gap: var(--emergency-card-gap); }
/* A country's row in the list of countries has one line where a city's has two. */
.weather-city__text > :only-child { align-self: flex-start; }
@media (min-width: 768px) {
  .emergency__parts { gap: var(--spacing-lg); }
  /* In a panel a part's title stands a little further over what it names. */
  .companion-panel > .companion-section__body { margin-block-start: var(--spacing-md); }
  /* Three numbers to remember stand side by side; one takes the row. */
  .emergency-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr)); gap: var(--spacing-sm); }
  /* Side by side a card is narrower than a phone's: its glyph and "Call" share the top row, and the services and the
     digits have the card's whole width under them, so that no word of any language is cut. */
  .emergency-cards:has(> .emergency-call + .emergency-call) .emergency-call { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon pill" "text text"; align-items: center; row-gap: var(--spacing-sm); padding: var(--spacing-md); }
  .emergency-cards:has(> .emergency-call + .emergency-call) .emergency-call__icon { grid-area: icon; }
  .emergency-cards:has(> .emergency-call + .emergency-call) .emergency-call__pill { grid-area: pill; justify-self: end; }
  .emergency-cards:has(> .emergency-call + .emergency-call) .emergency-call__text { grid-area: text; }
  .emergency-rows, .emergency-phrases, .emergency-nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-sm); }
  /* The sentence held up on a wide window: larger still. */
  .phrase-shown__local { font-size: clamp(var(--emergency-shown-max-font-size), 6vw, calc(var(--emergency-shown-max-font-size) * 1.75)); }
  .phrase-shown__own { font: var(--typography-title) var(--font-family); }
  /* With no country to show, the one message stands alone in the middle. */
  .emergency--alone { max-inline-size: 640px; margin-inline: auto; }
}
@media (min-width: 1100px) {
  .emergency--alone { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   11h. Safety and scams: SafetyScreen.kt. Not drawn by the designer. On a phone
        the apps' screen: the country, the card offering notifications when
        there is one, the alerts in force, each with its source, then the
        country's scam page. From a tablet up each part is a white panel, the
        tricks two across; on a desktop the country stays in view beside them.
   ========================================================================== */

.safety { align-items: start; }
.safety__updated { margin-block-start: var(--safety-section-title-to-updated); color: var(--safety-updated-color); font: var(--safety-updated-style) var(--font-family); }
.safety-alerts { display: flex; flex-direction: column; gap: var(--safety-card-gap); }
/* An alert: a card with a band of its grade's colour down the edge where reading starts. Not a control; its source's link is. */
.safety-alert { --_accent: var(--safety-grade-color-info); position: relative; overflow: hidden; padding: var(--safety-card-padding); padding-inline-start: calc(var(--safety-card-padding) + var(--safety-band-width)); border-radius: var(--safety-card-radius); background: var(--safety-card-fill); scroll-margin-block-start: calc(var(--web-header-height) + var(--spacing-lg)); }
.safety-alert::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--safety-band-width); background: var(--_accent); }
.safety-alert--warning { --_accent: var(--safety-grade-color-warning); }
.safety-alert--danger { --_accent: var(--safety-grade-color-danger); }
/* The alert a notification was about: a ring of its grade's colour. */
.safety-alert.is-highlighted { box-shadow: inset 0 0 0 var(--safety-highlight-width) var(--_accent); }
.safety-alert__label { display: flex; align-items: center; gap: var(--safety-icon-to-label); color: var(--_accent); font: var(--safety-label-style) var(--font-family); }
.safety-alert__label .icon { flex: none; --icon-size: var(--safety-icon-size); }
.safety-alert__title { margin-block-start: var(--safety-label-to-title); color: var(--safety-title-color); font: var(--safety-title-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.safety-alert__body { margin-block-start: var(--safety-title-to-body); max-inline-size: 78ch; color: var(--safety-body-color); font: var(--safety-body-style) var(--font-family); line-height: var(--typography-label-tall-line); white-space: pre-line; }
.safety-alert__unconfirmed { margin-block-start: var(--safety-body-to-line); color: var(--_accent); font: var(--safety-unconfirmed-style) var(--font-family); }
.safety-alert__line { margin-block-start: var(--safety-body-to-line); color: var(--safety-line-color); font: var(--safety-line-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* Where an alert, or the scam page, comes from: the source's own name, its licence line, and the link to its page. */
.safety-source { display: flex; flex-direction: column; align-items: flex-start; }
.safety-alert .safety-source { margin-block-start: var(--safety-lines-to-source); padding-block-start: var(--safety-rule-to-source); border-block-start: 1px solid var(--safety-source-rule); }
.safety-source__name { color: var(--safety-source-color); font: var(--safety-source-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.safety-source__licence { color: var(--safety-licence-color); font: var(--safety-licence-style) var(--font-family); }
.safety-link { display: inline-flex; align-items: center; gap: var(--spacing-xxs); min-block-size: var(--safety-link-min-height); color: var(--safety-link-color); font: var(--safety-link-style) var(--font-family); }
.safety-link:hover { color: var(--palette-brand-shade); }
.safety-link .icon { flex: none; --icon-size: var(--safety-link-icon-size); }
.safety-authorities { margin-block-start: var(--safety-alerts-to-authorities); color: var(--safety-authorities-color); font: var(--safety-authorities-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.safety-waiting { display: flex; flex-direction: column; gap: var(--safety-card-gap); }
.placeholder--safety { block-size: var(--safety-placeholder-height); border-radius: var(--safety-card-radius); background: var(--safety-placeholder-fill); }
/* The scam page: where it comes from, a card a trick, the general advice on the brand's wash, the sources, when it was checked. */
.scam-intro { color: var(--safety-intro-color); font: var(--safety-intro-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.scam-intro + .safety-alert__line { margin-block-start: var(--spacing-xxs); }
.scam-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--safety-card-gap); margin-block-start: var(--safety-intro-to-items); }
.scam-item { padding: var(--safety-card-padding); border-radius: var(--safety-card-radius); background: var(--safety-card-fill); }
.scam-item__title { color: var(--safety-item-title-color); font: var(--safety-item-title-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.scam-item__label { margin-block-start: var(--safety-part-gap); color: var(--safety-part-label-color); font: var(--safety-part-label-style) var(--font-family); }
.scam-item__title + .scam-item__label { margin-block-start: var(--safety-item-title-to-part); }
.scam-item__text { margin-block-start: var(--safety-part-label-to-text); color: var(--safety-part-text-color); font: var(--safety-part-text-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.scam-item__sources { margin-block-start: var(--safety-part-gap); color: var(--safety-item-sources-color); font: var(--safety-item-sources-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.scam-none { margin-block-start: var(--safety-intro-to-items); color: var(--safety-part-text-color); font: var(--safety-part-text-style) var(--font-family); }
.scam-general { margin-block-start: var(--safety-items-to-general); padding: var(--safety-card-padding); border-radius: var(--safety-card-radius); background: var(--safety-general-fill); }
.scam-general__title { color: var(--safety-general-title-color); font: var(--safety-general-title-style) var(--font-family); }
.scam-general__text { margin-block-start: var(--safety-part-label-to-text); max-inline-size: 78ch; color: var(--safety-general-color); font: var(--safety-general-style) var(--font-family); line-height: var(--typography-label-tall-line); white-space: pre-line; }
.scam-sources { margin-block-start: var(--safety-general-to-sources); }
.scam-sources__title { color: var(--safety-item-title-color); font: var(--safety-item-title-style) var(--font-family); }
.scam-sources__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--safety-source-row-gap); margin-block-start: var(--safety-item-title-to-part); }
.scam-sources__list .safety-source { padding: var(--spacing-sm) var(--safety-card-padding) 0; border-radius: var(--radius-md); background: var(--safety-card-fill); }
.scam-checked { margin-block-start: var(--safety-sources-to-checked); color: var(--safety-checked-color); font: var(--safety-checked-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* That a source's page could not be opened: one line at the foot of the page. */
.safety-failure { color: var(--safety-failure-color); font: var(--safety-failure-style) var(--font-family); }
@media (min-width: 768px) {
  .scam-items, .scam-sources__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-sm); }
  .scam-item:only-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   11i. What lives in the apps: the travel vault (VaultStageUi.Message with no
        vault handed over) and the room scan. A page cannot keep a document
        behind the phone's lock, or look at the Wi-Fi a phone is on: each
        page says so in one sentence, and points to the app.
   ========================================================================== */

.in-app { display: flex; flex-direction: column; align-items: center; max-inline-size: 640px; margin-inline: auto; padding-block: var(--vault-panel-top) var(--spacing-xl); text-align: center; }
.in-app__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--vault-panel-icon-circle); block-size: var(--vault-panel-icon-circle); border-radius: 50%; background: var(--vault-panel-icon-fill); color: var(--vault-panel-icon-tint); }
.in-app__icon .icon { --icon-size: var(--vault-panel-icon-size); }
.in-app__icon img { inline-size: 62%; block-size: 62%; object-fit: contain; }
.in-app__title { margin-block-start: var(--vault-panel-icon-to-title); color: var(--vault-panel-title-color); font: var(--vault-panel-title-style) var(--font-family); }
.in-app__detail { max-inline-size: 52ch; margin-block-start: var(--vault-panel-title-to-body); color: var(--vault-panel-body-color); font: var(--vault-panel-body-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.in-app__ways { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); inline-size: 100%; max-inline-size: var(--web-sheet-width); margin-block-start: var(--vault-panel-body-to-button); }
.in-app__limits { color: var(--palette-text-secondary); font: var(--typography-caption) var(--font-family); line-height: var(--typography-caption-loose-line); }
@media (min-width: 768px) {
  .in-app { padding: calc(var(--spacing-xxl) * 1.5) var(--spacing-xxl); }
}

/* ==========================================================================
   11j. The trip planner's card that suggests taking the city offline in a
        maps app (TripOfflineMapUi): OfflineMapCard in TripPlannerScreen.kt.
        Not drawn by the designer.
   ========================================================================== */

.offline-map { margin-block-start: var(--trip-planner-offline-card-to-top); padding: var(--trip-planner-offline-inset); border-radius: var(--trip-planner-offline-radius); background: var(--trip-planner-offline-fill); }
.offline-map__head { display: flex; align-items: center; gap: var(--trip-planner-offline-icon-to-title); }
.offline-map__head > .icon { flex: none; --icon-size: var(--trip-planner-offline-icon-size); color: var(--trip-planner-offline-icon-tint); }
.offline-map__title { flex: 1 1 0; min-inline-size: 0; color: var(--trip-planner-offline-title-color); font: var(--trip-planner-offline-title-style) var(--font-family); }
.offline-map__close { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sizing-min-touch-target); block-size: var(--sizing-min-touch-target); margin: calc((var(--sizing-min-touch-target) - var(--trip-planner-offline-close-size)) / -2); border-radius: 50%; color: var(--trip-planner-offline-close-tint); }
.offline-map__close:hover { color: var(--palette-brand); }
.offline-map__close .icon { --icon-size: var(--trip-planner-offline-close-size); }
.offline-map__body { margin-block-start: var(--trip-planner-offline-title-to-body); color: var(--trip-planner-offline-body-color); font: var(--trip-planner-offline-body-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.offline-map__app { margin-block-start: var(--trip-planner-offline-app-gap); }
.offline-map__body + .offline-map__app { margin-block-start: var(--trip-planner-offline-body-to-app); }
.offline-map__steps { display: flex; flex-direction: column; gap: var(--trip-planner-offline-step-gap); margin-block-start: var(--trip-planner-offline-button-to-steps); color: var(--trip-planner-offline-step-color); font: var(--trip-planner-offline-step-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.offline-map__step { display: flex; gap: var(--spacing-xs); }
.offline-map__number { flex: none; color: var(--trip-planner-offline-step-number-color); font-weight: var(--font-weights-semi-bold); }
.offline-map__message { margin-block-start: var(--trip-planner-offline-to-message); color: var(--trip-planner-offline-message-color); font: var(--trip-planner-offline-message-style) var(--font-family); }

/* In a frame of the states, which stands for a phone's window: the sentence held up fills its frame, not the window,
   and the parts that spread on a wide page keep their phone form. */
.companion-state__frame .phrase-shown { position: relative; inset: auto; z-index: auto; min-block-size: 440px; }
.companion-state__frame .phrase-shown__local { font-size: calc(var(--emergency-shown-min-font-size) * 1.4); }
.companion-state__frame .phrase-shown__own { font: var(--emergency-shown-own-style) var(--font-family); }
.companion-state__frame .emergency-rows, .companion-state__frame .emergency-phrases, .companion-state__frame .emergency-nearby,
.companion-state__frame .scam-items, .companion-state__frame .scam-sources__list, .companion-state__frame .saved__cards, .companion-state__frame .saved__notes { grid-template-columns: minmax(0, 1fr); }
.companion-state__frame .emergency-cards { grid-template-columns: minmax(0, 1fr); }
.companion-state--wide .companion-state__frame .emergency-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr)); }
.companion-state--wide .companion-state__frame .scam-items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.companion-state__frame .companion-panel { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.companion-state__frame .companion-panel + .companion-panel, .companion-state__frame .status-message + .status-message, .companion-state__frame .notification-offer + .notification-offer { margin-block-start: var(--spacing-lg); }
.companion-state__frame .in-app { padding-block: var(--spacing-xl); }
/* In a frame of the states, which is as narrow as a phone whatever the window, the weather keeps its phone form. */
.companion-state__frame .weather-now { gap: var(--weather-now-text-to-image); padding: var(--weather-now-inset); }
.companion-state__frame .weather-now__temperature { font: var(--weather-now-temperature-style) var(--font-family); }
.companion-state__frame .weather-now__sky { font: var(--weather-now-sky-style) var(--font-family); }
.companion-state__frame .weather-now__picture { inline-size: var(--weather-now-image-size); block-size: var(--weather-now-image-size); }
.companion-state__frame .weather-days, .companion-state__frame .weather-waiting__days { display: flex; flex-direction: column; }
.companion-state__frame .weather-waiting__days { gap: var(--weather-placeholder-day-gap); }
.companion-state__frame .placeholder--weather-day { block-size: var(--weather-placeholder-day-height); border-radius: var(--weather-placeholder-radius); }
.companion-state__frame .weather-day { grid-template-columns: var(--weather-day-image-size) var(--weather-day-name-width) minmax(0, 1fr) var(--weather-day-figure-width) var(--weather-day-figure-width); grid-template-areas: "picture when sky high low"; justify-items: stretch; row-gap: 0; column-gap: 0; padding: var(--spacing-xs) 0; border-radius: 0; background: none; text-align: start; }
.companion-state__frame .weather-day + .weather-day { border-block-start: var(--weather-day-separator-height) solid var(--weather-day-separator-color); }
.companion-state__frame .weather-day__when { align-items: stretch; margin-inline-start: var(--weather-day-image-to-name); }
.companion-state__frame .weather-day__picture { inline-size: var(--weather-day-image-size); block-size: var(--weather-day-image-size); margin-block: 0; }
.companion-state__frame .weather-day__sky { margin-inline-start: var(--weather-day-name-to-sky); min-block-size: 0; text-align: start; }
.companion-state__frame .weather-day__high, .companion-state__frame .weather-day__low { justify-self: stretch; }

/* ==========================================================================
   12. One colour per kind of place: CompanionLook.color. Last, so that a kind
       said on a component wins over the component's own grey.
   ========================================================================== */

.is-restaurant { --_color: var(--palette-place-restaurant); }
.is-bank { --_color: var(--palette-place-bank); }
.is-coffee { --_color: var(--palette-place-coffee); }
.is-transport { --_color: var(--palette-place-transport); }
.is-pharmacy { --_color: var(--palette-positive); }
.is-sight { --_color: var(--palette-place-landmark); }
.is-walk { --_color: var(--palette-positive); }
.is-other { --_color: var(--palette-text-secondary); }

/* ==== The companion's services (Figma website 2377:2906, cards 2424:2577), drawn by
   screens/companion/CompanionMenuScreen with the kit's parts; what the kit does not have is here. ==== */
.site-page { background: var(--palette-background); }
.site-page__body { display: flex; flex-direction: column; gap: calc(var(--spacing-xl) * 1.5); padding-block-end: calc(var(--spacing-xl) * 2); }
.site-section { scroll-margin-block-start: calc(var(--web-header-height) + var(--spacing-md)); }

/* The tools as picture cards. */
.companion-card { position: relative; align-items: stretch; }
.companion-card__inner { display: contents; }
.companion-card__top { position: relative; display: block; }
.companion-card__soon { position: absolute; inset-block-start: var(--spacing-sm); inset-inline-start: var(--spacing-sm); padding: 2px var(--spacing-sm); border-radius: var(--radius-md); background: var(--palette-background); color: var(--palette-brand); font: var(--typography-caption) var(--font-family); }
.companion-card.is-disabled { opacity: 0.55; }
.companion-cards + .companion-menu__saved { margin-block-start: var(--spacing-lg); }

/* The light band: the phones with the three chips over them, from a tablet up. */
.companion-phones__art { display: none; }
.companion-phase { display: flex; flex-direction: column; gap: 2px; max-inline-size: 190px; padding: var(--spacing-sm); border-radius: var(--radius-md); background: var(--palette-background); box-shadow: var(--shadow-card-lift); }
.companion-phase__title { color: var(--palette-text-emphasis); font: var(--typography-caption) var(--font-family); font-weight: var(--font-weights-bold); }
.companion-phase__line { color: var(--palette-text-secondary); font: var(--typography-caption) var(--font-family); }

@media (min-width: 768px) {
  .companion-phones { flex-direction: row; align-items: center; gap: var(--spacing-xl); }
  .companion-phones .picture-band__body { flex: 1 1 0; }
  .companion-phones__art { position: relative; display: block; flex: 1 1 0; align-self: stretch; min-block-size: 320px; }
  .companion-phones__picture { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .companion-phase { position: absolute; }
  .companion-phase--before { inset-block-end: 20%; inset-inline-end: 0; }
  .companion-phase--during { inset-block-start: 5%; inset-inline-start: 10%; }
  .companion-phase--need { inset-block-end: 5%; inset-inline-start: 0; }
}