/* ==== tokens: written by pages/esims/tokens.py, do not edit ==== */
:root {
/* ---- Esims: design/component/EsimListTokens.kt, object EsimsTokens ---- */
--esims-background: var(--palette-background);
--esims-side-inset: var(--spacing-screen-margin);
--esims-picture-height: 250px;
--esims-picture-bottom-radius: var(--radius-lg);
--esims-fade-color: var(--palette-brand);
--esims-fade-start: 0.315;
--esims-fade-end: 0.8;
--esims-fade-end-opacity: 0.9;
--esims-back-size: 16px;
--esims-back-top: 18px;
--esims-back-leading-inset: 15px;
--esims-back-tint: var(--palette-on-brand);
--esims-back-touch-target: var(--sizing-min-touch-target);
--esims-back-to-greeting: 15px;
--esims-greeting-style: var(--typography-body);
--esims-greeting-color: var(--palette-on-brand);
--esims-greeting-to-title: var(--spacing-sm);
--esims-title-style: var(--typography-headline-bold);
--esims-title-color: var(--palette-on-brand);
--esims-title-to-tabs: 25px;
--esims-tabs-to-header-end: 20px;
--esims-header-to-first-card: 20px;
--esims-card-gap: 40px;
--esims-last-card-to-bar: 20px;
--esims-header-to-message: 40px;
--esims-placeholder-count: 2;
--esims-placeholder-height: 398px;
--esims-placeholder-radius: var(--radius-card);
--esims-placeholder-fill: var(--palette-surface);
/* ---- EsimDetail: design/component/EsimListTokens.kt, object EsimDetailTokens ---- */
--esim-detail-background: var(--palette-background);
--esim-detail-side-inset: var(--spacing-screen-margin);
--esim-detail-to-notice: var(--spacing-sm);
--esim-detail-to-heading: 15px;
--esim-detail-to-notes: 15px;
--esim-detail-to-connection: 15px;
--esim-detail-to-support: var(--spacing-xs);
--esim-detail-to-buttons: 20px;
--esim-detail-button-gap: var(--spacing-sm);
--esim-detail-bottom-inset: 20px;
--esim-detail-placeholder-count: 2;
--esim-detail-placeholder-height: 154px;
--esim-detail-placeholder-radius: var(--radius-md);
--esim-detail-placeholder-gap: 46px;
--esim-detail-placeholder-fill: var(--palette-surface);
/* ---- EsimManage: design/component/EsimTokens.kt, object EsimManageTokens ---- */
--esim-manage-background: var(--palette-background);
--esim-manage-side-inset: var(--spacing-screen-margin);
--esim-manage-header-to-card: var(--spacing-lg);
--esim-manage-placeholder-card-height: 143px;
--esim-manage-placeholder-card-radius: var(--radius-card);
--esim-manage-flag-top: 11px;
--esim-manage-flag-size: 50px;
--esim-manage-pill-top: 11px;
--esim-manage-badge-fill: var(--palette-brand-wash);
--esim-manage-badge-tint: var(--palette-brand);
--esim-manage-badge-icon-size: 24px;
--esim-manage-flag-to-name: 20px;
--esim-manage-name-style: var(--typography-heading);
--esim-manage-name-color: var(--palette-text-emphasis);
--esim-manage-name-to-summary: 20px;
--esim-manage-to-rows: 20px;
--esim-manage-placeholder-fill: var(--palette-surface);
--esim-manage-placeholder-summary-height: 75px;
--esim-manage-placeholder-summary-radius: var(--radius-card);
--esim-manage-min-name-scale: var(--sizing-min-text-scale);
/* ---- TopUpSheet: design/component/EsimTokens.kt, object TopUpSheetTokens ---- */
--top-up-sheet-height-fraction: 0.6;
--top-up-sheet-list-top: 62px;
--top-up-sheet-list-inset: var(--spacing-lg);
--top-up-sheet-row-gap: var(--spacing-sm);
--top-up-sheet-row-height: 60px;
--top-up-sheet-row-radius: 15px;
--top-up-sheet-row-fill: var(--palette-surface);
--top-up-sheet-label-inset: var(--spacing-lg);
--top-up-sheet-label-style: var(--typography-title);
--top-up-sheet-label-color: var(--palette-text-emphasis);
--top-up-sheet-price-to-mark: var(--spacing-sm);
--top-up-sheet-price-style: var(--typography-body-strong);
--top-up-sheet-price-color: var(--palette-brand);
--top-up-sheet-mark-size: 24px;
--top-up-sheet-mark-inset: var(--spacing-lg);
--top-up-sheet-mark-off-fill: var(--palette-background);
--top-up-sheet-list-to-button: var(--spacing-lg);
--top-up-sheet-button-height: 70px;
--top-up-sheet-button-radius: 22px;
--top-up-sheet-button-horizontal-padding: 50px;
--top-up-sheet-button-fill: var(--palette-brand);
--top-up-sheet-button-label-color: var(--palette-on-brand);
--top-up-sheet-button-label-style: var(--typography-button);
--top-up-sheet-button-inset: var(--spacing-lg);
--top-up-sheet-placeholder-count: 3;
/* ---- EsimNameSheet: design/component/EsimNameSheetTokens.kt, object EsimNameSheetTokens ---- */
--esim-name-sheet-text-inset: var(--spacing-lg);
--esim-name-sheet-title-top: 30px;
--esim-name-sheet-title-style: var(--typography-screen-title);
--esim-name-sheet-title-color: var(--palette-text-emphasis);
--esim-name-sheet-title-to-line: 10px;
--esim-name-sheet-line-style: var(--typography-label);
--esim-name-sheet-line-color: var(--palette-text-muted);
--esim-name-sheet-line-to-field: var(--spacing-lg);
--esim-name-sheet-field-inset: var(--spacing-lg);
--esim-name-sheet-field-to-note: var(--spacing-sm);
--esim-name-sheet-note-style: var(--typography-caption);
--esim-name-sheet-note-color: var(--palette-text-muted);
--esim-name-sheet-note-max-lines: 4;
--esim-name-sheet-field-to-button: var(--spacing-lg);
--esim-name-sheet-keyboard-gap: var(--spacing-sm);
/* ---- Install: design/component/InstallTokens.kt, object InstallTokens ---- */
--install-background: var(--palette-background);
--install-side-inset: var(--spacing-screen-margin);
--install-title-to-content: 30px;
--install-section-gap: 15px;
--install-bottom-inset: var(--spacing-lg);
--install-card-radius: var(--radius-pill);
--install-card-fill: var(--palette-surface);
--install-card-padding: 15px;
--install-title-style: var(--typography-title-bold);
--install-title-color: var(--palette-text-emphasis);
--install-title-to-body: var(--spacing-xs);
--install-body-style: var(--typography-label);
--install-body-color: var(--palette-text-muted);
--install-body-to-content: 15px;
--install-body-to-support: var(--spacing-xs);
--install-support-style: var(--typography-label-strong);
--install-support-color: var(--palette-text-emphasis);
--install-placeholder-count: 3;
--install-placeholder-height: 120px;
--install-placeholder-radius: var(--radius-pill);
--install-placeholder-fill: var(--palette-surface);
--install-button-height: 60px;
--install-button-radius: var(--radius-md);
--install-button-horizontal-padding: 50px;
--install-button-fill: var(--palette-brand);
--install-button-label-color: var(--palette-on-brand);
--install-button-label-style: var(--typography-body-strong);
--install-button-to-message: var(--spacing-sm);
--install-message-style: var(--typography-label);
--install-message-color: var(--palette-text-emphasis);
--install-qr-size: 200px;
--install-qr-padding: 15px;
--install-qr-radius: var(--radius-md);
--install-qr-background: var(--palette-background);
--install-qr-module-color: var(--palette-black);
--install-code-row-height: 60px;
--install-code-row-radius: var(--radius-md);
--install-code-row-fill: var(--palette-background);
--install-code-row-inset: 15px;
--install-code-row-gap: var(--spacing-sm);
--install-code-label-style: var(--typography-caption);
--install-code-label-color: var(--palette-text-secondary);
--install-code-label-to-value: 4px;
--install-code-value-style: var(--typography-label-strong);
--install-code-value-color: var(--palette-text-emphasis);
--install-copy-style: var(--typography-label-bold);
--install-copy-color: var(--palette-brand);
--install-to-note: var(--spacing-sm);
--install-note-style: var(--typography-caption-medium);
--install-note-color: var(--palette-text-muted);
/* ---- QrSheet: design/component/QrSheetTokens.kt, object QrSheetTokens ---- */
--qr-sheet-text-inset: var(--spacing-lg);
--qr-sheet-glyph-size: 40px;
--qr-sheet-glyph-top: 31px;
--qr-sheet-glyph-tint: var(--palette-brand);
--qr-sheet-glyph-to-title: 10px;
--qr-sheet-title-style: var(--typography-screen-title);
--qr-sheet-title-color: var(--palette-text-emphasis);
--qr-sheet-title-to-line: 10px;
--qr-sheet-line-style: var(--typography-label);
--qr-sheet-line-color: var(--palette-text-muted);
--qr-sheet-line-to-qr: 30px;
--qr-sheet-qr-size: 180px;
--qr-sheet-qr-padding: 0px;
--qr-sheet-qr-radius: 0px;
--qr-sheet-qr-background: var(--palette-background);
--qr-sheet-qr-module-color: var(--palette-black);
--qr-sheet-qr-free-band: 20px;
--qr-sheet-usual-modules: 37;
--qr-sheet-qr-to-note: 20px;
--qr-sheet-note-style: var(--typography-caption-medium);
--qr-sheet-note-color: var(--palette-text-muted);
--qr-sheet-note-to-message: 6px;
--qr-sheet-message-style: var(--typography-caption-medium);
--qr-sheet-message-color: var(--palette-error);
--qr-sheet-to-button: 30px;
/* ---- QrPicture: design/component/QrSheetTokens.kt, object QrPictureTokens ---- */
--qr-picture-size-pixels: 1024;
--qr-picture-quiet-zone-modules: 4;
--qr-picture-background: var(--palette-background);
--qr-picture-module-color: var(--palette-black);
/* ---- PackageDisc: design/component/PackageDiscTokens.kt, object PackageDiscTokens ---- */
--package-disc-size: 40px;
--package-disc-icon-size: 20px;
--package-disc-on-brand-fill: var(--palette-brand);
--package-disc-on-brand-tint: var(--palette-on-brand);
--package-disc-on-brand-icon-size: 20px;
--package-disc-on-white-fill: var(--palette-background);
--package-disc-on-white-tint: var(--palette-brand);
--package-disc-on-white-icon-size: 20px;
--package-disc-whole-fill: var(--palette-background);
--package-disc-whole-tint: var(--palette-brand);
--package-disc-whole-icon-size: 40px;
/* ---- UsageStats: design/component/UsageStatsTokens.kt, object UsageStatsTokens ---- */
--usage-stats-background: var(--palette-background);
--usage-stats-side-inset: var(--spacing-screen-margin);
--usage-stats-name-to-ring: 20px;
--usage-stats-ring-size: 170px;
--usage-stats-ring-stroke: 17px;
--usage-stats-ring-track: var(--palette-surface);
--usage-stats-ring-arc-end-degrees: 0px;
--usage-stats-full-turn: 360px;
--usage-stats-ring-arc-low: var(--palette-brand);
--usage-stats-ring-arc-medium: var(--palette-warning);
--usage-stats-ring-arc-high: var(--palette-error);
--usage-stats-ring-share-style: var(--typography-stat-number);
--usage-stats-ring-sign-style: var(--typography-stat-sign);
--usage-stats-ring-share-color: var(--palette-text-emphasis);
--usage-stats-ring-share-to-caption: 6px;
--usage-stats-ring-caption-style: var(--typography-micro);
--usage-stats-ring-caption-color: var(--palette-text-emphasis);
--usage-stats-ring-caption-max-width: 110px;
--usage-stats-ring-to-tiles: 20px;
--usage-stats-tile-gap: var(--spacing-sm);
--usage-stats-tile-height: 115px;
--usage-stats-tile-radius: var(--radius-card);
--usage-stats-tile-fill: var(--palette-surface);
--usage-stats-tile-inset: 15px;
--usage-stats-tile-label-top: 15px;
--usage-stats-tile-label-style: var(--typography-subhead);
--usage-stats-tile-label-color: var(--palette-text-emphasis);
--usage-stats-tile-amount-top: 44px;
--usage-stats-tile-amount-style: var(--typography-stat-number);
--usage-stats-tile-unit-style: var(--typography-stat-unit);
--usage-stats-tile-amount-gap: 8px;
--usage-stats-tile-color-used: var(--palette-violet);
--usage-stats-tile-color-remaining: var(--palette-positive);
--usage-stats-tile-share-top: 87px;
--usage-stats-tile-share-style: var(--typography-label-strong);
--usage-stats-tile-share-color: var(--palette-text-emphasis);
--usage-stats-tile-icon-top: 15px;
--usage-stats-tile-icon-width: 40px;
--usage-stats-tile-icon-height: 32px;
--usage-stats-tiles-to-panel: 20px;
--usage-stats-panel-radius: var(--radius-md);
--usage-stats-panel-fill: var(--palette-surface);
--usage-stats-panel-inset: 10px;
--usage-stats-bar-to-ends: var(--spacing-sm);
--usage-stats-end-word-style: var(--typography-label-regular);
--usage-stats-end-amount-style: var(--typography-label-bold);
--usage-stats-end-color: var(--palette-text-emphasis);
--usage-stats-ends-to-note: 15px;
--usage-stats-note-min-height: 30px;
--usage-stats-note-radius: 15px;
--usage-stats-note-padding-horizontal: 15px;
--usage-stats-note-padding-vertical: 8px;
--usage-stats-note-fill: var(--palette-text-emphasis);
--usage-stats-note-style: var(--typography-caption);
--usage-stats-note-color: var(--palette-on-brand);
--usage-stats-to-heading: 15px;
--usage-stats-heading-icon-width: 30px;
--usage-stats-heading-icon-height: 28px;
--usage-stats-heading-icon-tint: var(--palette-brand);
--usage-stats-heading-icon-to-title: var(--spacing-sm);
--usage-stats-heading-style: var(--typography-title-bold);
--usage-stats-heading-color: var(--palette-brand);
--usage-stats-heading-to-ranges: 15px;
--usage-stats-range-height: 30px;
--usage-stats-range-gap: var(--spacing-xs);
--usage-stats-range-track-fill: var(--palette-surface);
--usage-stats-range-selected-fill: var(--palette-brand);
--usage-stats-range-label-style: var(--typography-label);
--usage-stats-range-selected-label-color: var(--palette-on-brand);
--usage-stats-range-label-color: var(--palette-text-emphasis-faint);
--usage-stats-range-touch-target: var(--sizing-min-touch-target);
--usage-stats-ranges-to-chart: 15px;
--usage-stats-chart-scale-width: 37px;
--usage-stats-chart-mark-to-axis: 5px;
--usage-stats-chart-plot-height: 108px;
--usage-stats-chart-scale-height: 102px;
--usage-stats-chart-line-width: 1px;
--usage-stats-chart-line-color: var(--palette-text-emphasis);
--usage-stats-chart-mark-style: var(--typography-micro);
--usage-stats-chart-mark-color: var(--palette-text-emphasis);
--usage-stats-chart-bar-width-share: 0.7;
--usage-stats-chart-bar-max-width: 35px;
--usage-stats-chart-bar-top-radius: 10px;
--usage-stats-chart-bar-top: var(--palette-brand);
--usage-stats-chart-bar-foot: var(--palette-brand-faint);
--usage-stats-chart-figure-to-bar: 3px;
--usage-stats-chart-figure-style: var(--typography-caption-bold);
--usage-stats-chart-figure-color: var(--palette-text-emphasis);
--usage-stats-chart-line-to-labels: 10px;
--usage-stats-chart-label-style: var(--typography-micro);
--usage-stats-chart-label-color: var(--palette-text-emphasis);
--usage-stats-chart-labels-to-note: 6px;
--usage-stats-chart-note-style: var(--typography-micro);
--usage-stats-chart-note-color: var(--palette-text-emphasis);
--usage-stats-chart-height: 130px;
--usage-stats-chart-to-stats: 20px;
--usage-stats-stat-gap: var(--spacing-xs);
--usage-stats-stat-height: 55px;
--usage-stats-stat-radius: var(--radius-md);
--usage-stats-stat-fill: var(--palette-brand-wash);
--usage-stats-stat-square-inset: 5px;
--usage-stats-stat-square-size: 30px;
--usage-stats-stat-square-radius: var(--radius-xs);
--usage-stats-stat-glyph-tint: var(--palette-on-brand);
--usage-stats-stat-square-fill-days-left: var(--palette-positive);
--usage-stats-stat-square-fill-highest: var(--palette-violet);
--usage-stats-stat-square-fill-average: var(--palette-warning);
--usage-stats-stat-glyph-width-days-left: 13px;
--usage-stats-stat-glyph-width-highest: 18px;
--usage-stats-stat-glyph-width-average: 18px;
--usage-stats-stat-glyph-height-days-left: 14px;
--usage-stats-stat-glyph-height-highest: 10px;
--usage-stats-stat-glyph-height-average: 18px;
--usage-stats-stat-square-to-text: var(--spacing-sm);
--usage-stats-stat-label-top: 8px;
--usage-stats-stat-label-style: var(--typography-caption-medium);
--usage-stats-stat-label-color: var(--palette-text-emphasis);
--usage-stats-stat-value-top: 27px;
--usage-stats-stat-value-style: var(--typography-button);
--usage-stats-stat-value-color: var(--palette-text-emphasis);
--usage-stats-stats-to-forecast: 20px;
--usage-stats-forecast-height: 50px;
--usage-stats-forecast-radius: var(--radius-md);
--usage-stats-forecast-fill: var(--palette-text-emphasis);
--usage-stats-forecast-inset: 15px;
--usage-stats-forecast-icon-size: 20px;
--usage-stats-forecast-icon-tint: var(--palette-on-brand);
--usage-stats-forecast-icon-to-text: var(--spacing-sm);
--usage-stats-forecast-style: var(--typography-caption-medium);
--usage-stats-forecast-color: var(--palette-on-brand);
--usage-stats-forecast-arrow-width: 20px;
--usage-stats-forecast-arrow-height: 15px;
--usage-stats-forecast-arrow-tint: var(--palette-placeholder);
--usage-stats-to-buttons: 20px;
--usage-stats-button-gap: var(--spacing-sm);
--usage-stats-bottom-inset: 20px;
--usage-stats-placeholder-fill: var(--palette-surface);
--usage-stats-placeholder-panel-height: 111px;
/* ---- EsimAlerts: design/component/EsimAlertsTokens.kt, object EsimAlertsTokens ---- */
--esim-alerts-background: var(--palette-background);
--esim-alerts-side-inset: var(--spacing-screen-margin);
--esim-alerts-header-to-intro: var(--spacing-lg);
--esim-alerts-intro-style: var(--typography-label);
--esim-alerts-intro-color: var(--palette-text-secondary);
--esim-alerts-intro-to-cards: var(--spacing-lg);
--esim-alerts-card-gap: var(--spacing-sm);
--esim-alerts-card-radius: var(--radius-card);
--esim-alerts-card-fill: var(--palette-surface);
--esim-alerts-card-padding: var(--spacing-lg);
--esim-alerts-icon-size: 24px;
--esim-alerts-icon-tint: var(--palette-brand);
--esim-alerts-icon-to-text: var(--spacing-sm);
--esim-alerts-title-style: var(--typography-body-medium);
--esim-alerts-title-color: var(--palette-text-emphasis);
--esim-alerts-title-to-trigger: var(--spacing-xs);
--esim-alerts-trigger-style: var(--typography-caption-medium);
--esim-alerts-trigger-color: var(--palette-text-secondary);
--esim-alerts-pill-height: 24px;
--esim-alerts-pill-radius: var(--radius-chip);
--esim-alerts-pill-padding: var(--spacing-sm);
--esim-alerts-pill-label-style: var(--typography-caption-strong);
--esim-alerts-pill-on-fill: var(--palette-warning);
--esim-alerts-pill-on-label-color: var(--palette-on-brand);
--esim-alerts-pill-off-fill: var(--palette-card-plain);
--esim-alerts-pill-off-label-color: var(--palette-text-muted);
--esim-alerts-cards-to-note: var(--spacing-md);
--esim-alerts-note-style: var(--typography-caption);
--esim-alerts-note-color: var(--palette-text-secondary);
--esim-alerts-placeholder-count: 2;
--esim-alerts-placeholder-height: 96px;
--esim-alerts-placeholder-fill: var(--palette-surface);
--esim-alerts-header-to-status: 40px;
/* ---- ConnectionCheck: design/component/ConnectionCheckTokens.kt, object ConnectionCheckTokens ---- */
--connection-check-background: var(--palette-background);
--connection-check-side-inset: var(--spacing-screen-margin);
--connection-check-title-to-content: 30px;
--connection-check-section-gap: 15px;
--connection-check-bottom-inset: var(--spacing-lg);
--connection-check-notice-to-hint: var(--spacing-sm);
--connection-check-hint-style: var(--typography-label);
--connection-check-hint-color: var(--palette-text-secondary);
--connection-check-card-radius: var(--radius-pill);
--connection-check-card-fill: var(--palette-surface);
--connection-check-card-padding: 15px;
--connection-check-title-style: var(--typography-title-bold);
--connection-check-title-color: var(--palette-text-emphasis);
--connection-check-title-to-body: var(--spacing-xs);
--connection-check-body-style: var(--typography-label);
--connection-check-body-color: var(--palette-text-muted);
--connection-check-body-to-content: 15px;
--connection-check-result-disc: 40px;
--connection-check-result-icon: 22px;
--connection-check-icon-to-headline: var(--spacing-sm);
--connection-check-headline-style: var(--typography-heading);
--connection-check-time-style: var(--typography-caption);
--connection-check-time-color: var(--palette-text-secondary);
--connection-check-headline-to-body: var(--spacing-sm);
--connection-check-body-to-reasons: var(--spacing-sm);
--connection-check-reason-gap: var(--spacing-xxs);
--connection-check-reason-dot: 5px;
--connection-check-reason-dot-to-text: var(--spacing-xs);
--connection-check-reason-style: var(--typography-label);
--connection-check-reason-color: var(--palette-text-emphasis);
--connection-check-to-note: var(--spacing-sm);
--connection-check-note-style: var(--typography-caption-medium);
--connection-check-note-color: var(--palette-text-muted);
--connection-check-color-good: var(--palette-positive-deep);
--connection-check-color-usable: var(--palette-warning);
--connection-check-color-poor: var(--palette-error);
--connection-check-color-unknown: var(--palette-text-muted);
--connection-check-wash-good: var(--palette-positive-wash);
--connection-check-wash-usable: var(--palette-background);
--connection-check-wash-poor: var(--palette-background);
--connection-check-wash-unknown: var(--palette-background);
--connection-check-step-count-style: var(--typography-caption-strong);
--connection-check-step-count-color: var(--palette-text-secondary);
--connection-check-heading-to-step: var(--spacing-md);
--connection-check-step-icon: 24px;
--connection-check-step-icon-tint: var(--palette-brand);
--connection-check-step-icon-to-title: var(--spacing-sm);
--connection-check-step-title-style: var(--typography-body-strong);
--connection-check-step-title-color: var(--palette-text-emphasis);
--connection-check-step-title-to-body: var(--spacing-xs);
--connection-check-step-body-to-code: var(--spacing-sm);
--connection-check-step-to-button: var(--spacing-md);
--connection-check-settings-button-height: 60px;
--connection-check-settings-button-radius: var(--radius-md);
--connection-check-settings-button-horizontal-padding: 50px;
--connection-check-settings-button-fill: var(--palette-background);
--connection-check-settings-button-label-color: var(--palette-brand);
--connection-check-settings-button-label-style: var(--typography-body-strong);
--connection-check-button-to-message: var(--spacing-sm);
--connection-check-message-style: var(--typography-label);
--connection-check-message-color: var(--palette-error);
--connection-check-to-step-links: var(--spacing-sm);
--connection-check-step-link-color: var(--palette-brand);
--connection-check-card-icon: 24px;
--connection-check-card-icon-tint: var(--palette-brand);
--connection-check-card-icon-to-title: var(--spacing-sm);
--connection-check-card-button-height: 60px;
--connection-check-card-button-radius: var(--radius-md);
--connection-check-card-button-horizontal-padding: 50px;
--connection-check-card-button-fill: var(--palette-brand);
--connection-check-card-button-label-color: var(--palette-on-brand);
--connection-check-card-button-label-style: var(--typography-body-strong);
--connection-check-help-button-height: 60px;
--connection-check-help-button-radius: var(--radius-md);
--connection-check-help-button-horizontal-padding: 50px;
--connection-check-help-button-fill: var(--palette-background);
--connection-check-help-button-label-color: var(--palette-brand);
--connection-check-help-button-label-style: var(--typography-body-strong);
--connection-check-button-height: 60px;
--connection-check-button-radius: var(--radius-md);
--connection-check-button-horizontal-padding: 50px;
--connection-check-button-fill: var(--palette-brand);
--connection-check-button-label-color: var(--palette-on-brand);
--connection-check-button-label-style: var(--typography-body-strong);
--connection-check-busy-icon-size: 20px;
--connection-check-busy-icon-to-label: var(--spacing-xs);
--connection-check-button-to-note: var(--spacing-sm);
--connection-check-button-note-style: var(--typography-label);
--connection-check-button-note-color: var(--palette-text-secondary);
--connection-check-tester-row-style: var(--typography-caption);
--connection-check-tester-label-color: var(--palette-text-secondary);
--connection-check-tester-value-color: var(--palette-text-emphasis);
--connection-check-tester-row-gap: var(--spacing-xxs);
--connection-check-sample-note-style: var(--typography-caption);
--connection-check-sample-note-color: var(--palette-text-secondary);
--connection-check-placeholder-count: 2;
--connection-check-placeholder-height: 120px;
--connection-check-placeholder-radius: var(--radius-pill);
--connection-check-placeholder-fill: var(--palette-surface);
/* ---- FamilyScreen: design/component/FamilyTokens.kt, object FamilyScreenTokens ---- */
--family-screen-background: var(--palette-background);
--family-screen-side-inset: var(--spacing-screen-margin);
--family-screen-hero-top: 10px;
--family-screen-hero-to-sample: var(--spacing-sm);
--family-screen-sample-style: var(--typography-caption-medium);
--family-screen-sample-color: var(--palette-text-muted);
--family-screen-heading-icon-width: 30px;
--family-screen-heading-icon-height: 30px;
--family-screen-heading-icon-tint: var(--palette-brand);
--family-screen-heading-icon-to-title: 10px;
--family-screen-heading-title-style: var(--typography-title);
--family-screen-heading-title-color: var(--palette-text-muted);
--family-screen-block-to-heading: 15px;
--family-screen-heading-to-block: var(--spacing-sm);
--family-screen-placeholder-fill: var(--palette-surface);
/* ---- FamilyHero: design/component/FamilyTokens.kt, object FamilyHeroTokens ---- */
--family-hero-height: 192px;
--family-hero-radius: var(--radius-lg);
--family-hero-back-size: 40px;
--family-hero-back-fill: var(--palette-on-brand);
--family-hero-back-inset: 10px;
--family-hero-back-top: 11px;
--family-hero-back-icon-size: 16px;
--family-hero-back-icon-tint: var(--palette-text-emphasis);
--family-hero-back-touch-target: var(--sizing-min-touch-target);
--family-hero-wordmark-width: 80px;
--family-hero-wordmark-height: 16px;
--family-hero-wordmark-top: 23px;
--family-hero-wordmark-tint: var(--palette-on-brand);
--family-hero-text-inset: 15px;
--family-hero-title-top: 121px;
--family-hero-title-style: var(--typography-title-large);
--family-hero-title-color: var(--palette-on-brand);
--family-hero-title-min-font-size: 16px;
--family-hero-subtitle-top: 159px;
--family-hero-subtitle-style: var(--typography-body-medium);
--family-hero-subtitle-color: var(--palette-on-brand);
/* ---- MemberAvatar: design/component/FamilyTokens.kt, object MemberAvatarTokens ---- */
--member-avatar-size: 40px;
--member-avatar-fill: var(--palette-brand);
--member-avatar-letter-style: var(--typography-body-strong);
--member-avatar-letter-color: var(--palette-on-brand);
/* ---- MemberTile: design/component/FamilyTokens.kt, object MemberTileTokens ---- */
--member-tile-per-row: 4;
--member-tile-gap: var(--spacing-xs);
--member-tile-radius: var(--radius-md);
--member-tile-fill: var(--palette-surface);
--member-tile-avatar-top: 15px;
--member-tile-name-top: 61px;
--member-tile-name-inset: 4px;
--member-tile-name-style: var(--typography-body-strong);
--member-tile-name-color: var(--palette-text-emphasis);
--member-tile-empty-label-max-lines: 2;
--member-tile-label-min-scale: var(--sizing-min-text-scale);
--member-tile-empty-label-bottom: var(--spacing-sm);
--member-tile-empty-disc-fill: var(--palette-brand);
--member-tile-empty-icon-size: 14px;
--member-tile-empty-icon-tint: var(--palette-on-brand);
--member-tile-empty-border-width: 1px;
--member-tile-empty-border: var(--palette-brand-half);
--member-tile-empty-border-dash: 4px;
--member-tile-empty-border-gap: 4px;
--member-tile-checkout-height: 100px;
--member-tile-checkout-empty-disc-size: 40px;
--member-tile-checkout-empty-disc-top: 15px;
--member-tile-checkout-empty-label-top: 61px;
--member-tile-checkout-empty-label-style: var(--typography-body-strong);
--member-tile-checkout-empty-label-color: var(--palette-text-emphasis);
--member-tile-members-height: 120px;
--member-tile-members-empty-disc-size: 30px;
--member-tile-members-empty-disc-top: 32px;
--member-tile-members-empty-label-top: 72px;
--member-tile-members-empty-label-style: var(--typography-label-strong);
--member-tile-members-empty-label-color: var(--palette-brand);
--member-tile-pill-height: 24px;
--member-tile-pill-radius: 12px;
--member-tile-pill-inset: 5px;
--member-tile-pill-fill: var(--palette-positive-wash);
--member-tile-pill-label-style: var(--typography-caption-strong);
--member-tile-pill-label-color: var(--palette-positive-deep);
--member-tile-menu-icon-width: 4px;
--member-tile-menu-icon-height: 14px;
--member-tile-menu-icon-inset: 10px;
--member-tile-menu-icon-top: 10px;
--member-tile-menu-icon-tint: var(--palette-text-emphasis-half);
--member-tile-menu-touch-target: var(--sizing-min-touch-target);
/* ---- FamilyMembers: design/component/FamilyTokens.kt, object FamilyMembersTokens ---- */
--family-members-hero-to-strip: var(--spacing-sm);
--family-members-notice-to-strip: var(--spacing-sm);
--family-members-heading-to-sentence: var(--spacing-sm);
--family-members-sentence-to-block: 15px;
--family-members-who-sentence-style: var(--typography-label-strong);
--family-members-invite-sentence-style: var(--typography-label);
--family-members-sentence-color: var(--palette-text-emphasis);
--family-members-strip-height: 80px;
--family-members-strip-radius: var(--radius-card);
--family-members-strip-fill: var(--palette-brand);
--family-members-strip-divider-width: 2px;
--family-members-strip-divider-height: 50px;
--family-members-strip-divider-radius: 1px;
--family-members-strip-divider-top: 15px;
--family-members-strip-divider: var(--palette-brand-line);
--family-members-strip-label-top: 20px;
--family-members-strip-label-style: var(--typography-caption-medium);
--family-members-strip-label-color: var(--palette-on-brand);
--family-members-strip-value-top: 38px;
--family-members-strip-value-style: var(--typography-title-large);
--family-members-strip-value-color: var(--palette-on-brand);
--family-members-strip-column-inset: 5px;
--family-members-strip-text-min-scale: var(--sizing-min-text-scale);
--family-members-tiles-to-count: var(--spacing-lg);
--family-members-count-height: 80px;
--family-members-count-radius: var(--radius-card);
--family-members-count-fill: var(--palette-surface);
--family-members-count-leading-inset: 16px;
--family-members-count-title-top: 17px;
--family-members-count-title-style: var(--typography-body-bold);
--family-members-count-title-color: var(--palette-brand);
--family-members-count-line-top: 46px;
--family-members-count-line-style: var(--typography-label);
--family-members-count-line-color: var(--palette-text-emphasis);
--family-members-count-line-max-lines: 2;
--family-members-count-bottom-padding: 18px;
--family-members-count-text-to-discs: var(--spacing-sm);
--family-members-count-text-min-scale: var(--sizing-min-text-scale);
--family-members-count-disc-size: 30px;
--family-members-count-disc-gap: 5px;
--family-members-count-disc-trailing-inset: 15px;
--family-members-count-disc-taken: var(--palette-brand);
--family-members-count-disc-free: var(--palette-brand-quiet);
--family-members-count-disc-free-icon-size: 14px;
--family-members-count-disc-free-icon-tint: var(--palette-on-brand);
--family-members-count-discs-up-to: 4;
--family-members-way-height: 40px;
--family-members-way-gap: var(--spacing-xs);
--family-members-way-radius: var(--radius-md);
--family-members-way-fill: var(--palette-surface);
--family-members-way-square-size: 30px;
--family-members-way-square-radius: var(--radius-xs);
--family-members-way-square-inset: 5px;
--family-members-way-glyph-size: 16px;
--family-members-way-glyph-tint: var(--palette-on-brand);
--family-members-way-square-to-label: var(--spacing-sm);
--family-members-way-label-trailing-inset: 5px;
--family-members-way-label-style: var(--typography-label-strong);
--family-members-way-label-color: var(--palette-text-emphasis);
--family-members-way-label-min-scale: var(--sizing-min-text-scale);
--family-members-way-beside-label: 50px;
--family-members-way-link: var(--palette-amber);
--family-members-way-whatsapp: var(--palette-whatsapp-green);
--family-members-way-email: var(--palette-violet);
--family-members-ways-to-note: var(--spacing-lg);
--family-members-note-min-height: 70px;
--family-members-note-radius: var(--radius-card);
--family-members-note-fill: var(--palette-surface);
--family-members-note-padding: 15px;
--family-members-note-icon-size: 18px;
--family-members-note-icon-tint: var(--palette-brand);
--family-members-note-icon-to-text: var(--spacing-sm);
--family-members-note-title-style: var(--typography-label-bold);
--family-members-note-title-color: var(--palette-brand);
--family-members-note-title-to-body: var(--spacing-sm);
--family-members-note-body-style: var(--typography-caption-medium);
--family-members-note-body-color: var(--palette-text-emphasis);
--family-members-bottom-padding: 40px;
--family-members-placeholder-tiles: 4;
/* ---- MemberMenu: design/component/FamilyTokens.kt, object MemberMenuTokens ---- */
--member-menu-min-width: 157px;
--member-menu-label-min-scale: var(--sizing-min-text-scale);
--member-menu-radius: var(--radius-md);
--member-menu-fill: var(--palette-background);
--member-menu-shadow: 0px 0px 20px var(--palette-shadow-soft);
--member-menu-top-under-dots: 4px;
--member-menu-page-inset: var(--spacing-sm);
--member-menu-padding: 15px;
--member-menu-line-height: 20px;
--member-menu-line-pitch: 35px;
--member-menu-icon-box: 14px;
--member-menu-icon-inset: var(--spacing-sm);
--member-menu-icon-to-label: var(--spacing-sm);
--member-menu-label-trailing-inset: var(--spacing-sm);
--member-menu-icon-tint: var(--palette-brand);
--member-menu-label-style: var(--typography-caption-strong);
--member-menu-label-color: var(--palette-text-emphasis);
--member-menu-destructive-color: var(--palette-error);
/* ---- MemberStrip: design/component/FamilyTokens.kt, object MemberStripTokens ---- */
--member-strip-height: 70px;
--member-strip-radius: var(--radius-card);
--member-strip-fill: var(--palette-surface);
--member-strip-inset: var(--spacing-lg);
--member-strip-avatar-inset: 15px;
--member-strip-avatar-to-text: var(--spacing-sm);
--member-strip-name-top: 15px;
--member-strip-name-style: var(--typography-heading);
--member-strip-name-color: var(--palette-brand);
--member-strip-device-top: 41px;
--member-strip-device-style: var(--typography-caption-medium);
--member-strip-device-color: var(--palette-text-emphasis);
--member-strip-pill-height: 24px;
--member-strip-pill-trailing-inset: var(--spacing-lg);
--member-strip-pill-leading-padding: 7px;
--member-strip-pill-trailing-padding: 9px;
--member-strip-pill-dot-size: 10px;
--member-strip-pill-dot-color: var(--palette-on-brand);
--member-strip-pill-dot-to-label: 5px;
--member-strip-pill-label-style: var(--typography-caption);
--member-strip-pill-label-color: var(--palette-on-brand);
--member-strip-pill-running: var(--palette-positive);
--member-strip-pill-paused: var(--palette-warning);
--member-strip-pill-not-installed: var(--palette-inactive);
/* ---- FamilySheet: design/component/FamilyTokens.kt, object FamilySheetTokens ---- */
--family-sheet-text-inset: var(--spacing-lg);
--family-sheet-glyph-top: 30px;
--family-sheet-glyph-box: 40px;
--family-sheet-glyph-tint: var(--palette-brand);
--family-sheet-glyph-to-title: var(--spacing-sm);
--family-sheet-title-style: var(--typography-screen-title);
--family-sheet-title-color: var(--palette-text-emphasis);
--family-sheet-title-to-line: var(--spacing-sm);
--family-sheet-line-style: var(--typography-label);
--family-sheet-line-color: var(--palette-text-muted);
--family-sheet-to-message: 6px;
--family-sheet-message-style: var(--typography-caption-medium);
--family-sheet-message-color: var(--palette-error);
--family-sheet-to-button: var(--spacing-lg);
--family-sheet-line-to-field: var(--spacing-lg);
--family-sheet-field-inset: var(--spacing-lg);
--family-sheet-keyboard-gap: var(--spacing-sm);
--family-sheet-qr-note-to-member: 30px;
--family-sheet-line-to-member: var(--spacing-lg);
--family-sheet-member-to-heading: var(--spacing-lg);
--family-sheet-heading-inset: var(--spacing-lg);
--family-sheet-heading-style: var(--typography-title);
--family-sheet-heading-color: var(--palette-text-emphasis);
--family-sheet-heading-to-ways: var(--spacing-lg);
--family-sheet-way-inset: var(--spacing-lg);
--family-sheet-way-height: 93px;
--family-sheet-way-gap: 9px;
--family-sheet-way-radius: var(--radius-card);
--family-sheet-way-fill: var(--palette-surface);
--family-sheet-way-square-size: 30px;
--family-sheet-way-square-radius: var(--radius-xs);
--family-sheet-way-square-top: 20px;
--family-sheet-way-glyph-size: 14px;
--family-sheet-way-glyph-tint: var(--palette-on-brand);
--family-sheet-way-label-top: 58px;
--family-sheet-way-label-style: var(--typography-label-strong);
--family-sheet-way-label-color: var(--palette-text-emphasis);
--family-sheet-way-label-min-scale: var(--sizing-min-text-scale);
--family-sheet-way-selected-border-width: 1.5px;
--family-sheet-way-selected-border: var(--palette-brand);
--family-sheet-title-to-body: 15px;
--family-sheet-body-style: var(--typography-label);
--family-sheet-body-color: var(--palette-text-muted);
--family-sheet-body-to-emphasis: 14px;
--family-sheet-emphasis-style: var(--typography-body-strong);
--family-sheet-emphasis-color: var(--palette-brand);
--family-sheet-emphasis-to-member: 32px;
--family-sheet-member-to-note: var(--spacing-lg);
--family-sheet-remove-glyph-tint: var(--palette-error);
--family-sheet-remove-body-width: 285px;
--family-sheet-remove-body-style: var(--typography-label-tall);
--family-sheet-remove-body-color: var(--palette-text-muted);
--family-sheet-remove-body-to-member: var(--spacing-lg);
--family-sheet-member-to-line: var(--spacing-lg);
--family-sheet-remove-button-fill: var(--palette-error);
/* ---- FamilyUsage: design/component/FamilyTokens.kt, object FamilyUsageTokens ---- */
--family-usage-hero-to-summary: var(--spacing-lg);
--family-usage-summary-height: 130px;
--family-usage-summary-radius: var(--radius-md);
--family-usage-summary-fill: var(--palette-surface);
--family-usage-summary-inset: var(--spacing-lg);
--family-usage-summary-columns: 4;
--family-usage-summary-column-gap: 5px;
--family-usage-summary-icon-top: 15px;
--family-usage-summary-icon-box: 24px;
--family-usage-summary-label-top: 43px;
--family-usage-summary-label-style: var(--typography-label-regular);
--family-usage-summary-label-color: var(--palette-text-emphasis);
--family-usage-summary-value-top: 64px;
--family-usage-summary-value-style: var(--typography-title-bold);
--family-usage-summary-value-color: var(--palette-text-emphasis);
--family-usage-summary-text-min-scale: var(--sizing-min-text-scale);
--family-usage-summary-bar-top: 100px;
--family-usage-summary-bar-inset: var(--spacing-sm);
--family-usage-total-tint: var(--palette-brand);
--family-usage-used-tint: var(--palette-violet);
--family-usage-remaining-tint: var(--palette-positive);
--family-usage-days-tint: var(--palette-apricot);
--family-usage-row-gap: var(--spacing-sm);
--family-usage-members-note-style: var(--typography-label);
--family-usage-members-note-color: var(--palette-text-emphasis);
--family-usage-rows-to-outside: var(--spacing-xs);
--family-usage-outside-line-gap: var(--spacing-xxs);
--family-usage-outside-style: var(--typography-caption);
--family-usage-outside-color: var(--palette-text-secondary);
--family-usage-button-height: 60px;
--family-usage-button-radius: var(--radius-md);
--family-usage-button-horizontal-padding: 50px;
--family-usage-button-fill: var(--palette-brand);
--family-usage-button-label-color: var(--palette-on-brand);
--family-usage-button-label-style: var(--typography-body-strong);
--family-usage-button-bottom: 40px;
--family-usage-button-bottom-safe-gap: 6px;
--family-usage-content-to-button: var(--spacing-lg);
--family-usage-placeholder-rows: 4;
/* ---- MemberRow: design/component/FamilyTokens.kt, object MemberRowTokens ---- */
--member-row-height: 70px;
--member-row-radius: var(--radius-card);
--member-row-fill: var(--palette-surface);
--member-row-avatar-inset: 15px;
--member-row-avatar-to-text: var(--spacing-sm);
--member-row-name-top: 15px;
--member-row-name-style: var(--typography-heading);
--member-row-name-color: var(--palette-brand);
--member-row-name-min-scale: var(--sizing-min-text-scale);
--member-row-device-top: 41px;
--member-row-device-style: var(--typography-caption-medium);
--member-row-device-color: var(--palette-text-emphasis);
--member-row-text-to-bar: var(--spacing-sm);
--member-row-name-to-pill: 5px;
--member-row-pill-line-to-device: var(--spacing-xxs);
--member-row-text-bottom: 15px;
--member-row-pill-height: 16px;
--member-row-pill-leading-padding: 3px;
--member-row-pill-dot-size: 10px;
--member-row-pill-dot-color: var(--palette-on-brand);
--member-row-pill-dot-to-label: 4px;
--member-row-pill-trailing-padding: 7px;
--member-row-pill-label-style: var(--typography-caption);
--member-row-pill-label-color: var(--palette-on-brand);
--member-row-frame-width: 400px;
--member-row-bar-width: 169px;
--member-row-bar-inset: 15px;
--member-row-bar-top: 46px;
--member-row-bar-height: 10px;
--member-row-bar-radius: 8px;
--member-row-bar-track: var(--palette-brand-mist);
--member-row-end-word-top: 10px;
--member-row-end-word-style: var(--typography-caption);
--member-row-end-amount-top: 27px;
--member-row-end-amount-style: var(--typography-caption-bold);
--member-row-end-color: var(--palette-text-emphasis);
--member-row-end-gap: var(--spacing-xs);
--member-row-end-text-min-scale: var(--sizing-min-text-scale);
/* ---- FamilyTopUpSheet: design/component/FamilyTokens.kt, object FamilyTopUpSheetTokens ---- */
--family-top-up-sheet-line-to-tiles: 30px;
--family-top-up-sheet-tile-inset: var(--spacing-lg);
--family-top-up-sheet-tile-columns: 2;
--family-top-up-sheet-tile-column-gap: var(--spacing-sm);
--family-top-up-sheet-tile-row-gap: var(--spacing-xs);
--family-top-up-sheet-tile-rows-shown: 2;
--family-top-up-sheet-placeholder-count: 4;
--family-top-up-sheet-tile-height: 160px;
--family-top-up-sheet-tile-radius: var(--radius-md);
--family-top-up-sheet-tile-fill: var(--palette-surface);
--family-top-up-sheet-tile-size-inset: var(--spacing-lg);
--family-top-up-sheet-tile-size-top: 13px;
--family-top-up-sheet-tile-size-style: var(--typography-headline-bold);
--family-top-up-sheet-tile-size-color: var(--palette-brand);
--family-top-up-sheet-tile-days-inset: var(--spacing-sm);
--family-top-up-sheet-tile-days-top: 48px;
--family-top-up-sheet-tile-days-style: var(--typography-label);
--family-top-up-sheet-tile-days-color: var(--palette-text-emphasis);
--family-top-up-sheet-tile-text-min-scale: var(--sizing-min-text-scale);
--family-top-up-sheet-tile-text-to-mark: var(--spacing-xs);
--family-top-up-sheet-tile-mark-size: 24px;
--family-top-up-sheet-tile-mark-inset: var(--spacing-sm);
--family-top-up-sheet-tile-mark-top: var(--spacing-sm);
--family-top-up-sheet-tile-mark-fill: var(--palette-on-brand);
--family-top-up-sheet-tile-mark-icon-size: 16px;
--family-top-up-sheet-tile-mark-icon-tint: var(--palette-brand);
--family-top-up-sheet-tile-price-inset: var(--spacing-sm);
--family-top-up-sheet-tile-price-height: 50px;
--family-top-up-sheet-tile-price-radius: var(--radius-pill);
--family-top-up-sheet-tile-price-fill: var(--palette-brand-mist);
--family-top-up-sheet-tile-price-style: var(--typography-heading);
--family-top-up-sheet-tile-price-color: var(--palette-text-emphasis-soft);
--family-top-up-sheet-tiles-height: 328px;
--family-top-up-sheet-message-height: 160px;
--family-top-up-sheet-tiles-to-note: var(--spacing-lg);
--family-top-up-sheet-note-inset: var(--spacing-lg);
--family-top-up-sheet-note-body-style: var(--typography-caption-strong);
/* ---- InflightDetails: design/component/FlightCheckTokens.kt, object InflightDetailsTokens ---- */
--inflight-details-title-top: 16px;
--inflight-details-title-style: var(--typography-title);
--inflight-details-title-color: var(--palette-text-emphasis);
--inflight-details-title-to-strip: 20px;
--inflight-details-strip-height: 80px;
--inflight-details-strip-radius: var(--radius-md);
--inflight-details-strip-fill: var(--palette-surface);
--inflight-details-strip-inset: 15px;
--inflight-details-strip-column-share: 0.34;
--inflight-details-strip-column-gap: 6px;
--inflight-details-strip-picture-box: 20px;
--inflight-details-strip-mark-size: 20px;
--inflight-details-strip-mark-radius: 6px;
--inflight-details-strip-mark-code-style: var(--typography-micro-strong);
--inflight-details-strip-icon-tint: var(--palette-brand);
--inflight-details-strip-picture-to-caption: 5px;
--inflight-details-strip-caption-top: 16px;
--inflight-details-strip-caption-style: var(--typography-caption-medium);
--inflight-details-strip-caption-color: var(--palette-text-emphasis);
--inflight-details-strip-value-top: 41px;
--inflight-details-strip-value-style: var(--typography-title-bold);
--inflight-details-strip-value-color: var(--palette-brand);
--inflight-details-strip-text-min-scale: var(--sizing-min-text-scale);
--inflight-details-strip-to-tiles: 20px;
--inflight-details-strip-to-sample-note: var(--spacing-sm);
--inflight-details-sample-note-style: var(--typography-caption-medium);
--inflight-details-sample-note-color: var(--palette-text-muted);
--inflight-details-sample-note-to-tiles: var(--spacing-sm);
--inflight-details-buttons-to-qr: 12px;
--inflight-details-qr-style: var(--typography-body-strong);
--inflight-details-qr-color: var(--palette-text-emphasis-soft);
--inflight-details-qr-touch-height: var(--sizing-min-touch-target);
--inflight-details-bottom-inset: 20px;
/* ---- AirlineMark: design/component/FlightCheckTokens.kt, object AirlineMarkTokens ---- */
--airline-mark-code-color: var(--palette-on-brand);
--airline-mark-large-size: 40px;
--airline-mark-large-radius: var(--radius-xs);
--airline-mark-large-code-style: var(--typography-label-bold);
--airline-mark-medium-size: 30px;
--airline-mark-medium-radius: 8px;
--airline-mark-medium-code-style: var(--typography-caption-bold);
--airline-mark-small-size: 20px;
--airline-mark-small-radius: 6px;
--airline-mark-small-code-style: var(--typography-micro-strong);
--airline-mark-brand: var(--palette-brand);
--airline-mark-navy: var(--palette-navy);
--airline-mark-positive: var(--palette-positive);
--airline-mark-coffee: var(--palette-place-coffee);
--airline-mark-danger: var(--palette-danger);
--airline-mark-warning: var(--palette-warning);
--airline-mark-sky: var(--palette-sky);
--airline-mark-landmark: var(--palette-place-landmark);
}
/* ==== end of the written tokens ==== */
/*
* Maak on the web: the My eSIMs family.
*
* What the pages of web-design/pages/esims/ need and the kit does not have.
* A page links this file after maak.css:
*
*
*
*
* Above this comment are the tokens of the family's components, written from
* the Kotlin token objects by pages/esims/tokens.py. Below it, by hand:
*
* 1. what only a website has: the ground, the band a page opens on, a card,
* and three ways to lay a page out in two columns;
* 2. the components, each named after the Android component it mirrors
* (EsimHeader.kt is .esim-header, InstallParts.kt is .install-card and
* .code-row, UsageParts.kt is .usage-ring, .usage-tile...), built from
* tokens only.
*
* Written phone first, like the kit: the rules as they stand are the phone,
* where a page looks like the apps' screen. From a tablet up
* (min-width: 768px) the page stands on the pale ground of the chosen look,
* opens on a blue band, and its content is white cards that rise over the
* band. A desktop is min-width: 1100px. Nothing says left or right.
*/
/* ==========================================================================
1. The website's own: ground, band, card, layouts. Web only.
========================================================================== */
:root {
/* How far the first cards rise over the band. */
--esims-band-overlap: calc(var(--spacing-xxl) * 2);
/* What a card of the apps is filled with, what stands inside it, and its outline.
On a phone these are the apps': a pale card on the white page, white wells in it. */
--card-fill: var(--palette-surface);
--card-well: var(--palette-background);
--card-outline: transparent;
}
@media (min-width: 1100px) {
:root { --esims-band-overlap: calc(var(--spacing-xxl) * 3); }
}
/* The ground. On a phone the apps' white. From a tablet up the pale blue of the
chosen look: a card of the apps is then white with a hairline, and its wells pale. */
@media (min-width: 768px) {
.esims-ground { background: var(--palette-brand-wash); --card-fill: var(--palette-background); --card-well: var(--palette-surface); --card-outline: var(--palette-brand-outline); }
/* Inside something white, a card of the apps is pale again. */
.esims-ground .esims-card, .esims-ground .sheet, .esims-ground .member-menu { --card-fill: var(--palette-surface); --card-well: var(--palette-background); --card-outline: transparent; }
}
/* The band a page opens on. On a phone it is nothing: the page starts as the
apps' screen does. From a tablet up it is the blue band of the chosen look,
across the whole window, holding the page's title; what follows rises over it. */
.esims-band { position: relative; isolation: isolate; }
.esims-band__picture { display: none; }
/* Which eSIM a page is about, under its title: "eSIM 03 ยท Japan". From a tablet up. */
.esims-band__line { display: none; }
/* A sentence that introduces the page: under the title on the band, plain text on a phone. */
.esims-band__lead { margin-block: var(--spacing-md) var(--spacing-lg); color: var(--palette-text-secondary); font: var(--typography-label) var(--font-family); line-height: var(--typography-label-tall-line); }
@media (max-width: 767px) {
/* The header of My eSIMs (EsimsTokens): a picture, the brand colour rising over it, a round foot. */
.esims-band--picture {
--web-focus-color: var(--palette-on-brand);
overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
min-block-size: var(--esims-picture-height); background: var(--esims-fade-color); color: var(--palette-on-brand);
border-end-start-radius: var(--esims-picture-bottom-radius); border-end-end-radius: var(--esims-picture-bottom-radius);
}
.esims-band--picture .esims-band__picture { display: block; position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.esims-band--picture::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--esims-fade-end-opacity); background: linear-gradient(to bottom, transparent calc(var(--esims-fade-start) * 100%), var(--esims-fade-color) calc(var(--esims-fade-end) * 100%)); }
}
@media (min-width: 768px) {
.esims-band {
--web-focus-color: var(--palette-on-brand);
overflow: hidden; padding-block: var(--spacing-xl) calc(var(--esims-band-overlap) + var(--spacing-xxl)); color: var(--palette-on-brand);
background: linear-gradient(to bottom var(--inline-end), var(--palette-brand-deep), var(--palette-brand) 45%, var(--palette-sky));
}
/* Two faint discs, as on the chosen look. */
.esims-band::before, .esims-band::after { content: ""; position: absolute; z-index: -1; inline-size: calc(var(--web-hero-height) * 1.6); block-size: calc(var(--web-hero-height) * 1.6); border-radius: 50%; background: var(--palette-on-brand-faint); opacity: 0.22; }
.esims-band::before { inset-block-start: calc(var(--web-hero-height) * -0.7); inset-inline-end: calc(var(--web-hero-height) * -0.3); }
.esims-band::after { inset-block-end: calc(var(--web-hero-height) * -1.25); inset-inline-start: calc(var(--web-hero-height) * -0.35); }
.esims-band__line { display: block; margin-block-start: var(--spacing-xs); padding-inline-start: calc(var(--sizing-min-touch-target) + var(--spacing-xs)); color: var(--palette-on-brand-soft); font: var(--typography-body-medium) var(--font-family); }
.esims-band__lead { max-inline-size: 60ch; margin-block-end: 0; padding-inline-start: calc(var(--sizing-min-touch-target) + var(--spacing-xs)); color: var(--palette-on-brand); font: var(--typography-body-loose) var(--font-family); }
/* The kit's screen header, on the band: white, and the way back a disc seen through. */
.esims-band .screen-header { margin-block-start: 0; }
.esims-band .screen-header__title { color: var(--palette-on-brand); font: var(--typography-headline-bold) var(--font-family); }
.esims-band .screen-header__back { background: var(--palette-on-brand-faint); color: var(--palette-on-brand); }
.esims-band .screen-header__back:hover { background: var(--palette-on-brand); color: var(--palette-brand); }
}
/* A band nothing rises over: a page of the design that shows states side by side, each under its label. */
@media (min-width: 768px) {
.esims-band--flat { padding-block-end: var(--spacing-xl); }
}
/* What follows the band: from a tablet up it rises over the band's foot. */
.esims-rise { position: relative; z-index: 1; }
.esims-band + .esims-rise { margin-block-start: var(--spacing-sm); }
.esims-band--picture + .esims-rise { margin-block-start: var(--esims-header-to-first-card); }
@media (min-width: 768px) {
.esims-band + .esims-rise, .esims-band--picture + .esims-rise { margin-block-start: calc(var(--esims-band-overlap) * -1); }
}
/* A white card on the pale ground. On a phone it is no box at all: its content
stands on the page as it does in the apps. */
.esims-card { min-inline-size: 0; }
@media (min-width: 768px) {
.esims-card { padding: var(--spacing-xl); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: inset 0 0 0 1px var(--palette-brand-outline); }
.esims-card--roomy { padding: var(--spacing-xxl); }
}
/* Two columns on a desktop, one on a phone, where the pieces of the two are
read in the apps' own order. Each piece says where it is read on a phone
(.reads-1 to .reads-5): the figures, then the facts, then the buttons. On a
desktop the pieces of the side column gather beside the main one, and stay
in view while the main one is read. */
.layout-wrap { display: grid; gap: var(--spacing-xl); grid-template-columns: minmax(0, 1fr); }
.layout-wrap__main, .layout-wrap__aside { display: contents; }
.layout-wrap__main > *, .layout-wrap__aside > * { min-inline-size: 0; }
/* The card that offers notifications (the kit's .notification-offer), over a loaded page: the page's first thing. */
.esims-offer { margin-block-end: var(--notification-offer-outer-gap); }
.reads-1 { order: 1; }
.reads-2 { order: 2; }
.reads-3 { order: 3; }
.reads-4 { order: 4; }
.reads-5 { order: 5; }
@media (min-width: 1100px) {
.layout-wrap { grid-template-columns: minmax(0, 1fr) var(--web-aside); gap: calc(var(--spacing-lg) * 2); align-items: start; }
.layout-wrap__main, .layout-wrap__aside { display: flex; flex-direction: column; gap: var(--spacing-lg); min-inline-size: 0; }
.layout-wrap__main { order: 1; }
.layout-wrap__aside { order: 2; position: sticky; inset-block-start: calc(var(--web-header-height) + var(--spacing-lg)); }
}
/* Two buttons that share a row, the leading one first; one alone takes it all. */
.button-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--esim-detail-button-gap); }
.button-row .maak-button { padding-inline: var(--spacing-sm); }
@media (min-width: 1100px) {
/* In a side column they stand one over the other. */
.layout-wrap__aside .button-row { grid-auto-flow: row; }
}
/* The button a card ends with: as wide as the card on a phone, as wide as it needs from a tablet up. */
.card-action { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.card-action .maak-button { flex: 1 1 auto; }
@media (min-width: 768px) {
.card-action .maak-button { flex: 0 1 auto; min-inline-size: calc(var(--web-sheet-width) * 0.6); }
}
/* A choice the wiring makes from the phone, and a desktop cannot: which system
the help is written for. The kit's small segmented control, no wider than it needs. */
.platform-choice { max-inline-size: calc(var(--web-sheet-width) * 0.75); }
/* What a state is called, on a page of the design that shows several side by
side. A note for whoever reads the design, never a part of the product. */
.state-label { display: block; margin-block-end: var(--spacing-sm); color: var(--palette-text-muted); font: var(--typography-caption-strong) var(--font-family); letter-spacing: 0.04em; text-transform: uppercase; }
.state-label:not(:first-child) { margin-block-start: var(--spacing-xl); }
/* Sheets standing still, side by side, with no scrim under them. */
.grid-auto--sheets { --grid-auto-min: 320px; align-items: start; gap: var(--spacing-xl); }
.grid-auto--sheets .sheet, .grid-auto--sheets .member-menu { animation: none; }
@media (min-width: 768px) {
.grid-auto--sheets { --grid-auto-min: 340px; }
}
/* Cards of states: three across on a desktop, each as tall as it needs. */
.grid-auto--states { --grid-auto-min: 300px; align-items: start; gap: var(--spacing-xl); }
/* The list of a family's pages: a row of the kit's, with what the page is under its name. */
.esims-index { display: grid; gap: var(--spacing-sm); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
.esims-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.esims-index .action-row { min-block-size: var(--action-row-height); block-size: 100%; margin-block-start: 0; }
.esims-index .action-row__subtitle { line-height: var(--typography-caption-loose-line); }
/* ==========================================================================
2. My eSIMs: the list
========================================================================== */
/* The header of My eSIMs (EsimsScreen.kt, EsimsTokens): the greeting, the title, the three tabs. */
.esims-header { display: flex; flex-direction: column; }
.esims-header__greeting { color: var(--esims-greeting-color); font: var(--esims-greeting-style) var(--font-family); }
.esims-header__title { margin-block-start: var(--esims-greeting-to-title); color: var(--esims-title-color); font: var(--esims-title-style) var(--font-family); }
.esims-header__tabs { margin-block: var(--esims-title-to-tabs) var(--esims-tabs-to-header-end); }
@media (min-width: 768px) {
.esims-header { align-items: center; text-align: center; padding-block: var(--spacing-lg) var(--spacing-md); }
.esims-header__greeting { color: var(--palette-on-brand-soft); font: var(--typography-subhead-large) var(--font-family); }
.esims-header__title { font: var(--typography-hero) var(--font-family); }
.esims-header__tabs { margin-block-end: 0; }
}
/* The cards of the list: one under another on a phone, EsimsTokens.cardGap apart. */
.esim-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esims-card-gap); }
.esim-list > * { min-inline-size: 0; }
@media (min-width: 768px) {
.esim-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--web-grid-gap); }
}
@media (min-width: 1100px) {
.esim-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A card whose whole face opens the eSIM's page: the link is stretched under its controls. */
.esim-list-card { position: relative; transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.esim-list-card:hover { box-shadow: inset 0 0 0 2px var(--palette-brand-outline); }
.esim-list-card__open { position: absolute; inset: 0; z-index: 0; border-radius: var(--esim-list-card-radius); }
.esim-list-card__edit, .esim-list-card__buttons { position: relative; z-index: 1; }
/* A figure of the card keeps to the reading side on a right-to-left page too: a data size is written
left to right, and would otherwise stand at the far end of its column. */
.esim-list-card__figure-value { justify-self: start; }
/* The mark of a package in the banner, where a country has its flag. */
.esim-list-card__banner .package-disc { background: var(--esim-list-card-badge-fill); color: var(--esim-list-card-badge-tint); --icon-size: var(--esim-list-card-badge-icon-size); }
.esim-list-card__banner .flag, .esim-list-card__banner .package-disc { margin-block-end: auto; }
/* PackageDisc.kt: a package's icon in a disc, where a country has its flag. */
.package-disc { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--package-disc-size); block-size: var(--package-disc-size); border-radius: 50%; background: var(--package-disc-on-white-fill); color: var(--package-disc-on-white-tint); --icon-size: var(--package-disc-on-white-icon-size); }
.package-disc--on-brand { background: var(--package-disc-on-brand-fill); color: var(--package-disc-on-brand-tint); }
/* On an eSIM's own page and on Manage plan: EsimManageTokens' badge. */
.package-disc--50 { inline-size: var(--esim-manage-flag-size); block-size: var(--esim-manage-flag-size); background: var(--esim-manage-badge-fill); color: var(--esim-manage-badge-tint); --icon-size: var(--esim-manage-badge-icon-size); }
/* While the list is read: empty shapes of a card's size. */
.placeholder--esim-card { block-size: var(--esims-placeholder-height); border-radius: var(--esims-placeholder-radius); background: var(--esims-placeholder-fill); }
.placeholder--panel { block-size: var(--esim-detail-placeholder-height); border-radius: var(--esim-detail-placeholder-radius); background: var(--esim-detail-placeholder-fill); }
.placeholder--esim-summary { block-size: var(--esim-manage-placeholder-summary-height); border-radius: var(--esim-manage-placeholder-summary-radius); background: var(--esim-manage-placeholder-fill); }
.placeholder--plan-review { block-size: var(--esim-manage-placeholder-card-height); border-radius: var(--esim-manage-placeholder-card-radius); background: var(--esim-manage-placeholder-fill); }
.placeholder--flag { inline-size: var(--esim-manage-flag-size); block-size: var(--esim-manage-flag-size); border-radius: 50%; background: var(--esim-manage-placeholder-fill); }
.placeholder--install-card { block-size: var(--install-placeholder-height); border-radius: var(--install-placeholder-radius); background: var(--install-placeholder-fill); }
.placeholder--alert { block-size: var(--esim-alerts-placeholder-height); border-radius: var(--esim-alerts-card-radius); background: var(--esim-alerts-placeholder-fill); }
.placeholder--check-card { block-size: var(--connection-check-placeholder-height); border-radius: var(--connection-check-placeholder-radius); background: var(--connection-check-placeholder-fill); }
.placeholder--top-up-option { block-size: var(--top-up-sheet-row-height); border-radius: var(--top-up-sheet-row-radius); }
.placeholder--top-up-tile { block-size: var(--family-top-up-sheet-tile-height); border-radius: var(--family-top-up-sheet-tile-radius); }
.placeholder--ring { inline-size: var(--usage-stats-ring-size); block-size: var(--usage-stats-ring-size); border-radius: 50%; background: var(--usage-stats-placeholder-fill); }
.placeholder--usage-tile { block-size: var(--usage-stats-tile-height); border-radius: var(--usage-stats-tile-radius); background: var(--usage-stats-placeholder-fill); }
.placeholder--usage-panel { block-size: var(--usage-stats-placeholder-panel-height); border-radius: var(--usage-stats-panel-radius); background: var(--usage-stats-placeholder-fill); }
.placeholder--chart { block-size: var(--usage-stats-chart-height); border-radius: var(--usage-stats-panel-radius); background: var(--usage-stats-placeholder-fill); }
.placeholder--flight-strip { block-size: var(--inflight-details-strip-height); border-radius: var(--inflight-details-strip-radius); background: var(--usage-stats-placeholder-fill); }
.placeholder--action-row { block-size: var(--action-row-height); border-radius: var(--action-row-radius); }
.placeholder--family-summary { block-size: var(--family-usage-summary-height); border-radius: var(--family-usage-summary-radius); background: var(--family-screen-placeholder-fill); }
.placeholder--member-row { block-size: var(--member-row-height); border-radius: var(--member-row-radius); background: var(--family-screen-placeholder-fill); }
.placeholder--member-tile { block-size: var(--member-tile-members-height); border-radius: var(--member-tile-radius); background: var(--family-screen-placeholder-fill); }
.placeholder--family-strip { block-size: var(--family-members-strip-height); border-radius: var(--family-members-strip-radius); background: var(--family-screen-placeholder-fill); }
/* ==========================================================================
3. An eSIM's own page
========================================================================== */
/* EsimHeader.kt: the way back, the flag or the package's disc, where the plan
stands, and the name. On a phone the flag is centred over the name; from a
tablet up they are one line on the band. */
.esim-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; row-gap: var(--esim-manage-flag-to-name); padding-block-start: var(--esim-manage-flag-top); }
.esim-header__back { justify-self: start; margin-inline-start: calc(var(--spacing-sm) * -1); }
.esim-header__mark { grid-column: 2; }
.esim-header__status { grid-column: 3; justify-self: end; }
.esim-header__name { grid-column: 1 / -1; margin-block-end: var(--esim-manage-name-to-summary); text-align: center; color: var(--esim-manage-name-color); font: var(--esim-manage-name-style) var(--font-family); }
@media (min-width: 768px) {
.esim-header { display: flex; align-items: center; gap: var(--spacing-md); padding-block-start: 0; }
.esim-header__back { margin-inline-start: 0; }
.esim-header__name { order: 3; margin-block-end: 0; text-align: start; color: var(--palette-on-brand); font: var(--typography-headline-bold) var(--font-family); }
.esim-header__status { order: 4; }
}
/* The summary of an eSIM while its plan runs: a control, with its arrow, that opens usage statistics. */
.summary-card--link { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; padding-inline-end: var(--esim-summary-arrow-trailing-inset); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.summary-card--link:hover { background: var(--palette-brand-shade); }
.summary-card--link .summary-card__label, .summary-card--link .summary-card__value { display: block; }
.summary-card__arrow { align-self: center; color: var(--esim-summary-arrow-tint); inline-size: var(--esim-summary-arrow-width); block-size: var(--esim-summary-arrow-height); }
/* In a desktop's side column three figures share a narrow line. Each column is then as wide as its
own words and what is left stands between them, so a long word in one language is not broken
while the short one beside it has room to spare, and two figures never touch. */
@media (min-width: 1100px) {
.layout-wrap__aside .summary-card--esim { grid-auto-columns: minmax(0, auto); justify-content: space-between; }
.layout-wrap__aside .summary-card--link { grid-template-columns: repeat(3, minmax(0, auto)) auto; }
.layout-wrap__aside .plan-review-card__figures { grid-auto-columns: minmax(0, auto); justify-content: space-between; column-gap: var(--spacing-sm); }
}
/* The line under an eSIM's figures (UsageCaptionTokens): that they are approximate, and how old. One to three lines. */
.usage-caption { color: var(--usage-caption-color); font: var(--usage-caption-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* The panels of facts, two across where there is room. */
.panel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esim-detail-to-heading); }
.panel-grid > * { min-inline-size: 0; }
@media (min-width: 768px) {
.panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--web-grid-gap); align-items: start; }
.panel-grid__wide { grid-column: 1 / -1; }
}
/* ==========================================================================
4. Installing an eSIM
========================================================================== */
/* InstallParts.kt: one way to install, as a card. A title, a paragraph, then what the way needs. */
.install-card { padding: var(--install-card-padding); border-radius: var(--install-card-radius); background: var(--card-fill); box-shadow: inset 0 0 0 1px var(--card-outline); }
.install-card__title { color: var(--install-title-color); font: var(--install-title-style) var(--font-family); }
.install-card__body { margin-block-start: var(--install-title-to-body); color: var(--install-body-color); font: var(--install-body-style) var(--font-family); line-height: var(--typography-label-tall-line); }
/* What the phone appears able to do. A hint: it never says more than "appears to". */
.install-card__support { margin-block-start: var(--install-body-to-support); color: var(--install-support-color); font: var(--install-support-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.install-card__content { margin-block-start: var(--install-body-to-content); }
.install-card__message { margin-block-start: var(--install-button-to-message); color: var(--install-message-color); font: var(--install-message-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.install-card__note { margin-block-start: var(--install-to-note); color: var(--install-note-color); font: var(--install-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.install-card--centred { text-align: center; }
.install-card--centred .qr-code { margin-inline: auto; }
@media (min-width: 768px) {
.install-card { padding: var(--spacing-xl); border-radius: var(--radius-card); }
/* The card that starts the phone's own installation is drawn where the page is read on a phone that can. */
.install-card--direct { display: none; }
}
/* QrCode.kt: the code on its white ground. The page draws the code from the eSIM's payload. */
.qr-code { display: block; inline-size: calc(var(--install-qr-size) + 2 * var(--install-qr-padding)); max-inline-size: 100%; padding: var(--install-qr-padding); border-radius: var(--install-qr-radius); background: var(--install-qr-background); }
.qr-code img { inline-size: 100%; block-size: auto; aspect-ratio: 1; }
/* On a desktop the code is read from across a desk: larger. */
@media (min-width: 1100px) {
.qr-code--large { inline-size: calc(var(--install-qr-size) * 1.4 + 2 * var(--install-qr-padding)); }
}
/* In the QR sheet (QrSheetTokens): no padding of its own. */
.qr-code--sheet { inline-size: var(--qr-sheet-qr-size); padding: var(--qr-sheet-qr-padding); border-radius: var(--qr-sheet-qr-radius); }
/* A code to type by hand, with its "Copy" (InstallParts.kt). */
.code-row { display: flex; align-items: center; gap: var(--spacing-sm); min-block-size: var(--install-code-row-height); padding-inline-start: var(--install-code-row-inset); padding-inline-end: var(--spacing-xxs); border-radius: var(--install-code-row-radius); background: var(--card-well); }
.code-row + .code-row { margin-block-start: var(--install-code-row-gap); }
.code-row__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--install-code-label-to-value); padding-block: var(--spacing-sm); }
.code-row__label { color: var(--install-code-label-color); font: var(--install-code-label-style) var(--font-family); }
.code-row__value { align-self: flex-start; color: var(--install-code-value-color); font: var(--install-code-value-style) var(--font-family); overflow-wrap: anywhere; }
.code-row__value.num { white-space: normal; }
.code-row__copy { flex: none; display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--sizing-min-touch-target); min-block-size: var(--sizing-min-touch-target); padding-inline: var(--spacing-sm); border-radius: var(--radius-chip); color: var(--install-copy-color); font: var(--install-copy-style) var(--font-family); cursor: pointer; }
.code-row__copy:hover { background: var(--palette-brand-wash); }
.code-row__copy.is-copied { color: var(--fact-panel-copied-tint); }
/* ==========================================================================
5. Sheets of an eSIM: its QR code, its name, a top-up
========================================================================== */
/* What the family's sheets and the QR sheet share: a glyph, a title, a line, centred. */
.sheet-head { display: flex; flex-direction: column; align-items: center; padding: var(--family-sheet-glyph-top) var(--family-sheet-text-inset) 0; text-align: center; }
.sheet-head__glyph { color: var(--family-sheet-glyph-tint); --icon-size: var(--family-sheet-glyph-box); margin-block-end: var(--family-sheet-glyph-to-title); }
.sheet-head__glyph--remove { color: var(--family-sheet-remove-glyph-tint); }
.sheet-head__title { color: var(--family-sheet-title-color); font: var(--family-sheet-title-style) var(--font-family); }
.sheet-head__line { margin-block-start: var(--family-sheet-title-to-line); color: var(--family-sheet-line-color); font: var(--family-sheet-line-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.sheet-head__emphasis { margin-block-start: var(--family-sheet-body-to-emphasis); color: var(--family-sheet-emphasis-color); font: var(--family-sheet-emphasis-style) var(--font-family); }
.sheet-part { padding: var(--family-sheet-line-to-member) var(--family-sheet-text-inset) 0; }
.sheet-part__heading { margin-block-end: var(--family-sheet-heading-to-ways); color: var(--family-sheet-heading-color); font: var(--family-sheet-heading-style) var(--font-family); }
.sheet-part__line { color: var(--family-sheet-line-color); font: var(--family-sheet-line-style) var(--font-family); line-height: var(--typography-label-tall-line); text-align: center; }
.sheet-part__message { margin-block-start: var(--family-sheet-to-message); color: var(--family-sheet-message-color); font: var(--family-sheet-message-style) var(--font-family); text-align: center; }
/* The kit's sheet ends with its buttons a little closer where a sheet of this family says so. */
.sheet__ending--close { padding-block-start: var(--family-sheet-to-button); }
/* QrSheet.kt: an eSIM's code in the floating sheet. */
.qr-sheet { display: flex; flex-direction: column; align-items: center; padding: var(--qr-sheet-glyph-top) var(--qr-sheet-text-inset) 0; text-align: center; }
.qr-sheet__glyph { color: var(--qr-sheet-glyph-tint); --icon-size: var(--qr-sheet-glyph-size); }
.qr-sheet__title { margin-block-start: var(--qr-sheet-glyph-to-title); color: var(--qr-sheet-title-color); font: var(--qr-sheet-title-style) var(--font-family); }
.qr-sheet__line { margin-block-start: var(--qr-sheet-title-to-line); color: var(--qr-sheet-line-color); font: var(--qr-sheet-line-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.qr-sheet .qr-code { margin-block-start: var(--qr-sheet-line-to-qr); }
.qr-sheet__note { margin-block-start: var(--qr-sheet-qr-to-note); color: var(--qr-sheet-note-color); font: var(--qr-sheet-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.qr-sheet__message { margin-block-start: var(--qr-sheet-note-to-message); color: var(--qr-sheet-message-color); font: var(--qr-sheet-message-style) var(--font-family); }
.qr-sheet .member-strip { align-self: stretch; margin-block-start: var(--family-sheet-qr-note-to-member); text-align: start; }
/* EsimNameSheet.kt: the sheet that names an eSIM. A title, which eSIM it is, the field, where the name lives. */
.esim-name-sheet { padding: var(--esim-name-sheet-title-top) var(--esim-name-sheet-text-inset) 0; text-align: center; }
.esim-name-sheet__title { color: var(--esim-name-sheet-title-color); font: var(--esim-name-sheet-title-style) var(--font-family); }
.esim-name-sheet__line { margin-block-start: var(--esim-name-sheet-title-to-line); color: var(--esim-name-sheet-line-color); font: var(--esim-name-sheet-line-style) var(--font-family); }
.esim-name-sheet__field { margin-block-start: var(--esim-name-sheet-line-to-field); text-align: start; }
.esim-name-sheet__note { margin-block-start: var(--esim-name-sheet-field-to-note); color: var(--esim-name-sheet-note-color); font: var(--esim-name-sheet-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: start; }
.sheet__ending--name { padding-block-start: var(--esim-name-sheet-field-to-button); }
/* TopUpSheet.kt: the options that add data or days, one of them chosen, and the button that pays. */
.top-up-sheet { padding: var(--spacing-xl) var(--top-up-sheet-list-inset) 0; }
.top-up-sheet__title { padding-inline: var(--sizing-min-touch-target); color: var(--palette-text-emphasis); font: var(--typography-heading) var(--font-family); text-align: center; }
.top-up-sheet__list { display: flex; flex-direction: column; gap: var(--top-up-sheet-row-gap); margin-block-start: var(--spacing-xl); }
.top-up-option { display: flex; align-items: center; gap: var(--top-up-sheet-price-to-mark); inline-size: 100%; min-block-size: var(--top-up-sheet-row-height); padding-inline: var(--top-up-sheet-label-inset) var(--top-up-sheet-mark-inset); border-radius: var(--top-up-sheet-row-radius); background: var(--top-up-sheet-row-fill); text-align: start; cursor: pointer; transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.top-up-option:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.top-up-option__label { flex: 1 1 0; min-inline-size: 0; color: var(--top-up-sheet-label-color); font: var(--top-up-sheet-label-style) var(--font-family); }
.top-up-option__price { color: var(--top-up-sheet-price-color); font: var(--top-up-sheet-price-style) var(--font-family); }
.top-up-option::after { content: ""; flex: none; inline-size: var(--top-up-sheet-mark-size); block-size: var(--top-up-sheet-mark-size); border-radius: 50%; background: var(--top-up-sheet-mark-off-fill) center / contain no-repeat; }
.top-up-option[aria-checked="true"] { box-shadow: 0 0 0 2px var(--palette-brand); }
.top-up-option[aria-checked="true"]::after { background-image: url("../assets/pictures/check_circle.svg"); }
.sheet__ending--top-up { padding-block-start: var(--top-up-sheet-list-to-button); }
.sheet .status-message { padding-block: var(--spacing-xl); }
/* ==========================================================================
6. Usage statistics
========================================================================== */
/* UsageRing (UsageParts.kt): the share of the plan that is used, as an arc over
its track, with the share written in the middle. Never mirrored. */
.usage-ring { position: relative; display: grid; place-items: center; inline-size: var(--usage-stats-ring-size); block-size: var(--usage-stats-ring-size); margin-inline: auto; direction: ltr; }
.usage-ring__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.usage-ring__track, .usage-ring__arc { fill: none; stroke-width: var(--usage-stats-ring-stroke); }
.usage-ring__track { stroke: var(--usage-stats-ring-track); }
.usage-ring__arc { stroke: var(--usage-stats-ring-arc-low); }
.usage-ring--medium .usage-ring__arc { stroke: var(--usage-stats-ring-arc-medium); }
.usage-ring--high .usage-ring__arc { stroke: var(--usage-stats-ring-arc-high); }
.usage-ring__text { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--usage-stats-ring-share-to-caption); }
.usage-ring__share { color: var(--usage-stats-ring-share-color); font: var(--usage-stats-ring-share-style) var(--font-family); }
.usage-ring__share small { font: var(--usage-stats-ring-sign-style) var(--font-family); }
.usage-ring__caption { max-inline-size: var(--usage-stats-ring-caption-max-width); color: var(--usage-stats-ring-caption-color); font: var(--usage-stats-ring-caption-style) var(--font-family); text-align: center; unicode-bidi: plaintext; }
/* UsageTile: what was used, what is left. A label, a figure with its unit, its share, and a cloud at the far end. */
.usage-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--usage-stats-tile-gap); }
.usage-tile { position: relative; display: flex; flex-direction: column; min-block-size: var(--usage-stats-tile-height); padding: var(--usage-stats-tile-label-top) var(--usage-stats-tile-inset) var(--spacing-sm); border-radius: var(--usage-stats-tile-radius); background: var(--card-fill); box-shadow: inset 0 0 0 1px var(--card-outline); color: var(--_tone, var(--usage-stats-tile-color-used)); }
.usage-tile--used { --_tone: var(--usage-stats-tile-color-used); }
.usage-tile--remaining { --_tone: var(--usage-stats-tile-color-remaining); }
.usage-tile__icon { position: absolute; inset-block-start: var(--usage-stats-tile-icon-top); inset-inline-end: var(--usage-stats-tile-inset); inline-size: var(--usage-stats-tile-icon-width); block-size: var(--usage-stats-tile-icon-height); }
.usage-tile__label { color: var(--usage-stats-tile-label-color); font: var(--usage-stats-tile-label-style) var(--font-family); }
.usage-tile__amount { align-self: flex-start; margin-block-start: var(--spacing-sm); font: var(--usage-stats-tile-amount-style) var(--font-family); }
/* A word in the figure's place ("Unlimited") is drawn a size that keeps it whole. */
.usage-tile__amount--word { font: var(--typography-title-large) var(--font-family); line-height: var(--typography-stat-number-line); }
.usage-tile__amount small { margin-inline-start: var(--usage-stats-tile-amount-gap); font: var(--usage-stats-tile-unit-style) var(--font-family); }
.usage-tile__share { margin-block-start: auto; padding-block-start: var(--spacing-sm); color: var(--usage-stats-tile-share-color); font: var(--usage-stats-tile-share-style) var(--font-family); }
/* AirlineMark.kt: a round-cornered square in the airline's colour holding its
code. It stands where a logo would, and is drawn in code. Not a control. Here
it is the small one of the flight strip. */
.airline-mark {
flex: none; display: inline-flex; align-items: center; justify-content: center;
inline-size: var(--airline-mark-large-size); block-size: var(--airline-mark-large-size); border-radius: var(--airline-mark-large-radius);
background: var(--airline-mark-brand); color: var(--airline-mark-code-color); font: var(--airline-mark-large-code-style) var(--font-family);
direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums;
}
.airline-mark--small { inline-size: var(--airline-mark-small-size); block-size: var(--airline-mark-small-size); border-radius: var(--airline-mark-small-radius); font: var(--airline-mark-small-code-style) var(--font-family); }
.airline-mark--navy { background: var(--airline-mark-navy); }
.airline-mark--positive { background: var(--airline-mark-positive); }
.airline-mark--coffee { background: var(--airline-mark-coffee); }
.airline-mark--danger { background: var(--airline-mark-danger); }
.airline-mark--warning { background: var(--airline-mark-warning); }
.airline-mark--sky { background: var(--airline-mark-sky); }
.airline-mark--landmark { background: var(--airline-mark-landmark); }
/* FlightStrip.kt: the flight an in-flight eSIM was bought for, where the ring
of another eSIM stands. Three columns across a pale strip, each a small
picture and a caption on one line and a value under them. A column starts a
fixed share of the strip's width after the one before it, so the three keep
their places whatever they hold. A caption too long for its column takes a
second line, and the three values stay on one. Not a control. */
.flight-strip {
display: grid; column-gap: var(--inflight-details-strip-column-gap);
grid-template-columns: repeat(2, calc(var(--inflight-details-strip-column-share) * (100% + var(--inflight-details-strip-inset) * 2) - var(--inflight-details-strip-column-gap))) minmax(0, 1fr);
min-block-size: var(--inflight-details-strip-height); padding: var(--inflight-details-strip-caption-top) var(--inflight-details-strip-inset);
border-radius: var(--inflight-details-strip-radius); background: var(--card-fill); box-shadow: inset 0 0 0 1px var(--card-outline);
}
.flight-strip__column { display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--inflight-details-strip-value-top) - var(--inflight-details-strip-caption-top) - var(--inflight-details-strip-picture-box)); min-inline-size: 0; }
.flight-strip__caption { display: flex; align-items: center; gap: var(--inflight-details-strip-picture-to-caption); min-block-size: var(--inflight-details-strip-picture-box); color: var(--inflight-details-strip-caption-color); font: var(--inflight-details-strip-caption-style) var(--font-family); }
.flight-strip__caption .icon { flex: none; color: var(--inflight-details-strip-icon-tint); --icon-size: var(--inflight-details-strip-picture-box); }
.flight-strip__value { color: var(--inflight-details-strip-value-color); font: var(--inflight-details-strip-value-style) var(--font-family); overflow-wrap: anywhere; }
@media (min-width: 768px) {
/* In a roomy card the strip is roomier too, and its words a size up, like the tiles under it. */
.flight-strip { padding: var(--spacing-lg); }
.flight-strip__caption { font: var(--typography-label) var(--font-family); }
.flight-strip__value { font: var(--typography-title-large) var(--font-family); }
}
/* The ring and the two tiles: one over the others on a phone, side by side where there is room. */
.usage-top { display: flex; flex-direction: column; gap: var(--usage-stats-ring-to-tiles); }
@media (min-width: 768px) {
.usage-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-xxl); align-items: center; }
.usage-top .usage-tiles { gap: var(--web-grid-gap); }
.usage-top .usage-tile { min-block-size: calc(var(--usage-stats-tile-height) * 1.2); padding: var(--spacing-lg); }
.usage-top .usage-tile__icon { inset-block-start: var(--spacing-lg); inset-inline-end: var(--spacing-lg); }
}
/* The panel that holds the usage bar: the bar, its three ends, and when it changes colour. */
.usage-plan-bar { padding: var(--usage-stats-panel-inset); border-radius: var(--usage-stats-panel-radius); background: var(--card-fill); box-shadow: inset 0 0 0 1px var(--card-outline); }
.usage-plan-bar__ends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xs); margin-block-start: var(--usage-stats-bar-to-ends); color: var(--usage-stats-end-color); font: var(--usage-stats-end-word-style) var(--font-family); }
.usage-plan-bar__ends > :nth-child(2) { text-align: center; }
.usage-plan-bar__ends > :nth-child(3) { text-align: end; }
.usage-plan-bar__ends b { font: var(--usage-stats-end-amount-style) var(--font-family); }
.usage-plan-bar__note { display: flex; align-items: center; justify-content: center; min-block-size: var(--usage-stats-note-min-height); margin-block-start: var(--usage-stats-ends-to-note); padding: var(--usage-stats-note-padding-vertical) var(--usage-stats-note-padding-horizontal); border-radius: var(--usage-stats-note-radius); background: var(--usage-stats-note-fill); color: var(--usage-stats-note-color); font: var(--usage-stats-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: center; }
/* The heading over the chart: its icon, its words. */
.usage-heading { display: flex; align-items: center; gap: var(--usage-stats-heading-icon-to-title); color: var(--usage-stats-heading-color); font: var(--usage-stats-heading-style) var(--font-family); }
.usage-heading .icon { color: var(--usage-stats-heading-icon-tint); --icon-size: var(--usage-stats-heading-icon-width); }
/* The heading and the range picker: one over the other on a phone, at the two ends of a line from a tablet up. */
.usage-head { display: flex; flex-direction: column; gap: var(--usage-stats-heading-to-ranges); }
@media (min-width: 768px) {
.usage-head { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-md); }
.usage-head .segmented-control--inline .segmented-control__segment { min-inline-size: calc(var(--web-sheet-width) * 0.25); padding-inline: var(--spacing-md); }
}
/* UsageChart.kt: bars over a scale. Never mirrored: the scale is at the start
and time runs the same way in every language. A bar's height is its share of
the scale, said in the markup. */
.usage-chart { direction: ltr; }
.usage-chart__frame { display: grid; grid-template-columns: minmax(var(--usage-stats-chart-scale-width), auto) minmax(0, 1fr); column-gap: var(--usage-stats-chart-mark-to-axis); padding-block-start: calc(var(--usage-stats-chart-height) - var(--usage-chart-plot-height, var(--usage-stats-chart-plot-height))); }
.usage-chart__scale { display: flex; flex-direction: column; justify-content: space-between; block-size: calc(var(--usage-chart-scale-height, var(--usage-stats-chart-scale-height)) + var(--typography-micro-line)); margin-block: auto calc(var(--typography-micro-line) / -2); align-self: end; color: var(--usage-stats-chart-mark-color); font: var(--usage-stats-chart-mark-style) var(--font-family); text-align: end; white-space: nowrap; }
.usage-chart__plot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; block-size: var(--usage-chart-plot-height, var(--usage-stats-chart-plot-height)); border-inline-start: var(--usage-stats-chart-line-width) solid var(--usage-stats-chart-line-color); border-block-end: var(--usage-stats-chart-line-width) solid var(--usage-stats-chart-line-color); }
.usage-chart__slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--usage-stats-chart-figure-to-bar); grid-column: span var(--usage-chart-span, 1); block-size: var(--usage-chart-scale-height, var(--usage-stats-chart-scale-height)); }
/* A reading that covers several days is one wide bar (UsageBarUi.span): its slot takes that many
columns of the plot, and its bar runs from where the bar of its first day would start to where
the bar of its last would end. A chart of days has thirty slots at most, so a bar covers
thirty at most; a chart of weeks has no wide bar. */
.usage-chart__slot--span-2 { --usage-chart-span: 2; } .usage-chart__slot--span-3 { --usage-chart-span: 3; } .usage-chart__slot--span-4 { --usage-chart-span: 4; } .usage-chart__slot--span-5 { --usage-chart-span: 5; } .usage-chart__slot--span-6 { --usage-chart-span: 6; }
.usage-chart__slot--span-7 { --usage-chart-span: 7; } .usage-chart__slot--span-8 { --usage-chart-span: 8; } .usage-chart__slot--span-9 { --usage-chart-span: 9; } .usage-chart__slot--span-10 { --usage-chart-span: 10; } .usage-chart__slot--span-11 { --usage-chart-span: 11; }
.usage-chart__slot--span-12 { --usage-chart-span: 12; } .usage-chart__slot--span-13 { --usage-chart-span: 13; } .usage-chart__slot--span-14 { --usage-chart-span: 14; } .usage-chart__slot--span-15 { --usage-chart-span: 15; } .usage-chart__slot--span-16 { --usage-chart-span: 16; }
.usage-chart__slot--span-17 { --usage-chart-span: 17; } .usage-chart__slot--span-18 { --usage-chart-span: 18; } .usage-chart__slot--span-19 { --usage-chart-span: 19; } .usage-chart__slot--span-20 { --usage-chart-span: 20; } .usage-chart__slot--span-21 { --usage-chart-span: 21; }
.usage-chart__slot--span-22 { --usage-chart-span: 22; } .usage-chart__slot--span-23 { --usage-chart-span: 23; } .usage-chart__slot--span-24 { --usage-chart-span: 24; } .usage-chart__slot--span-25 { --usage-chart-span: 25; } .usage-chart__slot--span-26 { --usage-chart-span: 26; }
.usage-chart__slot--span-27 { --usage-chart-span: 27; } .usage-chart__slot--span-28 { --usage-chart-span: 28; } .usage-chart__slot--span-29 { --usage-chart-span: 29; } .usage-chart__slot--span-30 { --usage-chart-span: 30; }
.usage-chart__figure { color: var(--usage-stats-chart-figure-color); font: var(--usage-stats-chart-figure-style) var(--font-family); }
.usage-chart__bar { flex: none; display: block; inline-size: calc(100% - 100% / var(--usage-chart-span, 1) + min(var(--usage-stats-chart-bar-width-share) * 100% / var(--usage-chart-span, 1), var(--usage-chart-bar-max-width, var(--usage-stats-chart-bar-max-width)))); border-start-start-radius: var(--usage-stats-chart-bar-top-radius); border-start-end-radius: var(--usage-stats-chart-bar-top-radius); background: linear-gradient(to bottom, var(--usage-stats-chart-bar-top), var(--usage-stats-chart-bar-foot)); }
.usage-chart__labels { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-block-start: var(--usage-stats-chart-line-to-labels); color: var(--usage-stats-chart-label-color); font: var(--usage-stats-chart-label-style) var(--font-family); text-align: center; }
.usage-chart__note { margin-block-start: var(--usage-stats-chart-labels-to-note); color: var(--usage-stats-chart-note-color); font: var(--usage-stats-chart-note-style) var(--font-family); text-align: center; unicode-bidi: plaintext; }
/* A label is centred under its slot, and keeps whole where the slot is narrower than it. */
.usage-chart__labels span { display: flex; justify-content: center; justify-self: center; inline-size: 0; white-space: nowrap; }
/* In the chart's place: nothing to draw, or the readings could not be read. */
.usage-chart__message { display: grid; place-items: center; min-block-size: calc(var(--usage-stats-chart-height) + var(--spacing-xl)); }
.usage-chart__message .status-message { padding-block: 0; }
@media (min-width: 768px) {
/* With room the plot is taller, and its bars wider. */
.usage-chart { --usage-chart-plot-height: calc(var(--usage-stats-chart-plot-height) * 2); --usage-chart-scale-height: calc(var(--usage-stats-chart-scale-height) * 2); --usage-chart-bar-max-width: calc(var(--usage-stats-chart-bar-max-width) * 1.6); }
.usage-chart__scale, .usage-chart__labels { font: var(--typography-caption-medium) var(--font-family); }
.usage-chart__scale { block-size: calc(var(--usage-chart-scale-height) + var(--typography-caption-medium-line)); margin-block-end: calc(var(--typography-caption-medium-line) / -2); }
}
/* UsageStat: one of the three small figures under the chart. A square with a glyph, a word over a figure. */
.usage-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--usage-stats-stat-gap); }
.usage-stat { display: flex; align-items: center; gap: var(--usage-stats-stat-square-to-text); min-block-size: var(--usage-stats-stat-height); padding: var(--usage-stats-stat-square-inset); border-radius: var(--usage-stats-stat-radius); background: var(--usage-stats-stat-fill); }
.usage-stat__square { flex: none; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--usage-stats-stat-square-size); block-size: var(--usage-stats-stat-square-size); border-radius: var(--usage-stats-stat-square-radius); background: var(--_tone, var(--usage-stats-stat-square-fill-days-left)); color: var(--usage-stats-stat-glyph-tint); --icon-size: var(--usage-stats-stat-glyph-width-highest); }
.usage-stat--days-left { --_tone: var(--usage-stats-stat-square-fill-days-left); }
.usage-stat--highest { --_tone: var(--usage-stats-stat-square-fill-highest); }
.usage-stat--average { --_tone: var(--usage-stats-stat-square-fill-average); }
.usage-stat__text { min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xxs); }
.usage-stat__label { color: var(--usage-stats-stat-label-color); font: var(--usage-stats-stat-label-style) var(--font-family); }
.usage-stat__value { color: var(--usage-stats-stat-value-color); font: var(--usage-stats-stat-value-style) var(--font-family); }
@media (max-width: 767px) {
/* Three across a phone: the figure is a size smaller, so that "0.97 GB" stays whole. */
.usage-stat__value { font: var(--typography-body-bold) var(--font-family); }
}
/* The forecast strip: how long the data lasts at the rate it is used. One control, which opens "Add data". */
.usage-forecast { display: flex; align-items: center; gap: var(--usage-stats-forecast-icon-to-text); inline-size: 100%; min-block-size: var(--usage-stats-forecast-height); padding-inline: var(--usage-stats-forecast-inset); border-radius: var(--usage-stats-forecast-radius); background: var(--usage-stats-forecast-fill); color: var(--usage-stats-forecast-color); font: var(--usage-stats-forecast-style) var(--font-family); line-height: var(--typography-caption-loose-line); text-align: start; cursor: pointer; transition: background-color var(--motion-selection-millis) var(--motion-easing); --web-focus-color: var(--palette-brand); }
.usage-forecast:hover { background: var(--palette-navy); }
.usage-forecast__icon { color: var(--usage-stats-forecast-icon-tint); --icon-size: var(--usage-stats-forecast-icon-size); }
.usage-forecast__text { flex: 1 1 0; min-inline-size: 0; padding-block: var(--spacing-xs); }
.usage-forecast__arrow { color: var(--usage-stats-forecast-arrow-tint); inline-size: var(--usage-stats-forecast-arrow-width); block-size: var(--usage-stats-forecast-arrow-height); }
@media (min-width: 768px) {
.usage-forecast { font: var(--typography-label) var(--font-family); }
}
/* ==========================================================================
7. Usage alerts
========================================================================== */
/* One alert, as a card (EsimAlertsScreen.kt): its icon, its name, what turns it on, and whether it is on now. Not a control. */
.usage-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--esim-alerts-icon-to-text); align-items: start; padding: var(--esim-alerts-card-padding); border-radius: var(--esim-alerts-card-radius); background: var(--card-fill); box-shadow: inset 0 0 0 1px var(--card-outline); }
.usage-alert + .usage-alert { margin-block-start: var(--esim-alerts-card-gap); }
.usage-alert__icon { color: var(--esim-alerts-icon-tint); --icon-size: var(--esim-alerts-icon-size); }
.usage-alert__title { color: var(--esim-alerts-title-color); font: var(--esim-alerts-title-style) var(--font-family); }
.usage-alert__trigger { grid-column: 2 / -1; margin-block-start: var(--esim-alerts-title-to-trigger); color: var(--esim-alerts-trigger-color); font: var(--esim-alerts-trigger-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.usage-alert__status { display: inline-flex; align-items: center; block-size: var(--esim-alerts-pill-height); padding-inline: var(--esim-alerts-pill-padding); border-radius: var(--esim-alerts-pill-radius); background: var(--esim-alerts-pill-off-fill); color: var(--esim-alerts-pill-off-label-color); font: var(--esim-alerts-pill-label-style) var(--font-family); white-space: nowrap; }
.usage-alert__status--on { background: var(--esim-alerts-pill-on-fill); color: var(--esim-alerts-pill-on-label-color); }
.usage-alerts__intro { color: var(--esim-alerts-intro-color); font: var(--esim-alerts-intro-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.usage-alerts__note { margin-block-start: var(--esim-alerts-cards-to-note); color: var(--esim-alerts-note-color); font: var(--esim-alerts-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
@media (min-width: 768px) {
.usage-alerts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--web-grid-gap); }
.usage-alert { padding: var(--spacing-xl); }
.usage-alert + .usage-alert { margin-block-start: 0; }
.usage-alert__title { font: var(--typography-title) var(--font-family); }
.usage-alert__trigger { font: var(--typography-label) var(--font-family); line-height: var(--typography-label-tall-line); }
}
/* ==========================================================================
8. Check my connection
========================================================================== */
/* ConnectionParts.kt: the shell every card of the screen has. */
.check-card { padding: var(--connection-check-card-padding); border-radius: var(--connection-check-card-radius); background: var(--card-fill); box-shadow: inset 0 0 0 1px var(--card-outline); }
.check-card__head { display: flex; align-items: center; gap: var(--connection-check-card-icon-to-title); }
.check-card__icon { color: var(--connection-check-card-icon-tint); --icon-size: var(--connection-check-card-icon); }
.check-card__title { flex: 1 1 0; min-inline-size: 0; color: var(--connection-check-title-color); font: var(--connection-check-title-style) var(--font-family); }
.check-card__body { margin-block-start: var(--connection-check-title-to-body); color: var(--connection-check-body-color); font: var(--connection-check-body-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.check-card__content { margin-block-start: var(--connection-check-body-to-content); }
.check-card__message { margin-block-start: var(--connection-check-button-to-message); color: var(--connection-check-message-color); font: var(--connection-check-message-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.check-card__note { margin-block-start: var(--connection-check-to-note); color: var(--connection-check-note-color); font: var(--connection-check-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
@media (min-width: 768px) {
.check-card { padding: var(--spacing-xl); border-radius: var(--radius-card); }
}
/* Where and how to run a check, under the notice. */
.check-hint { margin-block-start: var(--connection-check-notice-to-hint); color: var(--connection-check-hint-color); font: var(--connection-check-hint-style) var(--font-family); line-height: var(--typography-label-tall-line); }
/* What a check found: its icon and its word in the colour of the finding, when, what it means, and why. */
.check-result { --_tone: var(--connection-check-color-unknown); --_wash: var(--connection-check-wash-unknown); }
.check-result--good { --_tone: var(--connection-check-color-good); --_wash: var(--connection-check-wash-good); }
.check-result--usable { --_tone: var(--connection-check-color-usable); --_wash: var(--connection-check-wash-usable); }
.check-result--poor { --_tone: var(--connection-check-color-poor); --_wash: var(--connection-check-wash-poor); }
.check-result__head { display: flex; align-items: center; gap: var(--connection-check-icon-to-headline); }
.check-result__disc { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--connection-check-result-disc); block-size: var(--connection-check-result-disc); border-radius: 50%; background: var(--_wash); color: var(--_tone); --icon-size: var(--connection-check-result-icon); }
.check-result__headline { flex: 1 1 0; min-inline-size: 0; color: var(--_tone); font: var(--connection-check-headline-style) var(--font-family); }
.check-result__time { color: var(--connection-check-time-color); font: var(--connection-check-time-style) var(--font-family); white-space: nowrap; }
.check-result__body { margin-block-start: var(--connection-check-headline-to-body); color: var(--connection-check-body-color); font: var(--connection-check-body-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.check-result__reasons { display: flex; flex-direction: column; gap: var(--connection-check-reason-gap); margin-block-start: var(--connection-check-body-to-reasons); }
.check-result__reason { display: flex; align-items: baseline; gap: var(--connection-check-reason-dot-to-text); color: var(--connection-check-reason-color); font: var(--connection-check-reason-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.check-result__reason::before { content: ""; flex: none; inline-size: var(--connection-check-reason-dot); block-size: var(--connection-check-reason-dot); border-radius: 50%; background: var(--_tone); transform: translateY(-50%); }
/* One thing to try, with how to do it on the phone. One step at a time. */
.check-fix__count { color: var(--connection-check-step-count-color); font: var(--connection-check-step-count-style) var(--font-family); white-space: nowrap; }
.check-fix__step { display: flex; align-items: center; gap: var(--connection-check-step-icon-to-title); margin-block-start: var(--connection-check-heading-to-step); }
.check-fix__icon { color: var(--connection-check-step-icon-tint); --icon-size: var(--connection-check-step-icon); }
.check-fix__title { flex: 1 1 0; min-inline-size: 0; color: var(--connection-check-step-title-color); font: var(--connection-check-step-title-style) var(--font-family); }
.check-fix__body { margin-block-start: var(--connection-check-step-title-to-body); color: var(--connection-check-body-color); font: var(--connection-check-body-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.check-fix .code-row { margin-block-start: var(--connection-check-step-body-to-code); }
.check-fix__links { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin-block-start: var(--connection-check-to-step-links); }
.check-fix__links .maak-text-button { color: var(--connection-check-step-link-color); }
.check-fix__links .maak-text-button:only-child { margin-inline-start: auto; }
/* The button that starts a check, and under it why it is off or what happened to the last press. */
.check-button__note { margin-block-start: var(--connection-check-button-to-note); color: var(--connection-check-button-note-color); font: var(--connection-check-button-note-style) var(--font-family); line-height: var(--typography-label-tall-line); text-align: center; }
.check-button .icon { --icon-size: var(--connection-check-busy-icon-size); }
/* What the button says while a check runs is a sentence: it wraps. */
.check-button .maak-button { padding: var(--spacing-sm) var(--spacing-lg); white-space: normal; }
/* The three cards a check leaves: side by side where there is room for two. */
.check-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--connection-check-section-gap); }
.check-cards > * { min-inline-size: 0; }
@media (min-width: 768px) {
.check-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--web-grid-gap); align-items: start; }
.check-cards__wide { grid-column: 1 / -1; }
}
/* ==========================================================================
9. A family's plan
========================================================================== */
/* The hero of the family screens (FamilyParts.kt, FamilyHeroTokens): a picture,
the way back on a white disc, the wordmark, a title and a line. From a tablet
up the band takes its place, and it is words on the band. */
.family-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-block-size: var(--family-hero-height); margin-block-start: var(--family-screen-hero-top); padding: var(--family-hero-text-inset); border-radius: var(--family-hero-radius); background: var(--palette-brand); color: var(--family-hero-title-color); --web-focus-color: var(--palette-on-brand); }
.family-hero__picture { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.family-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 40%, var(--palette-brand)); opacity: 0.7; }
.family-hero__back { position: absolute; inset-block-start: var(--family-hero-back-top); inset-inline-start: var(--family-hero-back-inset); 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%; }
.family-hero__back::before { content: ""; position: absolute; inline-size: var(--family-hero-back-size); block-size: var(--family-hero-back-size); border-radius: 50%; background: var(--family-hero-back-fill); }
.family-hero__back .icon { position: relative; color: var(--family-hero-back-icon-tint); --icon-size: var(--family-hero-back-icon-size); }
.family-hero__wordmark { position: absolute; inset-block-start: var(--family-hero-wordmark-top); inset-inline: 0; margin-inline: auto; inline-size: var(--family-hero-wordmark-width); block-size: var(--family-hero-wordmark-height); color: var(--family-hero-wordmark-tint); }
.family-hero__title { font: var(--family-hero-title-style) var(--font-family); }
.family-hero__subtitle { margin-block-start: var(--spacing-sm); color: var(--family-hero-subtitle-color); font: var(--family-hero-subtitle-style) var(--font-family); }
@media (min-width: 768px) {
.family-hero { display: grid; grid-template-columns: var(--sizing-min-touch-target) minmax(0, 1fr); column-gap: var(--spacing-xs); align-items: center; min-block-size: 0; margin-block-start: 0; padding: 0; overflow: visible; border-radius: 0; background: none; }
.family-hero::after, .family-hero__picture, .family-hero__wordmark { display: none; }
.family-hero__back { position: static; background: var(--palette-on-brand-faint); }
.family-hero__back::before { content: none; }
.family-hero__back .icon { color: var(--palette-on-brand); }
.family-hero__back:hover { background: var(--palette-on-brand); }
.family-hero__back:hover .icon { color: var(--palette-brand); }
.family-hero__title { font: var(--typography-headline-bold) var(--font-family); }
.family-hero__subtitle { grid-column: 2; margin-block-start: var(--spacing-xs); color: var(--palette-on-brand-soft); font: var(--typography-body-loose) var(--font-family); }
}
/* That what the screen shows is sample content: one centred line under the hero. */
.family-sample { margin-block-start: var(--family-screen-hero-to-sample); color: var(--family-screen-sample-color); font: var(--family-screen-sample-style) var(--font-family); text-align: center; }
@media (min-width: 768px) {
.family-sample { margin-block-start: var(--spacing-xs); padding-inline-start: calc(var(--sizing-min-touch-target) + var(--spacing-xs)); color: var(--palette-on-brand-soft); text-align: start; }
}
/* A heading of the family screens: an icon, a title, and where one is drawn the arrow that leads on. */
.family-heading { display: flex; align-items: center; gap: var(--family-screen-heading-icon-to-title); min-block-size: var(--sizing-min-touch-target); margin-block-end: var(--family-screen-heading-to-block); }
.family-heading__icon { color: var(--family-screen-heading-icon-tint); --icon-size: var(--family-screen-heading-icon-width); }
.family-heading__title { flex: 1 1 0; min-inline-size: 0; color: var(--family-screen-heading-title-color); font: var(--family-screen-heading-title-style) var(--font-family); }
.family-heading__action { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); min-inline-size: var(--sizing-min-touch-target); min-block-size: var(--sizing-min-touch-target); border-radius: var(--radius-chip); color: var(--palette-text-secondary); font: var(--typography-label-strong) var(--font-family); }
.family-heading__action:hover { color: var(--palette-brand); }
.family-heading__action .icon { inline-size: var(--section-header-arrow-width); block-size: var(--section-header-arrow-height); }
.family-heading__action span:not(.icon) { display: none; }
@media (min-width: 768px) {
.family-heading__action span:not(.icon) { display: inline; }
.family-heading__action { padding-inline: var(--spacing-xs); }
}
.family-sentence { margin-block: 0 var(--family-members-sentence-to-block); color: var(--family-members-sentence-color); font: var(--family-members-who-sentence-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.family-sentence--quiet { font: var(--family-members-invite-sentence-style) var(--font-family); line-height: var(--typography-label-tall-line); }
/* The plan strip: three figures on the brand colour, parted by lines (FamilyMembersTokens). */
.family-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-block-size: var(--family-members-strip-height); padding-block: var(--family-members-strip-label-top) var(--spacing-md); border-radius: var(--family-members-strip-radius); background: var(--family-members-strip-fill); color: var(--family-members-strip-label-color); }
.family-strip__item { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--spacing-xxs); padding-inline: var(--spacing-lg); min-inline-size: 0; }
.family-strip__item + .family-strip__item { border-inline-start: var(--family-members-strip-divider-width) solid var(--family-members-strip-divider); }
/* A label too long for its column takes a second line; the three values stay on one, at the strip's foot. */
.family-strip__label { font: var(--family-members-strip-label-style) var(--font-family); }
.family-strip__value { color: var(--family-members-strip-value-color); font: var(--family-members-strip-value-style) var(--font-family); }
/* MemberAvatar: a member's picture, a disc holding one letter. */
.member-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--member-avatar-size); block-size: var(--member-avatar-size); border-radius: 50%; background: var(--member-avatar-fill); color: var(--member-avatar-letter-color); font: var(--member-avatar-letter-style) var(--font-family); }
/* MemberTile: one place of a family plan. A member, with the three dots that
open their menu; or a free place, which is a control itself. */
.member-tiles { --member-tiles-gap: var(--member-tile-gap); display: grid; grid-template-columns: repeat(var(--member-tile-per-row), minmax(0, 1fr)); gap: var(--member-tiles-gap); }
.member-tile { position: relative; display: flex; flex-direction: column; align-items: center; min-block-size: var(--member-tile-members-height); padding: var(--member-tile-avatar-top) var(--member-tile-name-inset) var(--member-tile-pill-inset); border-radius: var(--member-tile-radius); background: var(--member-tile-fill); text-align: center; }
.member-tile__name { max-inline-size: 100%; margin-block-start: var(--spacing-xs); color: var(--member-tile-name-color); font: var(--member-tile-name-style) var(--font-family); }
.member-tile__pill { display: flex; align-items: center; justify-content: center; align-self: stretch; block-size: var(--member-tile-pill-height); margin-block-start: auto; border-radius: var(--member-tile-pill-radius); background: var(--member-tile-pill-fill); color: var(--member-tile-pill-label-color); font: var(--member-tile-pill-label-style) var(--font-family); }
.member-tile__menu { position: absolute; inset-block-start: 0; inset-inline-start: 0; display: inline-flex; align-items: flex-start; justify-content: flex-start; inline-size: var(--member-tile-menu-touch-target); block-size: var(--member-tile-menu-touch-target); padding: var(--member-tile-menu-icon-top) var(--member-tile-menu-icon-inset); border-radius: var(--member-tile-radius); color: var(--member-tile-menu-icon-tint); }
.member-tile__menu .icon { inline-size: var(--member-tile-menu-icon-width); block-size: var(--member-tile-menu-icon-height); }
.member-tile__menu:hover, .member-tile__menu[aria-expanded="true"] { color: var(--palette-brand); }
/* A free place: a dashed outline, a disc with a plus, "Add a member". */
.member-tile--free { justify-content: center; gap: var(--spacing-sm); padding-block: var(--spacing-sm); background: none; border: var(--member-tile-empty-border-width) dashed var(--member-tile-empty-border); cursor: pointer; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.member-tile--free:hover { background: var(--palette-brand-wash); }
.member-tile__plus { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--member-tile-members-empty-disc-size); block-size: var(--member-tile-members-empty-disc-size); border-radius: 50%; background: var(--member-tile-empty-disc-fill); color: var(--member-tile-empty-icon-tint); --icon-size: var(--member-tile-empty-icon-size); }
.member-tile__add { color: var(--member-tile-members-empty-label-color); font: var(--member-tile-members-empty-label-style) var(--font-family); }
@media (min-width: 768px) {
.member-tiles { --member-tiles-gap: var(--web-grid-gap); }
.member-tile { min-block-size: calc(var(--member-tile-members-height) * 1.3); padding-block-start: var(--spacing-xl); }
.member-tile .member-avatar { inline-size: calc(var(--member-avatar-size) * 1.4); block-size: calc(var(--member-avatar-size) * 1.4); font: var(--typography-heading) var(--font-family); }
.member-tile__name { margin-block-start: var(--spacing-sm); font: var(--typography-title) var(--font-family); }
.member-tile__plus { inline-size: var(--member-tile-checkout-empty-disc-size); block-size: var(--member-tile-checkout-empty-disc-size); }
.member-tile__add { font: var(--member-tile-checkout-empty-label-style) var(--font-family); color: var(--member-tile-members-empty-label-color); }
}
/* MemberMenu.kt: a member's menu, open under the three dots of their tile. The page behind is not dimmed.
It opens away from the page's leading side, its leading edge under the dots; where that would carry
it past the far edge of the tiles it is moved back inside, as in the apps. The place it may stand in
(.member-menu-place) is the row of tiles from edge to edge, worked out from the tile's own place in
its row, and in it a gap as wide as the way to the dots gives way before the menu does.
The four rules below are MemberTileTokens.perRow, which a selector cannot read. */
.member-tile { --member-tile-column: 0; }
.member-tile:nth-child(4n + 2) { --member-tile-column: 1; }
.member-tile:nth-child(4n + 3) { --member-tile-column: 2; }
.member-tile:nth-child(4n + 4) { --member-tile-column: 3; }
.member-menu-place {
position: absolute; z-index: 5; display: flex; pointer-events: none;
inset-block-start: calc(var(--member-tile-menu-icon-top) + var(--member-tile-menu-icon-height) + var(--member-menu-top-under-dots));
inset-inline-start: calc(var(--member-tile-column) * (-100% - var(--member-tiles-gap)));
inset-inline-end: calc((var(--member-tile-per-row) - 1 - var(--member-tile-column)) * (-100% - var(--member-tiles-gap)));
}
.member-menu-place::before { content: ""; flex: 0 1 calc(var(--member-tile-column) * ((100% - (var(--member-tile-per-row) - 1) * var(--member-tiles-gap)) / var(--member-tile-per-row) + var(--member-tiles-gap)) + var(--member-tile-menu-icon-inset)); }
.member-menu { flex: none; max-inline-size: 100%; min-inline-size: var(--member-menu-min-width); padding: calc(var(--member-menu-padding) - (var(--sizing-min-touch-target) - var(--member-menu-line-height)) / 2) 0; border-radius: var(--member-menu-radius); background: var(--member-menu-fill); box-shadow: var(--member-menu-shadow); text-align: start; pointer-events: auto; }
.member-menu--still { display: inline-block; }
.member-menu__entry { display: flex; align-items: center; gap: var(--member-menu-icon-to-label); inline-size: 100%; min-block-size: var(--sizing-min-touch-target); padding-inline: calc(var(--member-menu-padding) + var(--member-menu-icon-inset) - var(--spacing-sm)) calc(var(--member-menu-padding) + var(--member-menu-label-trailing-inset) - var(--spacing-sm)); color: var(--member-menu-label-color); font: var(--member-menu-label-style) var(--font-family); text-align: start; cursor: pointer; }
.member-menu__entry .icon { color: var(--member-menu-icon-tint); --icon-size: var(--member-menu-icon-box); }
.member-menu__entry:hover { background: var(--palette-brand-wash); }
.member-menu__entry--destructive, .member-menu__entry--destructive .icon { color: var(--member-menu-destructive-color); }
@media (min-width: 768px) {
.member-menu__entry { font: var(--typography-label-strong) var(--font-family); }
}
/* The count panel of "Who uses the plan": how many places are taken, and a disc a place. */
.family-count { display: flex; align-items: center; gap: var(--family-members-count-text-to-discs); min-block-size: var(--family-members-count-height); padding: var(--family-members-count-title-top) var(--family-members-count-disc-trailing-inset) var(--family-members-count-bottom-padding) var(--family-members-count-leading-inset); border-radius: var(--family-members-count-radius); background: var(--family-members-count-fill); }
.family-count__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.family-count__title { color: var(--family-members-count-title-color); font: var(--family-members-count-title-style) var(--font-family); }
.family-count__line { color: var(--family-members-count-line-color); font: var(--family-members-count-line-style) var(--font-family); line-height: var(--typography-label-tall-line); }
/* The discs are drawn from the far end: the taken places first. */
.family-count__discs { display: flex; flex-direction: row-reverse; gap: var(--family-members-count-disc-gap); }
.family-count__disc { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--family-members-count-disc-size); block-size: var(--family-members-count-disc-size); border-radius: 50%; background: var(--family-members-count-disc-free); color: var(--family-members-count-disc-free-icon-tint); --icon-size: var(--family-members-count-disc-free-icon-size); }
.family-count__disc--taken { background: var(--family-members-count-disc-taken); }
/* A way to send something to a member: a chip of "Who uses the plan", a tile of "Send the eSIM again". */
.send-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--family-members-way-gap); }
.send-way { display: flex; align-items: center; gap: var(--family-members-way-square-to-label); min-block-size: var(--sizing-min-touch-target); padding: var(--spacing-xxs) var(--family-members-way-label-trailing-inset) var(--spacing-xxs) var(--family-members-way-square-inset); border-radius: var(--family-members-way-radius); background: var(--family-members-way-fill); color: var(--family-members-way-label-color); font: var(--family-members-way-label-style) var(--font-family); text-align: start; cursor: pointer; transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.send-way:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.send-way__square { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--family-members-way-square-size); block-size: var(--family-members-way-square-size); border-radius: var(--family-members-way-square-radius); background: var(--_tone, var(--family-members-way-link)); color: var(--family-members-way-glyph-tint); --icon-size: var(--family-members-way-glyph-size); }
.send-way--link { --_tone: var(--family-members-way-link); }
.send-way--whatsapp { --_tone: var(--family-members-way-whatsapp); }
.send-way--email { --_tone: var(--family-members-way-email); }
/* The label is drawn smaller to stay whole in a narrow chip, as the apps draw it. */
.send-way { container-type: inline-size; }
.send-way__label { min-inline-size: 0; font-size: min(1em, 11cqi); line-height: var(--typography-label-line); }
/* The tile of a sheet: the square over the word, one of the three chosen. */
.send-ways--tiles { gap: var(--family-sheet-way-gap); }
.send-ways--tiles .send-way { flex-direction: column; justify-content: center; gap: var(--spacing-xs); min-block-size: var(--family-sheet-way-height); padding: var(--spacing-sm) var(--spacing-xxs); border-radius: var(--family-sheet-way-radius); background: var(--family-sheet-way-fill); text-align: center; }
.send-ways--tiles .send-way[aria-checked="true"] { box-shadow: 0 0 0 var(--family-sheet-way-selected-border-width) var(--family-sheet-way-selected-border); }
.send-ways--tiles .send-way__label { max-inline-size: 100%; }
@media (min-width: 1100px) {
/* In a side column the three chips stand one over another. */
.layout-wrap__aside .send-ways:not(.send-ways--tiles) { grid-template-columns: minmax(0, 1fr); }
}
/* The note at the foot of "Who uses the plan", and of the sheet that adds data: a title, a sentence. */
.family-note { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--family-members-note-icon-to-text); row-gap: var(--family-members-note-title-to-body); align-items: start; min-block-size: var(--family-members-note-min-height); padding: var(--family-members-note-padding); border-radius: var(--family-members-note-radius); background: var(--family-members-note-fill); }
.family-note__icon { color: var(--family-members-note-icon-tint); --icon-size: var(--family-members-note-icon-size); }
.family-note__title { color: var(--family-members-note-title-color); font: var(--family-members-note-title-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.family-note__body { grid-column: 2; color: var(--family-members-note-body-color); font: var(--family-members-note-body-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* A note with no title: one sentence beside its icon. */
.family-note--plain { min-block-size: 0; align-items: center; background: var(--palette-brand-mist); }
.family-note--plain .family-note__body { grid-column: auto; }
/* The strip that says which member a sheet is about (MemberStripTokens). */
.member-strip { display: flex; align-items: center; gap: var(--member-strip-avatar-to-text); min-block-size: var(--member-strip-height); padding-inline: var(--member-strip-avatar-inset) var(--member-strip-pill-trailing-inset); border-radius: var(--member-strip-radius); background: var(--member-strip-fill); }
.member-strip__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.member-strip__name { color: var(--member-strip-name-color); font: var(--member-strip-name-style) var(--font-family); }
.member-strip__device { color: var(--member-strip-device-color); font: var(--member-strip-device-style) var(--font-family); }
/* The pill of a member's eSIM: a white dot and a word on a colour. */
.member-pill { display: inline-flex; align-items: center; gap: var(--member-strip-pill-dot-to-label); block-size: var(--member-strip-pill-height); padding-inline: var(--member-strip-pill-leading-padding) var(--member-strip-pill-trailing-padding); border-radius: var(--member-strip-pill-height); background: var(--_tone, var(--member-strip-pill-running)); color: var(--member-strip-pill-label-color); font: var(--member-strip-pill-label-style) var(--font-family); white-space: nowrap; }
.member-pill::before { content: ""; flex: none; inline-size: var(--member-strip-pill-dot-size); block-size: var(--member-strip-pill-dot-size); border-radius: 50%; background: var(--member-strip-pill-dot-color); }
.member-pill--running { --_tone: var(--member-strip-pill-running); }
.member-pill--paused { --_tone: var(--member-strip-pill-paused); }
.member-pill--not-installed { --_tone: var(--member-strip-pill-not-installed); }
.member-pill--row { block-size: var(--member-row-pill-height); padding-inline: var(--member-row-pill-leading-padding) var(--member-row-pill-trailing-padding); gap: var(--member-row-pill-dot-to-label); }
/* The summary of a family's usage (FamilyUsageParts.kt): four figures over the plan's usage bar. */
.family-summary { padding: var(--family-usage-summary-icon-top) var(--family-usage-summary-bar-inset) var(--family-usage-summary-bar-inset); border-radius: var(--family-usage-summary-radius); background: var(--card-fill); box-shadow: inset 0 0 0 1px var(--card-outline); }
.family-summary__figures { display: grid; grid-template-columns: repeat(var(--family-usage-summary-columns), minmax(0, 1fr)); gap: var(--family-usage-summary-column-gap); padding-inline: var(--spacing-sm); margin-block-end: var(--spacing-md); }
.family-summary__figure { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xxs); min-inline-size: 0; }
.family-summary__figure .icon { --icon-size: var(--family-usage-summary-icon-box); color: var(--_tone, var(--family-usage-total-tint)); }
.family-summary__figure--total { --_tone: var(--family-usage-total-tint); }
.family-summary__figure--used { --_tone: var(--family-usage-used-tint); }
.family-summary__figure--remaining { --_tone: var(--family-usage-remaining-tint); }
.family-summary__figure--days { --_tone: var(--family-usage-days-tint); }
.family-summary__label { color: var(--family-usage-summary-label-color); font: var(--family-usage-summary-label-style) var(--font-family); }
.family-summary__value { color: var(--family-usage-summary-value-color); font: var(--family-usage-summary-value-style) var(--font-family); }
@media (min-width: 768px) {
.family-summary { padding: var(--spacing-xl); border-radius: var(--radius-card); }
.family-summary__figures { padding-inline: 0; margin-block-end: var(--spacing-lg); }
}
@media (min-width: 1100px) {
/* In a side column the four figures stand two by two. */
.layout-wrap__aside .family-summary__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg) var(--spacing-md); }
}
/* One member's use (MemberRowTokens): who, where their eSIM stands and on which phone, then used and remaining over their own bar. */
.member-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--family-usage-row-gap); }
@media (min-width: 768px) {
.member-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--web-grid-gap); }
}
.member-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--member-row-avatar-to-text); align-items: center; min-block-size: var(--member-row-height); padding: var(--spacing-sm) var(--member-row-bar-inset) var(--spacing-sm) var(--member-row-avatar-inset); border-radius: var(--member-row-radius); background: var(--member-row-fill); }
.member-row__text { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--member-row-pill-line-to-device); }
.member-row__who { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-xxs) var(--member-row-name-to-pill); }
.member-row__name { color: var(--member-row-name-color); font: var(--member-row-name-style) var(--font-family); }
.member-row__device { color: var(--member-row-device-color); font: var(--member-row-device-style) var(--font-family); }
.member-row__usage { min-inline-size: 0; display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.member-row__ends { display: flex; justify-content: space-between; gap: var(--member-row-end-gap); color: var(--member-row-end-color); }
.member-row__end { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xxs); font: var(--member-row-end-word-style) var(--font-family); }
.member-row__end:last-child { align-items: flex-end; }
.member-row__end b { font: var(--member-row-end-amount-style) var(--font-family); }
.member-row .usage-bar { block-size: var(--member-row-bar-height); border-radius: var(--member-row-bar-radius); background: var(--member-row-bar-track); }
.member-row .usage-bar::-webkit-progress-bar { background: var(--member-row-bar-track); border-radius: var(--member-row-bar-radius); }
.member-row .usage-bar::-webkit-progress-value { border-radius: var(--member-row-bar-radius); }
/* What of the plan's data is in no member's row, one line each, under the rows. */
.member-rows__outside { display: flex; flex-direction: column; gap: var(--family-usage-outside-line-gap); margin-block-start: var(--family-usage-rows-to-outside); color: var(--family-usage-outside-color); font: var(--family-usage-outside-style) var(--font-family); }
.member-rows__note { color: var(--family-usage-members-note-color); font: var(--family-usage-members-note-style) var(--font-family); line-height: var(--typography-label-tall-line); }
/* The sheet that adds data to a family's plan: its options as tiles, two across, one of them chosen. */
.top-up-tiles { display: grid; grid-template-columns: repeat(var(--family-top-up-sheet-tile-columns), minmax(0, 1fr)); gap: var(--family-top-up-sheet-tile-row-gap) var(--family-top-up-sheet-tile-column-gap); }
.top-up-tile { position: relative; display: flex; flex-direction: column; min-block-size: var(--family-top-up-sheet-tile-height); padding: var(--family-top-up-sheet-tile-size-top) var(--family-top-up-sheet-tile-price-inset) var(--family-top-up-sheet-tile-price-inset); border-radius: var(--family-top-up-sheet-tile-radius); background: var(--family-top-up-sheet-tile-fill); text-align: start; cursor: pointer; transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.top-up-tile:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.top-up-tile[aria-checked="true"] { box-shadow: 0 0 0 2px var(--palette-brand); }
.top-up-tile__size, .top-up-tile__days { align-self: flex-start; }
.top-up-tile__size { padding-inline: calc(var(--family-top-up-sheet-tile-size-inset) - var(--family-top-up-sheet-tile-price-inset)); padding-inline-end: var(--family-top-up-sheet-tile-mark-size); color: var(--family-top-up-sheet-tile-size-color); font: var(--family-top-up-sheet-tile-size-style) var(--font-family); }
.top-up-tile__days { padding-inline: calc(var(--family-top-up-sheet-tile-size-inset) - var(--family-top-up-sheet-tile-price-inset)); color: var(--family-top-up-sheet-tile-days-color); font: var(--family-top-up-sheet-tile-days-style) var(--font-family); }
.top-up-tile__price { display: flex; align-items: center; justify-content: center; min-block-size: var(--family-top-up-sheet-tile-price-height); margin-block-start: auto; border-radius: var(--family-top-up-sheet-tile-price-radius); background: var(--family-top-up-sheet-tile-price-fill); color: var(--family-top-up-sheet-tile-price-color); font: var(--family-top-up-sheet-tile-price-style) var(--font-family); }
.top-up-tile::after { content: ""; position: absolute; inset-block-start: var(--family-top-up-sheet-tile-mark-top); inset-inline-end: var(--family-top-up-sheet-tile-mark-inset); inline-size: var(--family-top-up-sheet-tile-mark-size); block-size: var(--family-top-up-sheet-tile-mark-size); border-radius: 50%; background: var(--family-top-up-sheet-tile-mark-fill) center / contain no-repeat; }
.top-up-tile[aria-checked="true"]::after { background-image: url("../assets/pictures/check_circle.svg"); }