/* Interface spacing follows the browser-relative root font size. */
:root {
    --rr-display-scale: 1;
    --rr-space-2: calc(2px * var(--rr-display-scale, 1));
    --rr-space-4: calc(4px * var(--rr-display-scale, 1));
    --rr-space-6: calc(6px * var(--rr-display-scale, 1));
    --rr-space-8: calc(8px * var(--rr-display-scale, 1));
    --rr-space-10: calc(10px * var(--rr-display-scale, 1));
    --rr-space-12: calc(12px * var(--rr-display-scale, 1));
    --rr-space-16: calc(16px * var(--rr-display-scale, 1));
    --rr-space-18: calc(18px * var(--rr-display-scale, 1));
    --rr-space-20: calc(20px * var(--rr-display-scale, 1));
    --rr-space-24: calc(24px * var(--rr-display-scale, 1));
    --rr-space-32: calc(32px * var(--rr-display-scale, 1));
    --rr-space-36: calc(36px * var(--rr-display-scale, 1));
    --rr-space-44: calc(44px * var(--rr-display-scale, 1));
    --rr-space-48: calc(48px * var(--rr-display-scale, 1));
}

html[data-display-size]:not([data-display-size="100"]) :is(input, select, textarea, fieldset, .field-stack, .form-row, .page-panel) {
    min-width: 0;
    max-width: 100%;
}

html[data-display-size]:not([data-display-size="100"]) :is(.app-dialog, [role="dialog"].provider-editor-dialog, [role="dialog"].pharmacy-editor-dialog) {
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

html[data-display-size]:not([data-display-size="100"]) :is(.dialog-actions, .form-actions, .provider-editor-actions, .conversation-form-actions) {
    flex-wrap: wrap;
}

html[data-display-size]:not([data-display-size="100"]) :is(button, label, legend, .field-error, .form-message) {
    overflow-wrap: anywhere;
}

html[data-display-size]:not([data-display-size="100"]) .tox .tox-tbtn {
    width: calc(34px * var(--rr-display-scale, 1));
    height: calc(34px * var(--rr-display-scale, 1));
    min-width: 0;
}

html[data-display-size]:not([data-display-size="100"]) .tox .tox-tbtn svg {
    width: calc(24px * var(--rr-display-scale, 1));
    height: calc(24px * var(--rr-display-scale, 1));
}

html[data-display-size]:not([data-display-size="100"]) .tox .tox-tbtn--select {
    width: auto;
    max-width: 100%;
}

html[data-display-size]:not([data-display-size="100"]) .tox :is(.tox-tbtn__select-label, .tox-collection__item-label) {
    font-size: calc(14px * var(--rr-display-scale, 1));
}

/* Use available content space, including inside simulated devices. */
html[data-display-reflow="narrow"] :is(.form-field-row, .create-account-name-row, .daily-grid, .daily-toolbar, .user-edit-password-row) {
    grid-template-columns: minmax(0, 1fr);
}

html[data-display-reflow="narrow"] :is(.form-field-row > *, .create-account-name-row > *) {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 12rem;
}

html[data-display-reflow="narrow"] :is(.conversation-row-text strong, .conversation-row-text small:not(.conversation-row-preview), .care-team-row strong, .care-team-row span) {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}

html[data-display-reflow="narrow"] :is(.conversation-row, .conversation-row.has-attachments) {
    grid-template-columns: calc(44px * var(--rr-display-scale, 1)) minmax(0, 1fr) auto;
}

html[data-display-reflow="narrow"] .conversation-row-actions {
    flex-wrap: wrap;
    max-width: 5.5rem;
}

html[data-display-reflow="narrow"] :is(.care-team-row, .care-team-manage-row) {
    grid-template-columns: minmax(0, 1fr) auto;
}

html[data-display-reflow="narrow"] :is(.page-title-row, .care-team-dashboard-toolbar, .daily-date-controls) {
    flex-wrap: wrap;
    min-width: 0;
}

html[data-display-reflow="narrow"] .preferences-notification-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

html[data-display-reflow="narrow"] .preferences-notification-table :is(th, td) {
    padding: var(--rr-space-4);
    overflow-wrap: anywhere;
    white-space: normal;
}

html[data-display-reflow="narrow"] :is(.preferences-notification-column-toggle, .preferences-notification-table .preference-inherit-button) {
    white-space: normal;
    max-width: 100%;
}

/* At large sizes on phones, navigation uses multiple rows rather than clipping. */

html[data-display-dense="true"] :is(.app-tab-item, .app-tab-label) {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}

html[data-display-dense="true"] .page-panel {
    padding-inline: min(var(--rr-space-24), 4vw);
}

html[data-display-dense="true"] .conversation-row-actions {
    grid-column: 2 / -1;
    grid-row: auto;
    justify-self: end;
    max-width: 100%;
}

/* Keep content scrollable when enlarged navigation or the keyboard reduces height. */
html[data-display-reflow="narrow"] :is(.page-content, .preferences-page, .data-entry-form) {
    min-width: 0;
}

@media print {
    html[data-display-size]:not([data-display-size="100"]) { font-size: 100% !important; }
}

html[data-display-dense="true"] .header-menu-actions {
    grid-column: 2;
    grid-row: 1;
}

html[data-display-dense="true"] :is(.header-back-button, .header-reload-button) {
    margin: 0;
    transform: none;
    min-width: calc(24px * var(--rr-display-scale, 1));
}

html[data-display-dense="true"] .current-care-recipient span {
    white-space: normal;
    overflow-wrap: anywhere;
}

html[data-display-dense="true"] .brand span {
    display: none;
}

html[data-display-dense="true"] .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
}

html[data-display-dense="true"] .app-main {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100%;
    min-width: 0;
}

html[data-display-reflow="narrow"] :is(.schedule-actions-row, .schedule-calendar-nav, .schedule-title-view-actions, .diary-title-view-actions, .schedule-form-actions) {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

html[data-display-reflow="narrow"] .schedule-calendar-nav h2 {
    flex: 1 1 100%;
    order: -1;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

html[data-display-reflow="narrow"] .schedule-weekday {
    overflow-wrap: anywhere;
}

html[data-display-reflow="narrow"] .schedule-app {
    width: 100%;
    min-width: 0;
}

html[data-display-reflow="narrow"] .care-team-dashboard-tile-grid {
    flex-wrap: wrap;
}

html[data-display-reflow="narrow"] .daily-date-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rr-space-8);
}

html[data-display-reflow="narrow"] .daily-date-controls > .daily-date-label {
    order: -1;
    flex: 1 1 100%;
    width: 100%;
}

html[data-display-size]:not([data-display-size="100"]) .rr-i18n-date-button {
    flex-basis: calc(36px * var(--rr-display-scale, 1));
}

/* Header labels are copied from the translated table headings. */
html[data-display-dense="true"] table[data-display-cards] {
    display: block;
    width: 100%;
    min-width: 0;
}

html[data-display-dense="true"] table[data-display-cards] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

html[data-display-dense="true"] table[data-display-cards] :is(tbody, tr) {
    display: block;
    width: 100%;
}

html[data-display-dense="true"] table[data-display-cards] tr {
    padding-block: var(--rr-space-8);
    border-bottom: 1px solid var(--color-border);
}

html[data-display-dense="true"] table[data-display-cards] :is(td, tbody th) {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

html[data-display-dense="true"] table[data-display-cards] [data-display-label]::before {
    content: attr(data-display-label);
    display: block;
    color: var(--color-text-muted);
    font-weight: var(--rr-weight-semibold);
    margin-bottom: var(--rr-space-4);
}

html[data-display-reflow="narrow"] .page-content {
    overflow-wrap: anywhere;
}

html[data-display-reflow="narrow"] .daily-date-label .rr-i18n-date-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

html[data-display-reflow="narrow"] .daily-date-label .rr-i18n-date-button {
    justify-self: end;
}

html[data-display-reflow="narrow"] :is(.daily-action, .daily-link) {
    max-width: 100%;
    white-space: normal;
}

html[data-display-dense="true"] .desktop-layout-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0;
    width: 100%;
    padding-inline: 0;
}

html[data-display-dense="true"] .desktop-care-nav {
    display: none;
}

html[data-display-dense="true"] .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--rr-space-4) var(--rr-space-8);
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
    width: 100%;
    padding-inline: min(.5rem, 3vw);
    column-gap: var(--rr-space-4);
    max-height: 40vh;
    max-height: 40dvh;
    overflow-y: auto;
}

html[data-display-dense="true"] .header-navigation-actions {
    grid-column: 1;
    grid-row: 1;
    gap: var(--rr-space-4);
}

html[data-display-dense="true"] .care-recipient-picker {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    max-width: 100%;
    width: 100%;
}

html[data-display-dense="true"] .current-care-recipient {
    width: 100%;
    font-size: var(--rr-text-lg);
}

html[data-display-dense="true"] .brand {
    position: static;
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    transform: none;
    display: none;
}

html[data-display-dense="true"] .app-tab-nav {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr)) !important;
    height: auto !important;
    max-width: 100%;
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-height: 30vh;
    max-height: 30dvh;
    overflow-y: auto;
    display: grid !important;
    grid-auto-rows: max-content;
    align-content: start;
}

html[data-display-dense="true"] .app-tab-item {
    width: 100%;
    padding: var(--rr-space-4);
    grid-template-rows: max-content max-content;
    align-content: start;
}

html[data-display-dense="true"] .app-tab-label {
    overflow: visible;
    line-height: 1.2;
}

html[data-display-size]:not([data-display-size="100"]) .field-stack {
    grid-template-columns: minmax(0, 1fr);
}

html[data-display-reflow="narrow"] :is(.preferences-inline-row, .schedule-form-grid, .schedule-date-time-row, .schedule-length-tentative-row) {
    grid-template-columns: minmax(0, 1fr);
}

html[data-display-reflow="narrow"] .preferences-theme-row select {
    width: 100%;
}

html[data-display-reflow="narrow"] .app-dialog-backdrop {
    padding: min(var(--rr-space-18), 4vw);
}

html[data-display-reflow="narrow"] .dialog-actions > button {
    max-width: 100%;
    white-space: normal;
}

html[data-display-size]:not([data-display-size="100"]) .desktop-care-nav {
    flex-basis: calc(210px * var(--rr-display-scale, 1));
    max-width: 35%;
    overflow-wrap: anywhere;
}

html[data-display-dense="true"] .care-recipient-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rr-space-4);
}

html[data-display-dense="true"] .current-care-recipient {
    grid-column: 1;
    grid-row: 1;
}

html[data-display-dense="true"] .sync-status {
    position: static;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    transform: none;
}

/* Stack the list and editor when their two minimum widths no longer fit. */
html[data-display-reflow="narrow"] .notes-app {
    grid-template-columns: minmax(0, 1fr) !important;
}

html[data-display-reflow="narrow"] .notes-app.is-note-editor-open {
    grid-template-rows: auto minmax(4rem, .3fr) minmax(0, 1fr) !important;
}

html[data-display-reflow="narrow"] .notes-app .notes-list-pane {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

html[data-display-reflow="narrow"] .notes-app .notes-pane-divider {
    display: none !important;
}

html[data-display-reflow="narrow"] .notes-app .notes-new-note-wrap.is-open {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-width: 0;
    max-width: 100%;
    overflow-y: auto !important;
}

html[data-display-reflow="narrow"] .notes-new-note-wrap.is-open .notes-new-note {
    height: auto !important;
    min-height: 100%;
    grid-template-rows: auto !important;
    overflow: visible !important;
}

/* Keep paired spinner buttons within the enlarged input's height. */
html[data-display-size]:not([data-display-size="100"]) .number-spinner-buttons button {
    min-height: 0;
}

html[data-display-dense="true"] table[data-display-cards] .user-management-type-cell {
    padding-inline-end: var(--rr-space-10) !important;
}

html[data-display-dense="true"] table[data-display-cards] .user-card-actions {
    position: static;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}


/* Let the Preferences heading scroll away when enlarged controls need room. */
html[data-display-dense="true"] body[data-page="settings"] .page-panel {
    display: block;
    overflow-y: auto;
}

html[data-display-dense="true"] body[data-page="settings"] .page-content,
html[data-display-dense="true"] body[data-page="settings"] .preferences-page {
    height: auto;
    overflow: visible;
}

html[data-display-dense="true"] body[data-page="settings"] .preferences-static-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--rr-surface-color);
}

html[data-display-dense="true"] body[data-page="settings"] .preferences-static-actions {
    padding-block: var(--rr-space-4);
}

html[data-display-dense="true"] body[data-page="settings"] .preferences-static-actions button {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
    padding-inline: var(--rr-space-4);
}

html[data-display-dense="true"] body[data-page="settings"] .page-panel {
    scroll-padding-bottom: calc(max(44px, 2.75rem) + var(--rr-space-12));
}

@media (max-height: 480px) {
    html[data-display-dense="true"] body[data-page="settings"] .preferences-static-actions {
        position: static;
    }

    html[data-display-dense="true"] body[data-page="settings"] .page-panel {
        scroll-padding-bottom: var(--rr-space-8);
    }
}

html.rr-compact-mobile[data-display-size]:not([data-display-size="100"]) .tox .tox-tbtn {
    width: calc(30px * var(--rr-display-scale, 1));
    height: calc(30px * var(--rr-display-scale, 1));
}

html.rr-compact-mobile[data-display-size]:not([data-display-size="100"]) .tox .tox-tbtn--select {
    width: auto;
}