:root {
    --color-primary: #2C6E9E;
    --color-primary-hover: #255D86;
    --color-primary-soft: #EAF3F8;
    --color-accent: #B03A6B;
    --color-accent-soft: #F8E8EF;
    --color-success: #4F7A5A;
    --color-success-soft: #EDF5EF;
    --color-logo-green-soft: #EEF4E9;
    --color-warning: #C48A3A;
    --color-warning-soft: #FBF4E8;
    --color-danger: #B34747;
    --color-danger-soft: #F8EAEA;
    --color-bg: #F6F8FA;
    --color-surface: #FFFFFF;
    --color-surface-secondary: #F1F4F7;
    --color-text: #24313D;
    --color-text-muted: #5E6B78;
    --color-text-subtle: #7D8894;
    --color-border: #D6DEE6;
    --color-border-strong: #BCC8D3;
    --color-overlay: rgba(36, 49, 61, 0.28);
    --color-overlay-strong: rgba(36, 49, 61, 0.38);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06);
    --rr-main-color: var(--color-primary);
    --rr-background-color: var(--color-bg);
    --rr-workarea-background-color: var(--color-bg);
    --rr-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rr-page-heading-font: var(--rr-font-family);
    --rr-surface-color: var(--color-surface);
    --rr-border-color: var(--color-border);
    --rr-text-color: var(--color-text);
    --rr-shadow: var(--shadow-md);
}

@font-face {
    font-family: "Quintessential";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/system/fonts/quintessential-v24-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Quintessential";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/system/fonts/quintessential-v24-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    height: 100%;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body {
    height: 100%;
    margin: 0;
    background: var(--rr-background-color);
    color: var(--rr-text-color);
    font-family: var(--rr-font-family);
    line-height: 1.5;
    overflow: hidden;
}

body:has(.ems-public-page) {
    height: auto;
    overflow: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    font-size: max(1rem, 16px);
    min-height: 28px;
    padding: 2px 4px 4px;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--rr-text-color);
    font-weight: 400;
    line-height: normal;
}

label {
    color: var(--color-text-muted);
}

a {
    color: inherit;
}

.app-shell {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.environment-indicator {
    position: fixed;
    top: 1px;
    left: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 16px;
    height: 64px;
    padding: 0;
    background: var(--rr-main-color);
    color: var(--color-surface);
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 10px;
    min-height: 64px;
    padding: 8px 14px 8px 24px;
    background: var(--rr-surface-color);
    border-bottom: 1px solid var(--rr-border-color);
}

.header-back-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rr-main-color);
    cursor: pointer;
}

.header-back-button span {
    width: 22px;
    height: 22px;
    border-left: 4px solid currentColor;
    border-bottom: 4px solid currentColor;
    transform: rotate(45deg);
}

.header-back-button:disabled {
    color: var(--color-text-subtle);
    cursor: default;
    opacity: 0.45;
}

.care-recipient-picker {
    position: relative;
    min-width: 0;
    margin-left: 20px;
}

.current-care-recipient {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    color: var(--rr-main-color);
    font-family: var(--rr-page-heading-font);
    font-size: 36px;
    font-weight: 700;
    text-decoration: none;
}

.current-care-recipient:empty {
    display: none;
}

.current-care-recipient img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--rr-border-color);
    border-radius: 4px;
    object-fit: cover;
}

.current-care-recipient span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-care-recipient::after {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid currentColor;
}

.care-recipient-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 80;
    width: min(320px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 96px));
    overflow: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--rr-border-color);
    border-radius: 6px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.2);
}

.care-recipient-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0;
    color: var(--rr-text-color);
    font: 700 16px/1.2 var(--rr-font-family);
    text-decoration: none;
}

.care-recipient-menu-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 4px;
    padding: 0;
    border-radius: 4px;
}

.care-recipient-menu-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.care-recipient-menu-row:hover,
.care-recipient-menu-row:focus-within,
.care-recipient-menu-row:has(.care-recipient-menu-item.is-current) {
    background: var(--rr-background-color);
    color: var(--rr-main-color);
}

.care-recipient-menu-row:hover .care-recipient-menu-item,
.care-recipient-menu-row:focus-within .care-recipient-menu-item,
.care-recipient-menu-row:has(.care-recipient-menu-item.is-current) .care-recipient-menu-item {
    color: var(--rr-main-color);
}

.care-recipient-menu-item img,
.care-recipient-menu-item svg,
.care-recipient-menu-edit svg {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--rr-border-color);
    border-radius: 4px;
    object-fit: cover;
}

.care-recipient-menu-item svg,
.care-recipient-menu-edit svg {
    display: block;
    padding: 7px;
    color: var(--rr-main-color);
    background: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.care-recipient-menu-edit {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--rr-main-color);
    border-radius: 4px;
}

.care-recipient-menu-edit svg {
    background: transparent;
}

.care-recipient-menu-separator {
    height: 1px;
    margin: 6px 4px;
    background: var(--rr-border-color);
}

.sync-status {
    position: fixed;
    top: 1px;
    left: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    width: 16px;
    height: 64px;
    padding: 0;
    background: var(--rr-main-color);
    color: var(--color-surface);
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.brand {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    margin-right: 4px;
    color: var(--rr-main-color);
    text-decoration: none;
}

.brand img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
    transform: scale(1.27);
    transform-origin: center;
}

.brand span {
    display: grid;
    min-width: 0;
}

.brand strong {
    overflow: hidden;
    font-family: var(--rr-page-heading-font);
    font-size: 1.12rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-button,
.account-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--rr-border-color);
    background: var(--rr-surface-color);
    color: var(--rr-main-color);
    cursor: pointer;
}

.icon-button {
    display: inline-grid;
    place-content: center;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    border-color: var(--rr-main-color);
    background: var(--rr-main-color);
    color: var(--color-surface);
}

.icon-button span {
    display: block;
    width: 24px;
    height: 3px;
    background: currentColor;
}

.account-toggle {
    display: inline-grid;
    place-items: center;
    padding: 8px;
    border-radius: 8px;
    border-color: var(--rr-main-color);
    background: var(--rr-main-color);
    color: var(--color-surface);
}

.account-avatar {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    color: var(--color-surface);
}

.account-avatar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    border: 3px solid currentColor;
    border-radius: 50%;
    transform: translateX(-50%);
}

.account-avatar::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 18px;
    height: 7px;
    border: 3px solid currentColor;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    transform: translateX(-50%);
}

.app-tab-nav {
    z-index: 18;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    max-width: 1080px;
    margin: -1px auto 0;
    padding: 6px 10px;
    border-top: 1px solid var(--rr-border-color);
    border-bottom: 1px solid var(--rr-border-color);
    background: var(--rr-surface-color);
    box-shadow: var(--shadow-sm);
}

.app-tab-item {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 58px;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rr-main-color);
    font: inherit;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.app-tab-item:hover,
.app-tab-item:focus {
    background: var(--color-primary-soft);
    outline: none;
}

.app-tab-item img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.app-tab-label {
    overflow: hidden;
    max-width: 100%;
    color: var(--rr-main-color);
    font-size: 0.82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-tab-label-short {
    display: none;
}

.app-tab-more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 28px;
    height: 28px;
    color: var(--rr-main-color);
}

.app-tab-more-icon span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: var(--color-overlay);
}

.side-menu {
    position: fixed;
    z-index: 30;
    display: grid;
    align-content: start;
    gap: 0;
    background: var(--rr-surface-color);
    border: 1px solid var(--rr-border-color);
    box-shadow: var(--rr-shadow);
}

.side-menu {
    top: 72px;
    right: 10px;
    width: min(300px, calc(100vw - 20px));
    max-height: calc(100vh - 84px);
    overflow: visible;
    border-radius: 8px;
}

.side-menu a,
.side-menu button,
.account-user {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--rr-text-color);
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.account-user {
    background: var(--rr-main-color);
    color: var(--color-surface);
}

.menu-form {
    margin: 0;
}

.menu-separator {
    height: 1px;
    background: var(--rr-border-color);
}

.side-menu > a:first-child {
    border-radius: 7px 7px 0 0;
}

.side-menu > :last-child {
    border-radius: 0 0 7px 7px;
}

.side-menu > :last-child button {
    border-radius: 0 0 7px 7px;
}

.side-menu a:hover,
.side-menu a:focus,
.side-menu button:hover,
.side-menu button:focus {
    background: var(--rr-background-color);
    outline: none;
}

.desktop-layout-row {
    display: flex;
    min-width: 0;
    min-height: 0;
    width: min(1280px, 100%);
    margin: 0 auto;
}

.desktop-care-nav {
    display: none;
}

.desktop-care-nav-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin-right: 0;
    margin-left: 0;
    padding: 4px 10px;
    border-radius: 8px;
    color: var(--rr-main-color);
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
}

.desktop-care-nav-item:hover,
.desktop-care-nav-item:focus,
.desktop-care-nav-item.is-active {
    background: var(--color-primary-soft);
    outline: none;
}

.desktop-care-nav-item img {
    display: block;
    width: 56px;
    height: 30px;
    object-fit: contain;
}

.desktop-care-nav-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-main {
    display: flex;
    min-width: 0;
    width: min(1080px, 100%);
    min-height: 0;
    margin: 0 auto;
    padding: 0;
}

.page-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 24px;
    background: var(--rr-workarea-background-color);
    border: 1px solid var(--rr-border-color);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--rr-shadow);
    overflow: hidden;
}

body[data-page="home"] .page-panel {
    background: var(--rr-workarea-background-color);
}

.page-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
	padding: 0 0 16px;
    overflow-y: auto;
}

.feature-placeholder {
    display: grid;
    min-height: 220px;
    place-items: center;
    padding: 24px;
    color: var(--rr-muted-color);
    text-align: center;
}

.feature-placeholder p {
    max-width: 36rem;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}

.page-icon {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.page-title-row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

h1 {
    min-width: 0;
    margin: 0;
    color: var(--rr-main-color);
    font-family: var(--rr-page-heading-font);
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    line-height: 1.1;
}

.is-desktop-device h1 {
}

.is-desktop-device .app-shell {
    grid-template-rows: auto minmax(0, 1fr);
}

.is-desktop-device .app-tab-nav {
    display: none;
}

.is-desktop-device .desktop-layout-row {
    grid-row: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.is-desktop-device .desktop-care-nav {
    flex: 0 0 210px;
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 0;
    height: 100%;
    padding: 14px 0;
    border: 1px solid var(--rr-border-color);
    border-top: 0;
    border-left: 0;
    border-radius: 0;
    background: var(--rr-surface-color);
    box-shadow: var(--rr-shadow);
    overflow-y: auto;
}

.is-desktop-device .app-main {
    flex: 1 1 auto;
    width: auto;
    height: 100%;
    margin: 0;
}

.is-desktop-device .page-panel {
    border-right: 0;
    border-radius: 0;
}

.is-desktop-device body[data-page="rx-manager"] .page-title-row,
.is-desktop-device body[data-page="providers"] .page-title-row,
.is-desktop-device body[data-page="pharmacies"] .page-title-row,
.is-desktop-device body[data-page="contacts"] .page-title-row {
    width: min(820px, 100%);
}

.is-desktop-device body[data-page="notes"] .page-title-row {
    width: min(1120px, 100%);
}

.is-desktop-device body[data-page="schedule"] .page-title-row,
.is-desktop-device body[data-page="diary"] .page-title-row {
    position: relative;
    width: min(720px, 100%);
}

.is-desktop-device body[data-page="home"] .page-title-row {
    width: min(780px, 100%);
}

.is-desktop-device body[data-page="schedule"] .schedule-title-search,
.is-desktop-device body[data-page="diary"] .diary-title-search {
    position: absolute;
    left: 50%;
    width: 210px;
    margin-left: 0;
    transform: translateX(-50%);
}

.schedule-title-view-actions,
.diary-title-view-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.schedule-view-button,
.diary-view-button {
    min-width: 86px;
}

.is-desktop-device body[data-page="schedule"] .schedule-title-view-actions,
.is-desktop-device body[data-page="diary"] .diary-title-view-actions {
    margin-left: auto;
}

.page-title-action {
    flex: 0 0 auto;
    margin-left: auto;
}

.page-title-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.page-title-actions .page-title-action {
    margin-left: 0;
}

.notes-title-search,
.schedule-title-search,
.diary-title-search {
    width: min(300px, 38vw);
}

.notes-title-search input,
.schedule-title-search input,
.diary-title-search input {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--rr-main-color);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--rr-text-color);
    font: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.markdown-content {
    max-width: 72ch;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    color: var(--rr-main-color);
    line-height: 1.2;
}

.markdown-content h1 {
    margin: 0 0 18px;
}

.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin: 24px 0 10px;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol {
    margin: 0 0 16px;
}

.markdown-content li {
    margin: 4px 0;
}

.markdown-content a {
    color: var(--rr-main-color);
    font-weight: 700;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 160px));
    gap: 10px;
}

.home-tile {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    min-height: 124px;
    padding: 10px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface);
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.care-central-tile {
    cursor: grab;
    touch-action: none;
}

.care-central-tile.is-dragging {
    opacity: 0.55;
    outline: 3px solid var(--rr-main-color);
    outline-offset: 2px;
    transform: scale(0.98);
}

.care-central-drop-marker {
    min-height: 124px;
    border: 3px dashed var(--rr-main-color);
    border-radius: 8px;
    background: var(--color-primary-soft);
}

.care-central-title-search {
    width: min(320px, 40vw);
}

.care-central-title-search input {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--rr-main-color);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--rr-text-color);
    font: inherit;
}

.care-central-search-results {
    width: min(780px, 100%);
    margin-bottom: 14px;
}

.care-central-search-list {
    display: grid;
    gap: 8px;
}

.care-central-search-result,
.care-central-search-empty {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
}

.care-central-search-result:hover,
.care-central-search-result:focus {
    border-color: var(--rr-main-color);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.care-central-search-result-type {
    color: var(--rr-main-color);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.care-central-search-result span:last-child,
.care-central-search-empty {
    color: var(--rr-muted-color);
    font-size: 0.92rem;
}

.care-central-login-sticky {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--rr-main-color);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24);
}

.care-central-login-sticky span {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-left: 0;
    border-radius: 2px;
}

.care-central-login-sticky span::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    width: 14px;
    height: 2px;
    background: currentColor;
}

.care-central-login-sticky span::after {
    content: "";
    position: absolute;
    left: -1px;
    top: 3px;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.admin-sticky {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--rr-main-color);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24);
}

.admin-sticky svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-tile:hover,
.home-tile:focus {
    background: var(--rr-background-color);
    outline: 3px solid var(--color-primary-soft);
    outline-offset: 2px;
}

.care-recipient-tile {
    position: relative;
}

.care-recipient-list {
    display: grid;
    gap: 8px;
}

.care-recipient-add-button {
    display: inline-grid;
    place-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rr-main-color);
    color: var(--color-surface);
    text-decoration: none;
}

.care-recipient-add-button svg {
    display: block;
    width: 36px;
    height: 36px;
    padding: 9px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.care-recipient-tile-main {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.tile-edit-button {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--rr-main-color);
    border-radius: 4px;
    background: var(--rr-main-color);
    color: var(--color-surface);
}

.tile-edit-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-tile img {
    display: block;
    max-width: 96px;
    max-height: 64px;
    object-fit: contain;
}

.home-tile img.care-recipient-tile-photo {
    width: 96px;
    height: 64px;
    border-radius: 4px;
    object-fit: cover;
}

.tile-label {
    color: var(--rr-main-color);
    font-family: var(--rr-page-heading-font);
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
}

.tile-label sub {
    font-size: 0.72em;
    line-height: 0;
}

.rx-manager-app {
    display: grid;
    gap: 14px;
    width: min(820px, 100%);
}

.rx-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rx-add-button,
.rx-voice-actions .primary-button,
.rx-voice-actions .secondary-button,
.rx-voice-review-actions .primary-button,
.rx-voice-review-actions .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.rx-button-icon,
.rx-add-button svg,
.row-icon-button svg {
    display: block;
    width: 20px;
    height: 20px;
}

.rx-button-icon svg,
.rx-add-button svg,
.row-icon-button svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rx-list {
    display: grid;
    border: 1px solid var(--color-border-strong);
}

.rx-list-empty {
    border: 0;
}

.rx-row {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-rows: auto auto;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--color-border-strong);
    background: var(--color-surface);
}

.rx-row:nth-child(even) {
    background: var(--rr-background-color);
}

.rx-row:last-child {
    border-bottom: 0;
}

.rx-row:hover,
.rx-row:focus-within {
    background: var(--color-primary-soft);
}

.rx-card {
    display: contents;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rr-text-color);
    font: inherit;
    text-align: left;
    cursor: default;
}

.rx-card-title {
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    padding: 4px 6px;
    background: var(--rr-main-color);
    color: var(--color-surface);
    overflow: hidden;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-card-meta,
.rx-empty {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.rx-card-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    padding: 0 6px;
	padding-top: 5px;
    white-space: normal;
}

.rx-card-meta span:not(:last-child)::after {
    content: "|";
    margin: 0 8px;
    color: var(--color-text-subtle);
    font-weight: 400;
}

.rx-card-meta span.rx-summary-break-after::after,
.rx-card-meta span.rx-summary-line-break::after {
    content: "";
    margin: 0;
}

.rx-card-meta .provider-edit-link,
.rx-card-meta .provider-portal-link,
.rx-card-meta .provider-phone-link,
.rx-card-meta .provider-email-link {
    min-height: 28px;
    padding: 3px 10px;
    font-size: 0.9rem;
}

.provider-edit-link,
.provider-portal-link,
.provider-phone-link,
.provider-email-link {
    gap: 6px;
}

#pharmacy-list button {
    margin-right: 6px;
}

#pharmacy-list .rx-card-meta {
    align-items: center;
}

.provider-edit-link svg,
.provider-portal-link svg,
.provider-phone-link svg,
.provider-email-link svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.provider-portal-link:disabled,
.provider-phone-link:disabled,
.provider-email-link:disabled {
    border-color: #E5EAF0;
    background: #F8FAFC;
    color: #B6C0CA;
    cursor: not-allowed;
    opacity: 0.55;
}

.documents-app {
    width: min(900px, 100%);
}

.document-form {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
}

.document-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 10px 12px;
    align-items: end;
}

.document-form select,
.document-form input[type="file"] {
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--rr-text-color);
    font: inherit;
}

.document-form .rx-field-seventy-five {
    grid-column: 1 / -1;
}

.document-row .rx-card-meta {
    grid-column: 1;
    align-items: center;
    gap: 5px 0;
}

.document-row {
    grid-template-columns: minmax(0, 1fr) 42px 42px 42px;
}

.document-row .document-card {
    display: contents;
    cursor: pointer;
}

.document-row .document-card:hover .rx-card-title,
.document-row .document-card:focus .rx-card-title {
    text-decoration: underline;
}

.document-icon-button {
    align-self: stretch;
    min-height: 28px;
    min-width: 42px;
    padding: 3px;
    border-radius: 0;
}

.document-icon-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.document-row .document-icon-button,
.document-row .row-icon-button {
    grid-row: 1;
}

.provider-portal-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.provider-portal-test {
    min-height: 28px;
    margin-top: 29px;
    padding: 3px 10px;
}

.rx-summary-line-break {
    flex-basis: 100%;
    height: 0;
}

.rx-refill-alert {
    color: #C48A00;
    font-weight: 700;
}

.rx-refill-danger {
    color: var(--color-danger);
    font-weight: 700;
}

.rx-renewal-requested {
    color: #00A000;
    font-weight: 700;
}

.rx-supply-warning {
    color: var(--color-warning);
    font-weight: 700;
}

.rx-supply-danger {
    color: var(--color-danger);
    font-weight: 700;
}

.rx-supply-normal {
    font-weight: 700;
}

.row-icon-button {
    display: grid;
    place-items: center;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 42px;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: var(--rr-main-color);
    color: var(--color-surface);
    cursor: pointer;
    justify-self: end;
}

.user-management {
    display: grid;
    gap: 12px;
}

.user-card-list {
    display: grid;
    gap: 8px;
}

.user-card {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(140px, 1.2fr) minmax(140px, 1fr) minmax(90px, 0.7fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface);
}

.user-card-add {
    background: #fff;
}

.user-card-add input,
.user-card-add select {
    min-height: 32px;
    padding: 4px 7px;
    border: 1px solid var(--rr-main-color);
    border-radius: 4px;
    background: var(--rr-background-color);
    font: inherit;
}

.user-card-id {
    font-weight: 700;
}

.user-card-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}

.user-card-actions form {
    display: inline-flex;
}

.user-row-action {
    position: static;
    grid-column: auto;
    grid-row: auto;
    align-self: center;
    width: 34px;
    min-height: 34px;
    border-radius: 6px;
}

.user-add-button {
    min-height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.user-edit-form {
    margin-bottom: 6px;
}

.notes-app {
    display: grid;
    grid-template-columns: minmax(240px, var(--notes-list-pane-width, 46%)) 12px minmax(320px, 1fr);
    column-gap: 8px;
    row-gap: 14px;
    align-items: start;
    width: min(1120px, 100%);
    min-width: 0;
}

.notes-list-pane {
    display: grid;
    align-content: start;
    grid-template-rows: auto minmax(0, 1fr);
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    min-height: 0;
}

.notes-list {
    display: grid;
    align-content: start;
    grid-auto-rows: min-content;
    border: 1px solid var(--color-border-strong);
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

.notes-new-note-wrap {
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
}

.notes-pane-divider {
    align-self: stretch;
    grid-column: 2;
    grid-row: 2;
    min-height: 160px;
    position: relative;
    cursor: col-resize;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.notes-pane-divider::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 2px;
    border-radius: 2px;
    background: var(--color-border-strong);
}

.notes-pane-divider:hover::before,
.notes-pane-divider:focus::before,
.notes-app.is-resizing-notes-panes .notes-pane-divider::before {
    background: var(--rr-main-color);
}

.notes-pane-divider:focus {
    outline: 2px solid var(--rr-main-color);
    outline-offset: 2px;
}

.notes-app.is-waiting-notes-pane-resize,
.notes-app.is-resizing-notes-panes {
    cursor: col-resize;
    -webkit-user-select: none;
    user-select: none;
}

.notes-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--color-text-muted);
    font-weight: 700;
    grid-column: 1 / -1;
    grid-row: 1;
}

.notes-breadcrumb button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rr-main-color);
    font: inherit;
    cursor: pointer;
}

.notes-natural-sort-wrap {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    min-height: 38px;
    padding-top: 6px;
}

.notes-new-note-button,
.notes-new-folder-button,
.notes-natural-sort-button {
    display: inline-grid;
    place-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rr-main-color);
    cursor: pointer;
}

.notes-new-folder-button {
    grid-auto-flow: column;
    align-items: center;
    gap: 6px;
    width: auto;
    border-radius: 4px;
    color: var(--rr-main-color);
    font-weight: 700;
}

.notes-new-note-button {
    border: 1px solid var(--rr-main-color);
    background: var(--rr-main-color);
    color: var(--color-surface);
}

.is-desktop-device body[data-page="notes"] .notes-new-note-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
    margin-bottom: 8px;
    margin-right: auto;
    padding: 0;
    overflow: visible;
    border: 0;
}

.is-desktop-device body[data-page="notes"] .notes-new-note-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.is-desktop-device body[data-page="notes"] .notes-new-note-button svg {
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 50%;
    background: var(--rr-main-color);
    color: var(--color-surface);
}

.notes-new-note-button svg,
.notes-new-folder-button svg,
.notes-natural-sort-button svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notes-row {
    align-items: stretch;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 42px;
    min-height: 42px;
    border-bottom: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    position: relative;
}

.notes-row:last-child {
    border-bottom: 0;
}

.notes-row:hover,
.notes-row:focus-within {
    background: var(--color-primary-soft);
}

.notes-row.is-selected {
    box-shadow: inset 4px 0 0 var(--rr-main-color);
}

.notes-row[data-record-id] {
    cursor: pointer;
}

.notes-note-row {
    cursor: pointer;
}

.notes-new-folder {
    align-items: center;
    display: flex;
    gap: 6px;
    padding: 6px;
}

.notes-new-folder label {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    font-weight: 700;
    font-size: 0.875rem;
    text-align: left;
}

.notes-new-folder input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    background: var(--rr-background-color);
    border-color: var(--rr-main-color);
}

.notes-drag-handle {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    place-content: center;
    gap: 3px;
    width: 32px;
    min-height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: grab;
}

.notes-drag-handle:active {
    cursor: grabbing;
}

.notes-drag-handle span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.notes-item {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px 8px 5px;
    color: var(--rr-text-color);
}

.notes-item-icon {
    flex: 0 0 auto;
    color: var(--rr-main-color);
}

.notes-row[data-record-type="note_folder"] .notes-item-icon {
    color: #ffd66b;
}

.notes-item-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notes-row[data-record-type="note_folder"] .notes-item-icon svg {
    fill: currentColor;
    stroke: #9f6b00;
}

.notes-item-name {
    font-size: calc(1rem + 2px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-row[data-record-type="note_folder"] .notes-item-name {
    font-weight: 700;
}

.notes-row[data-record-type="note"] .notes-item-name {
    font-weight: 400;
}

.notes-new-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    grid-column: 2;
    margin-top: 0;
    padding: 0;
    background: var(--color-surface);
    min-width: 0;
}

.notes-new-note label {
    display: grid;
    gap: 3px;
    margin: 8px 0 0;
    padding: 0;
    font-weight: 700;
    font-size: 0.875rem;
    text-align: left;
}

.notes-new-note textarea {
    min-height: 110px;
    font-weight: 400;
    resize: vertical;
}

.notes-new-note button {
    justify-self: start;
}

.notes-modal-close-button {
    display: none;
}

.notes-form-actions {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    grid-column: 1 / -1;
}

.notes-folder-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.notes-folder-breadcrumb[role="button"] {
    cursor: pointer;
}

.notes-folder-breadcrumb-edit {
    display: inline-grid;
    place-content: center;
    color: var(--rr-main-color);
}

.notes-folder-breadcrumb-edit svg {
    display: block;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notes-lock-button {
    display: inline-grid;
    place-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--rr-main-color);
    cursor: pointer;
}

.notes-lock-button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.notes-lock-button svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notes-content-field {
    grid-column: 1 / -1;
}

.notes-note-row {
    grid-template-columns: 32px minmax(0, 1fr) 42px;
    background: var(--color-surface);
}

.notes-note-item {
    grid-column: 2;
    padding-left: 5px;
}

.notes-note-item .notes-item-icon {
    color: var(--color-text-muted);
}

.notes-empty {
    margin: 0;
    padding: 10px;
    color: var(--color-text-muted);
}

.notes-delete-button {
    grid-column: 3;
    background: transparent;
    color: var(--rr-main-color);
}

.notes-delete-button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.notes-search-result-row {
    grid-template-columns: minmax(0, 1fr);
}

.notes-search-result {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--rr-text-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.notes-search-result-title {
    color: var(--rr-main-color);
    font-weight: 700;
}

.notes-search-result-snippet {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.3;
}

.notes-search-result mark {
    padding: 0 2px;
    background: #fff2a8;
    color: inherit;
}

@media (max-width: 760px) {
    .notes-app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto 12px auto;
        gap: 0;
        max-width: 100%;
    }

    .notes-breadcrumb {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 10px;
    }

    .notes-list-pane {
        grid-column: 1;
        grid-row: 2;
        grid-template-rows: minmax(0, 1fr) auto;
        max-height: min(var(--notes-list-pane-height, 46vh), 50vh);
        overflow: hidden;
    }

    .notes-list {
        border: 0;
        gap: 0;
        max-height: calc(6em + 8px);
        overflow-y: auto;
    }

    .notes-natural-sort-wrap {
        align-items: center;
        min-height: 0;
        padding-top: 0;
    }

    .notes-app.has-custom-notes-pane-split .notes-list-pane,
    .notes-app.is-resizing-notes-panes .notes-list-pane {
        height: min(var(--notes-list-pane-height, 46vh), 50vh);
    }

    .notes-pane-divider {
        align-self: stretch;
        grid-column: 1;
        grid-row: 3;
        min-height: 12px;
        cursor: row-resize;
    }

    .notes-app.is-waiting-notes-pane-resize,
    .notes-app.is-resizing-notes-panes {
        cursor: row-resize;
    }

    .notes-pane-divider::before {
        top: 5px;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 2px;
    }

    .notes-new-note-wrap,
    .notes-new-note {
        grid-column: 1;
        grid-row: 4;
        grid-template-columns: minmax(0, 1fr);
    }

    .notes-new-note-wrap {
        margin-top: 10px;
    }

    .notes-row,
    .notes-note-row {
        grid-template-columns: minmax(0, 1fr) 42px;
        min-height: 0;
        margin: 1px 0;
        border-bottom: 0;
    }

    .notes-drag-handle {
        display: none;
    }

    .notes-new-folder {
        padding: 0;
    }

    .notes-item,
    .notes-note-item,
    .notes-search-result {
        grid-column: 1;
        padding: 0;
    }
}

.is-mobile-device .notes-list {
    border: 0;
    gap: 0;
}

.is-mobile-device .notes-row,
.is-mobile-device .notes-note-row {
    grid-template-columns: minmax(0, 1fr) 42px;
    min-height: 0;
    margin: 2px 0;
    border-bottom: 0;
}

.is-mobile-device .notes-drag-handle {
    display: none;
}

.is-mobile-device .notes-item,
.is-mobile-device .notes-note-item,
.is-mobile-device .notes-search-result {
    grid-column: 1;
    padding: 0;
}

.is-mobile-device .notes-new-folder {
    padding: 0;
}

.is-mobile-device .notes-row,
.is-mobile-device .notes-item,
.is-mobile-device .notes-item-name {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.is-mobile-portrait .notes-new-note-wrap {
    display: none;
}

.is-mobile-portrait .notes-pane-divider {
    display: none;
}

.is-mobile-portrait body[data-page="notes"] .page-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.is-mobile-portrait body[data-page="notes"] .notes-app {
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.is-mobile-portrait body[data-page="notes"] .notes-list-pane {
    align-content: stretch;
    align-self: stretch;
    grid-template-rows: auto minmax(0, 1fr);
    grid-row: 2;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
}

.is-mobile-portrait body[data-page="notes"] .notes-list {
    height: 100%;
    max-height: none;
    min-height: 0;
    padding-bottom: 128px;
}

.is-mobile-portrait .notes-row[data-record-id] {
    overflow: hidden;
}

.is-mobile-portrait .notes-row[data-record-id] .notes-item {
    transition: transform 0.16s ease;
}

.is-mobile-portrait .notes-row[data-record-id].is-delete-revealed .notes-item {
    transform: translateX(-42px);
}

.is-mobile-portrait .notes-delete-button {
    position: absolute;
    top: 0;
    right: -42px;
    bottom: 0;
    z-index: 2;
    display: inline-grid;
    place-content: center;
    width: 42px;
    min-height: 100%;
    opacity: 0;
    transition: right 0.16s ease, opacity 0.16s ease;
}

.is-mobile-portrait .notes-row.is-delete-revealed .notes-delete-button {
    right: 0;
    opacity: 1;
}

.is-mobile-portrait .notes-new-note-button {
    position: fixed;
    right: 40px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 30;
    width: 72px;
    height: auto;
    min-height: 98px;
    display: grid;
    gap: 8px;
    justify-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--rr-main-color);
    font-weight: 700;
}

.is-mobile-portrait .notes-new-note-button span {
    white-space: nowrap;
}

.is-mobile-portrait .notes-new-note-button svg {
    width: 72px;
    height: 72px;
    padding: 18px;
    border-radius: 50%;
    background: var(--rr-main-color);
    color: var(--color-surface);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

.is-mobile-device body[data-page="care-recipients"] .care-recipient-add-button {
    position: fixed;
    right: 40px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 30;
    width: 72px;
    height: 72px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

.is-mobile-device body[data-page="care-recipients"] .care-recipient-add-button svg {
    width: 72px;
    height: 72px;
    padding: 18px;
}

.is-mobile-landscape body[data-page="care-recipients"] .care-recipient-add-button {
    bottom: 20px;
}

.is-mobile-portrait .notes-new-folder-button {
    font-size: 1.1rem;
}

.is-mobile-portrait .notes-new-note-wrap.is-open {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: block;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    margin: 0;
    padding: 2%;
    background: rgba(0, 0, 0, 0.38);
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-new-note {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: stretch;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-content-field {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    min-height: 0;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-title-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-title-field input {
    flex: 1 1 auto;
    min-width: 0;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-content-field textarea {
    height: 100%;
    min-height: 0;
    resize: none;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-content-field .tox-tinymce {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    min-height: 0;
    overflow: hidden;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-content-field .tox-editor-container,
.is-mobile-portrait .notes-new-note-wrap.is-open .notes-content-field .tox-sidebar-wrap,
.is-mobile-portrait .notes-new-note-wrap.is-open .notes-content-field .tox-edit-area {
    flex: 1 1 auto;
    min-height: 0;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-content-field .tox-edit-area__iframe {
    min-height: 0;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-form-actions {
    margin: 0;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-form-actions .primary-button {
    grid-column: 3;
    justify-self: end;
    border: 0;
    background: var(--color-surface);
    color: var(--rr-main-color);
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-form-actions .notes-lock-button {
    grid-column: 2;
    justify-self: center;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-modal-close-button {
    grid-column: 1;
    justify-self: start;
    display: inline-grid;
    place-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--rr-main-color);
    font: inherit;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-folder-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: grid;
    place-items: center;
    padding: 2%;
    background: rgba(0, 0, 0, 0.24);
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-folder-modal {
    display: grid;
    grid-template-rows: auto auto;
    width: min(78vw, 360px);
    max-height: 50vh;
    max-height: 50dvh;
    padding: 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.48);
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-folder-modal-actions {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-folder-modal label {
    align-self: center;
    display: grid;
    gap: 8px;
    margin: 0;
    font-weight: 700;
}

.is-mobile-portrait .notes-new-note-wrap.is-open .notes-folder-modal select {
    width: 100%;
}

.notes-row.is-dragging {
    background: var(--color-accent-soft);
    box-shadow: inset 0 0 0 3px var(--rr-main-color);
    opacity: 0.78;
}

.notes-row.is-drop-before::before,
.notes-row.is-drop-after::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--rr-main-color);
    z-index: 2;
}

.notes-row.is-drop-before::before {
    top: -2px;
}

.notes-row.is-drop-after::after {
    bottom: -2px;
}

.rx-card:focus,
.row-icon-button:focus {
    outline: none;
}

.rx-detail {
    display: grid;
    min-width: 0;
    min-height: 0;
}

.rx-detail > .rx-voice-review-form {
    min-height: 0;
}

.page-content:has(#rx-manager-app[data-screen="details"]) {
    display: block;
    overflow-y: auto;
}

.page-content:has(.rx-voice-flow) {
    display: block;
    overflow-y: auto;
}

#rx-manager-app[data-screen="details"] {
    min-height: 0;
}

#rx-manager-app[data-screen="details"]:has(.rx-voice-flow) {
    height: auto;
}

.rx-voice-flow {
    display: grid;
    gap: 10px;
    max-width: 760px;
}

.rx-voice-nav,
.rx-voice-actions,
.rx-voice-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rx-voice-nav {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0 0 8px;
    background: var(--rr-surface-color);
}

.rx-voice-step {
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface);
}

.rx-voice-step {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.rx-voice-step-review {
    min-height: 0;
}

.rx-voice-step-review .rx-voice-review-form {
    min-height: 0;
}

.rx-voice-step h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--rr-main-color);
    font-size: 1.1rem;
    line-height: 1.2;
}

.rx-voice-step h2 span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rr-main-color);
    color: var(--color-surface);
    font-size: 0.9rem;
}

.rx-voice-step p {
    margin: 0;
}

.rx-voice-fields {
    margin: 0;
    color: var(--rr-main-color);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.rx-voice-entry-row {
    display: block;
}

.rx-voice-entry-row label {
    display: grid;
    gap: 4px;
}

.rx-voice-entry-row textarea {
    width: 100%;
    min-height: 76px;
    padding: 8px;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    resize: vertical;
}

.rx-voice-entry-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.rx-voice-entry-footer small {
    color: var(--color-text-subtle);
}

.rx-voice-arrow {
    color: var(--rr-main-color);
    font-weight: 700;
    text-align: center;
}

.rx-voice-analysis {
    display: flex;
    align-items: center;
    gap: 12px;
}

.processing-spinner {
    width: 28px;
    height: 28px;
    border: 4px solid var(--color-primary-soft);
    border-top-color: var(--rr-main-color);
    border-radius: 50%;
    animation: rr-spin 0.9s linear infinite;
}

.rx-busy {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface);
}

.rx-voice-review-form {
    display: grid;
    min-height: 0;
    gap: 0;
}

.rx-form-fixed {
    background: var(--color-surface);
    padding-bottom: 4px;
}

.rx-medication-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

.rx-medication-title {
    margin: 0;
    color: var(--rr-main-color);
    font-size: 1.25rem;
    line-height: 1.2;
}

.rx-medication-edit {
    width: 24px;
    height: 24px;
    justify-self: start;
    background: var(--color-surface);
    color: var(--rr-main-color);
}

.rx-medication-edit svg {
    width: 15px;
    height: 15px;
}

.rx-form-scroll {
    min-height: 0;
    padding: 4px 16px;
    border: 0;
    border-radius: 4px;
    -webkit-overflow-scrolling: touch;
}

.provider-detail-form .rx-form-scroll {
    padding-left: 0;
    padding-right: 0;
}

.provider-detail-form .rx-field-pair {
    column-gap: 8px;
}

.provider-detail-form .provider-name-pair,
.provider-detail-form .provider-city-state-zip,
.provider-detail-form .provider-contact-pair {
    flex-wrap: nowrap;
}

.record-nav {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}

.record-nav-title {
    display: grid;
    gap: 3px;
    justify-items: center;
    min-width: 0;
    color: var(--color-text-muted);
    text-align: center;
}

.record-nav-title strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--rr-text-color);
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-nav-button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--rr-border-color);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--rr-main-color);
    cursor: pointer;
}

.record-nav-button span {
    width: 16px;
    height: 16px;
    border-top: 3px solid currentColor;
    border-left: 3px solid currentColor;
}

.record-nav-button[data-record-prev] span {
    transform: translateX(4px) rotate(-45deg);
}

.record-nav-button[data-record-next] span {
    transform: translateX(-4px) rotate(135deg);
}

.form-actions.rx-voice-review-actions {
    align-self: end;
    margin: 8px 0 0;
    padding: 8px 0 0;
    background: var(--color-surface);
}

.rx-field {
    display: grid;
    grid-template-columns: minmax(var(--rx-field-width), max-content);
    gap: 4px;
    align-items: start;
    width: max-content;
    max-width: 100%;
    --rx-field-width: 24ch;
}

.rx-field-pair {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
}

.contact-photo-field {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
}

.contact-photo-field img,
.contact-card-photo {
    width: 56px;
    height: 56px;
    border: 1px solid var(--rr-border-color);
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface);
}

.contact-photo-field input[type="file"] {
    max-width: min(100%, 18rem);
}

.contact-row .contact-card {
    display: contents;
    cursor: pointer;
}

.contact-row {
    grid-template-columns: 76px minmax(0, 1fr) 42px;
}

.contact-row .contact-card:hover .rx-card-title,
.contact-row .contact-card:focus .rx-card-title {
    text-decoration: underline;
}

.contact-row .contact-card .contact-card-photo {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    width: 64px;
    height: 64px;
}

.contact-row .contact-card .rx-card-title,
.contact-row .contact-card .rx-card-meta {
    grid-column: 1 / 3;
}

.contact-row .contact-card.has-photo .rx-card-meta {
    grid-column: 2;
}

.contact-row .contact-card .rx-card-title {
    grid-row: 1;
}

.contact-row .contact-card .rx-card-meta {
    grid-row: 2;
}

.contact-row .rx-card-meta span:not(:last-child)::after {
    content: "";
    margin: 0;
}

.contact-row .row-icon-button {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
}

.rx-field-pair .rx-field + .rx-field {
    grid-template-columns: minmax(0, var(--rx-field-width));
}

.rx-field-label {
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: left;
}

.rx-field input,
.rx-field textarea {
    width: 100%;
    margin: 0;
}

.rx-field textarea {
    height: calc(3lh + 10px);
    min-height: calc(3lh + 10px);
    overflow-y: auto;
    resize: vertical;
}

.rx-field-pair .rx-field + .rx-field .rx-field-label {
    margin-left: 0;
}

.rx-field-pair .rx-field + .rx-field > input,
.rx-field-pair .rx-field + .rx-field > .rx-date-control,
.rx-field-pair .rx-field + .rx-field > .rx-stepper-control {
    margin-left: 0;
}

.rx-field-sixty {
    --rx-field-width: 60ch;
}

.rx-field-email {
    --rx-field-width: 50ch;
}

.rx-field-forty {
    --rx-field-width: 40ch;
}

.rx-field-seventy-five {
    --rx-field-width: 75ch;
}

.rx-field-portal {
    --rx-field-width: 67ch;
}

.rx-field-medium {
    --rx-field-width: 24ch;
}

.rx-field-phone {
    --rx-field-width: 16ch;
}

.rx-field-currency {
    --rx-field-width: 13ch;
}

.rx-field-currency input {
    font-family: "Courier New", Courier, monospace;
    text-align: right;
}

.rx-field-extension {
    --rx-field-width: 6ch;
}

.rx-field-name {
    --rx-field-width: 28ch;
}

.rx-field-short {
    --rx-field-width: 12ch;
}

.rx-field-title {
    --rx-field-width: 5ch;
}

.rx-field-quantity {
    --rx-field-width: calc(5ch + 10px);
}

.rx-field-tiny {
    --rx-field-width: calc(3ch + 10px);
}

.rx-field-quantity input,
.rx-field-tiny input {
    font-family: "Courier New", Courier, monospace;
}

.rx-field-quantity .rx-field-label {
    white-space: nowrap;
}

.rx-field-pair-quantity,
.rx-field-pair-refills {
    flex-wrap: nowrap;
}

.rx-field-rx-number {
    --rx-field-width: 20ch;
}

.rx-field-date {
    --rx-field-width: var(--rr-date-field-width, 24ch);
}

.rx-date-control {
    position: relative;
    display: grid;
    grid-template-columns: var(--rx-field-width) 34px;
    width: max-content;
    max-width: 100%;
    margin: 0;
}

.rx-date-control > input {
    margin: 0;
}

.rx-date-control > input:not([type="date"]) {
    font-family: "Courier New", Courier, monospace;
    border-radius: 4px 0 0 4px;
}

.rx-date-control > input:not([type="date"])::placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
}

.rx-date-control > input[type="date"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 34px;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.rx-date-picker-button {
    display: grid;
    place-items: center;
    min-height: 28px;
    padding: 4px;
    border: 1px solid var(--rr-main-color);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: var(--rr-main-color);
    color: var(--color-surface);
    cursor: pointer;
}

.rx-date-picker-button svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rx-stepper-control {
    display: grid;
    grid-template-columns: var(--rx-field-width) 20px;
    width: max-content;
    max-width: 100%;
    margin: 0;
}

.rx-stepper-control > input {
    width: var(--rx-field-width);
    margin: 0;
    border-radius: 4px 0 0 4px;
}

.rx-stepper-buttons {
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.rx-stepper-button {
    display: grid;
    place-items: center;
    min-height: 17px;
    padding: 0;
    border: 1px solid var(--rr-main-color);
    background: var(--color-surface);
    color: var(--rr-main-color);
    cursor: pointer;
}

.rx-stepper-button:first-child {
    border-radius: 0 4px 0 0;
    border-bottom: 0;
}

.rx-stepper-button:last-child {
    border-radius: 0 0 4px 0;
}

.rx-stepper-button svg {
    display: block;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes rr-spin {
    to {
        transform: rotate(360deg);
    }
}

.account-page {
    width: min(760px, 100%);
}

.data-entry-form {
    display: grid;
    align-items: start;
}

.form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-items: start;
}

.form-field-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
}

.form-row label {
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: left;
}

.field-stack {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.field-stack input {
    width: min(100%, 24rem);
}

.field-stack input[type="tel"] {
    width: min(100%, 17rem);
}

.field-stack input[type="color"] {
    width: 4rem;
    height: 2.25rem;
    padding: 2px;
    cursor: pointer;
}

.field-stack input[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px var(--color-danger-soft);
}

.radio-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.radio-fieldset legend {
    margin: 8px 0 0;
    padding: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.radio-options {
    display: flex;
    gap: 14px;
}

.radio-options label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.page-access-list {
    display: grid;
    gap: 0;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    overflow: hidden;
}

.page-access-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    align-items: center;
    border-bottom: 1px solid var(--rr-border-color);
    background: var(--color-surface);
}

.page-access-row > span {
    padding: 0 4px;
}

.page-access-row:last-child {
    border-bottom: 0;
}

.page-access-row > span:last-child {
    display: flex;
    justify-content: center;
    padding: 0;
}

.page-access-heading {
    background: var(--rr-main-color);
    color: var(--color-surface);
    font-weight: 700;
    text-align: center;
}

.page-access-row input {
    width: 20px;
    height: 20px;
}

.care-recipient-photo-preview {
    width: 96px;
    height: 96px;
    border: 1px solid var(--rr-border-color);
    border-radius: 4px;
    object-fit: cover;
}

.care-recipient-photo-dropzone {
    width: min(100%, 24rem);
    padding: 8px;
    border: 1px dashed var(--rr-border-color);
    border-radius: 6px;
}

.care-recipient-photo-dropzone.is-dragging {
    border-color: var(--rr-main-color);
    background: var(--color-primary-soft);
}

.form-help {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.form-message,
.account-role-note {
    width: min(100%, 36rem);
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid var(--rr-border-color);
    border-radius: 6px;
    background: var(--rr-background-color);
}

.form-message {
    display: grid;
    gap: 2px;
}

.ems-page {
    display: grid;
    gap: 18px;
}

.ems-qr-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.ems-qr-code {
    width: min(68vw, 260px);
    height: auto;
}

.ems-qr-link {
    display: inline-block;
    width: fit-content;
}

.ems-qr-details {
    display: grid;
    gap: 8px;
}

.ems-page h2 {
    margin: 12px 0;
    color: var(--color-primary);
}

.ems-page p {
    margin: 6px 0;
}

.ems-qr-details a {
    overflow-wrap: anywhere;
}

.ems-print-button {
    justify-self: start;
}

.ems-print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.ems-print-card {
    display: none;
}

.ems-wallet-card {
    display: none;
}

.ems-print-photo {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.ems-public-page {
    min-height: 100vh;
    padding: 18px;
    background: var(--color-bg, #f6f8fa);
    color: #1f2933;
}

.ems-public-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ems-report-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.ems-report-back {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rr-main-color);
    cursor: pointer;
}

.ems-report-back span {
    width: 22px;
    height: 22px;
    border-left: 4px solid currentColor;
    border-bottom: 4px solid currentColor;
    transform: rotate(45deg);
}

.ems-report-brand {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--color-primary, #2c6e9e);
}

.ems-report-brand strong {
    overflow: hidden;
    font-family: var(--rr-page-heading-font);
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-report-brand img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
    transform: scale(1.27);
    transform-origin: center;
}

.ems-print-brand {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: #000;
}

.ems-print-brand strong {
    overflow: hidden;
    font-family: var(--rr-page-heading-font);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-print-brand img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
    transform: scale(1.27);
    transform-origin: center;
}

.ems-wallet-photo {
    width: 0.95in;
    height: 0.95in;
    object-fit: cover;
    border-radius: 0.06in;
}

.ems-public-card h2,
.ems-public-card h3 {
    color: var(--color-primary, #2c6e9e);
}

.ems-patient-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.ems-patient-grid-no-photo {
    grid-template-columns: 1fr;
}

.ems-patient-section h2 {
    margin-top: 0;
}

.ems-report-photo {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
}

.ems-summary,
.ems-list-item dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.ems-summary div,
.ems-list-item dl div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
}

.ems-patient-grid .ems-summary div {
    grid-template-columns: 1fr;
    gap: 2px;
}

.ems-summary dt,
.ems-list-item dt {
    font-weight: 700;
}

.ems-summary dd,
.ems-list-item dd {
    margin: 0;
}

.ems-section-heading {
    margin-top: 32px;
}

.ems-list {
    display: grid;
    gap: 12px;
}

.ems-list-item {
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 8px;
}

.ems-medication-card {
    background: #eaf3f8;
}

.ems-provider-card {
    background: #f8e8ef;
}

.ems-list-item h3 {
    margin: 0 0 10px;
}

@media (max-width: 700px) {
    .ems-qr-panel {
        grid-template-columns: 1fr;
    }

    .ems-qr-code {
        justify-self: center;
    }

    .ems-report-photo {
        justify-self: start;
        width: 96px;
        height: 96px;
    }
}

@media print {
    body[data-page="ems"] {
        height: auto;
        overflow: visible;
        background: #fff;
    }

    body[data-page="ems"] .app-header,
    body[data-page="ems"] .app-tab-nav,
    body[data-page="ems"] .environment-indicator,
    body[data-page="ems"] .sync-status,
    body[data-page="ems"] .menu-backdrop,
    body[data-page="ems"] .side-menu,
    body[data-page="ems"] .page-title-row,
    body[data-page="ems"] .ems-qr-panel {
        display: none !important;
    }

    body[data-page="ems"] .app-shell,
    body[data-page="ems"] .app-main,
    body[data-page="ems"] .page-panel,
    body[data-page="ems"] .page-content,
    body[data-page="ems"] .ems-page {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
        padding: 0;
        margin: 0;
        background: #fff;
        box-shadow: none;
    }

    body[data-page="ems"].rr-print-qr .ems-print-card,
    body[data-page="ems"]:not(.rr-print-wallet) .ems-print-card {
        display: grid;
        justify-items: center;
        gap: 18px;
        color: #000;
        text-align: center;
    }

    body[data-page="ems"] .ems-print-card h2 {
        margin: 0;
        color: #000;
        font-family: var(--rr-font-family);
        font-size: 24pt;
    }

    body[data-page="ems"] .ems-print-card .ems-qr-code {
        width: 131px;
        max-width: 100%;
    }

    body[data-page="ems"].rr-print-wallet .ems-print-card {
        display: none;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-card {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 0.057in;
        width: 2.875in;
        height: 1.875in;
        padding: 0.127in;
        color: #000;
        border: 1px solid #999;
        background: #fff;
        overflow: hidden;
        page-break-inside: avoid;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.085in;
        line-height: 1.1;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-header h1 {
        margin: 0;
        color: var(--color-accent);
        font-family: var(--rr-font-family);
        font-size: 11.31pt;
        line-height: 1.1;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-header > span {
        display: flex;
        align-items: center;
        gap: 0.043in;
        color: var(--color-accent);
        font-family: var(--rr-page-heading-font);
        font-size: 7.96pt;
        white-space: nowrap;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-header img {
        width: 0.276in;
        height: 0.276in;
        object-fit: contain;
        transform: scale(1.27);
        transform-origin: center;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-name {
        font-weight: 700;
        font-size: 7.78pt;
        line-height: 1.1;
        text-align: center;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-body {
        display: grid;
        grid-template-columns: 0.779in minmax(0, 0.637in) 0.622in;
        gap: 0.156in;
        align-items: center;
        min-height: 0;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-photo-cell {
        display: grid;
        justify-items: center;
        gap: 0.043in;
        min-height: 0.672in;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-photo {
        width: 0.672in;
        height: 0.672in;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-instructions {
        display: contents;
        min-width: 0;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-instructions p {
        margin: 0;
        font-size: 5.83pt;
        line-height: 1.2;
        text-align: left;
        align-self: center;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-card .ems-qr-code {
        width: 0.622in;
        max-width: 100%;
        align-self: center;
    }

    body[data-page="ems"].rr-print-wallet .ems-wallet-footer {
        align-self: end;
        margin: 0;
        font-size: 5.35pt;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
    }
}

.form-success {
    border-color: var(--color-success);
    background: var(--color-success-soft);
}

.form-error,
.field-error {
    color: var(--color-danger);
}

.form-error {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
}

.field-error {
    max-width: 30rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.password-control {
    display: grid;
    grid-template-columns: minmax(0, 24rem) 34px;
    width: min(100%, calc(24rem + 34px));
}

.password-control input {
    width: 100%;
    border-radius: 4px 0 0 4px;
}

.password-toggle {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 28px;
    padding: 0;
    border: 1px solid var(--rr-main-color);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: var(--rr-main-color);
    color: var(--color-surface);
    cursor: pointer;
}

.password-toggle::before {
    content: "";
    width: 18px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50% / 65%;
}

.password-toggle::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.form-actions {
    display: flex;
    margin: 16px 0 0;
}

.care-recipient-actions {
    flex-wrap: wrap;
    gap: 12px;
}

.login-passkey-actions {
    margin: 0 0 8px;
}

.passkey-add-actions {
    margin: 0 0 12px;
}

.passkey-list {
    display: grid;
    width: min(100%, 36rem);
    border: 1px solid var(--rr-border-color);
}

.passkey-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--rr-border-color);
    background: var(--color-surface);
}

.passkey-row:last-child {
    border-bottom: 0;
}

.passkey-row span {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.schedule-app {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 18px;
}

.is-desktop-device body[data-page="schedule"] .schedule-app,
.is-desktop-device body[data-page="diary"] .diary-app {
    margin-left: 0;
    margin-right: auto;
}

.schedule-actions-row,
.schedule-form-actions,
.schedule-calendar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.schedule-actions-row {
    justify-content: space-between;
}

.schedule-add-button,
.diary-add-button {
    display: grid;
    place-content: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rr-main-color);
    color: var(--color-surface);
    cursor: pointer;
}

.schedule-add-button svg,
.diary-add-button svg {
    display: block;
    width: 36px;
    height: 36px;
    padding: 9px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.schedule-add-button span,
.diary-add-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.schedule-event-form {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface-secondary);
}

.schedule-event-form label {
    display: grid;
    gap: 4px;
    font-weight: 700;
}

.schedule-event-form textarea {
    resize: vertical;
}

.schedule-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.schedule-time-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.schedule-calendar-nav {
    justify-content: space-between;
}

.schedule-calendar-nav h2,
.schedule-selected-events h3,
.schedule-list-day h2 {
    margin: 0;
    color: var(--rr-main-color);
    font-size: 1.1rem;
    line-height: 1.2;
}

.schedule-nav-button {
    min-width: 42px;
    padding-inline: 10px;
}

.schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 2px;
    row-gap: 0;
    margin-top: 8px;
}

.schedule-weekday {
    padding: 4px 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.schedule-day {
    display: grid;
    place-items: center;
    width: 100%;
    height: 44px;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    border: 1px solid var(--rr-border-color);
    border-radius: 0;
    background: var(--color-surface);
    color: var(--rr-text-color);
    cursor: pointer;
}

.schedule-day span {
    font-weight: 400;
}

.schedule-day.is-outside-month {
    color: var(--color-text-subtle);
    background: var(--color-surface-secondary);
}

.schedule-day.has-events {
    background: var(--rr-main-color);
}

.schedule-day.has-events span {
    color: var(--color-surface);
    font-weight: 700;
}

.schedule-day.is-today {
    border-color: var(--rr-main-color);
}

.schedule-day.is-selected {
    outline: 3px solid var(--color-primary-soft);
    background: #00B050;
}

.schedule-day.is-selected span {
    color: var(--color-surface);
    font-weight: 700;
}

.schedule-selected-events,
.schedule-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.schedule-list {
    margin-top: 0;
}

.schedule-list-day {
    display: grid;
    gap: 8px;
    scroll-margin-top: 8px;
}

.schedule-list-day h2 {
    margin-top: 24px;
}

.schedule-event-list {
    display: grid;
    gap: 8px;
}

.schedule-event-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--rr-text-color);
    text-align: left;
    cursor: pointer;
}

.schedule-event-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.schedule-event-main p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.schedule-event-time {
    flex: 0 0 auto;
    color: var(--rr-main-color);
    font-weight: 700;
}

.schedule-empty {
    margin: 0;
    color: var(--color-text-muted);
}

.is-mobile-portrait body[data-page="schedule"] .page-panel {
    padding-top: 6px;
    padding-bottom: 6px;
}

.is-mobile-portrait body[data-page="schedule"] .page-content {
    padding-bottom: 0;
}

.is-mobile-portrait body[data-page="schedule"] .page-title-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 5px 8px;
}

.is-mobile-portrait body[data-page="home"] .page-title-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 8px;
}

.is-mobile-portrait body[data-page="home"] .care-central-title-search {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-left: 0;
}

.is-mobile-portrait body[data-page="schedule"] .page-title-row .page-icon,
.is-mobile-portrait body[data-page="diary"] .page-title-row .page-icon {
    grid-column: 1;
    grid-row: 1;
}

.is-mobile-portrait body[data-page="schedule"] .page-title-row h1,
.is-mobile-portrait body[data-page="diary"] .page-title-row h1 {
    grid-column: 2 / -1;
    grid-row: 1;
}

.is-mobile-portrait body[data-page="schedule"] .schedule-title-search,
.is-mobile-portrait body[data-page="diary"] .diary-title-search {
    grid-column: 1 / 3;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    margin-left: 0;
}

.is-mobile-portrait body[data-page="schedule"] .schedule-title-view-actions,
.is-mobile-portrait body[data-page="diary"] .diary-title-view-actions {
    grid-column: 3;
    grid-row: 2;
    margin-left: 0;
}

.is-mobile-portrait body[data-page="schedule"] .page-icon {
    width: 50px;
    height: 50px;
    margin-left: -10px;
}

.is-mobile-portrait body[data-page="schedule"] h1 {
    font-size: 1.7rem;
}

.is-mobile-portrait .schedule-app {
    gap: 6px;
    max-width: 100%;
    padding-bottom: 0;
}

.is-mobile-portrait .schedule-add-button,
.is-mobile-portrait .diary-add-button {
    position: fixed;
    right: 40px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 30;
    width: 72px;
    height: auto;
    min-height: 98px;
    gap: 8px;
    justify-items: center;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    color: var(--rr-main-color);
    font-weight: 700;
}

.is-mobile-portrait .schedule-add-button svg,
.is-mobile-portrait .diary-add-button svg {
    width: 72px;
    height: 72px;
    padding: 18px;
    border-radius: 50%;
    background: var(--rr-main-color);
    color: var(--color-surface);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

.is-mobile-portrait .schedule-add-button span,
.is-mobile-portrait .diary-add-button span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
}

.is-mobile-portrait .schedule-view-button {
    min-height: 30px;
    padding: 3px 10px;
}

.is-mobile-portrait .schedule-actions-row .primary-button,
.is-mobile-portrait .schedule-actions-row .secondary-button,
.is-mobile-portrait .schedule-nav-button {
    min-height: 30px;
    padding: 3px 10px;
}

.is-mobile-portrait .schedule-calendar-nav h2,
.is-mobile-portrait .schedule-selected-events h3,
.is-mobile-portrait .schedule-list-day h2 {
    font-size: 0.98rem;
}

.is-mobile-portrait .schedule-calendar {
    column-gap: 2px;
    row-gap: 0;
    margin-top: 4px;
}

.is-mobile-portrait .schedule-weekday {
    padding: 1px 0;
    font-size: 0.68rem;
}

.is-mobile-portrait .schedule-day {
    height: 34px;
    font-size: 0.9rem;
}

.is-mobile-portrait .schedule-selected-events,
.is-mobile-portrait .schedule-list {
    gap: 6px;
    margin-top: 6px;
}

.is-mobile-portrait .schedule-list-day,
.is-mobile-portrait .schedule-event-list {
    gap: 5px;
}

.is-mobile-portrait .schedule-event-row {
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
}

.is-mobile-portrait .schedule-event-main p {
    font-size: 0.82rem;
    line-height: 1.25;
}

.is-mobile-portrait .schedule-empty {
    font-size: 0.9rem;
}

.diary-app {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 18px;
}

.diary-actions-row,
.diary-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.diary-actions-row {
    justify-content: space-between;
}

.is-desktop-device body[data-page="diary"] .diary-actions-row {
    justify-content: space-between;
}

.diary-entry-form {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface-secondary);
}

.diary-entry-form label {
    display: grid;
    gap: 4px;
    font-weight: 700;
}

.diary-entry-form textarea {
    resize: vertical;
}

.diary-form-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 10px;
}

.diary-list {
    display: grid;
    gap: 10px;
}

.diary-entry-card {
    display: block;
}

.diary-entry-main {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--rr-text-color);
    text-align: left;
    cursor: pointer;
}

.diary-entry-main:hover,
.diary-entry-main:focus {
    border-color: var(--rr-main-color);
    outline: 3px solid var(--color-primary-soft);
    outline-offset: 1px;
}

.diary-entry-date {
    color: var(--rr-main-color);
    font-size: 0.9rem;
    font-weight: 700;
}

.diary-entry-main p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.35;
    white-space: pre-wrap;
}

.diary-entry-main p strong {
    color: var(--rr-text-color);
}

.diary-empty,
.diary-entry-empty {
    margin: 0;
    color: var(--color-text-muted);
}

.is-mobile-portrait body[data-page="diary"] .page-title-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 5px 8px;
}

.is-mobile-portrait body[data-page="diary"] .page-icon {
    width: 50px;
    height: 50px;
    margin-left: -10px;
}

.is-mobile-portrait body[data-page="diary"] h1 {
    font-size: 1.7rem;
}

.is-mobile-portrait .diary-app {
    gap: 6px;
    max-width: 100%;
    padding-bottom: 0;
}

.is-mobile-portrait .diary-form-grid {
    grid-template-columns: 1fr;
}

.is-mobile-portrait .diary-view-button,
.is-mobile-portrait .diary-actions-row .primary-button,
.is-mobile-portrait .diary-form-actions .primary-button,
.is-mobile-portrait .diary-form-actions .secondary-button,
.is-mobile-portrait .diary-form-actions .danger-button {
    min-height: 30px;
    padding: 3px 10px;
}

.is-mobile-portrait .diary-entry-form,
.is-mobile-portrait .diary-entry-main {
    padding: 8px;
    border-radius: 6px;
}

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--rr-main-color);
    border-radius: 6px;
    background: var(--rr-main-color);
    color: var(--color-surface);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--color-danger);
    border-radius: 6px;
    background: var(--color-danger);
    color: var(--color-surface);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.primary-button:focus,
.secondary-button:focus,
.danger-button:focus,
.password-toggle:focus,
.field-stack input:focus {
    outline: 3px solid var(--color-primary-soft);
    outline-offset: 1px;
}

.app-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: var(--color-overlay-strong);
}

.app-dialog {
    width: min(420px, 100%);
    padding: 18px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: var(--rr-shadow);
}

.app-dialog h2 {
    margin: 0 0 8px;
    color: var(--rr-main-color);
    font-size: 1.3rem;
    line-height: 1.2;
}

.app-dialog p {
    margin: 0 0 16px;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
}

.markdown-content > :last-child {
    margin-bottom: 0;
}

.page-content > :last-child {
    margin-bottom: 0;
}

.is-desktop-device .app-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding-inline: 24px;
}

.is-desktop-device .brand strong {
    font-size: 1.24rem;
}

.is-desktop-device .brand {
    position: absolute;
    left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
}

.is-desktop-device .app-tab-nav {
    display: none;
}

.is-desktop-device .side-menu {
    right: 24px;
}

.is-desktop-device .account-menu {
    left: 24px;
}

.is-mobile-portrait .brand span {
    display: none;
}

.is-mobile-portrait .care-recipient-picker {
    margin-left: 0;
}

.is-mobile-portrait .care-recipient-menu {
    left: -54px;
}

.is-mobile-portrait .app-shell {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.is-mobile-portrait .app-tab-nav {
    grid-row: 3;
    position: relative;
    z-index: 22;
    max-width: none;
    margin-top: -1px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rr-border-color);
    border-bottom: 1px solid var(--rr-border-color);
    border-radius: 0;
    box-shadow: none;
}

.is-mobile-portrait .app-tab-item {
    min-height: 58px;
    padding: 5px 4px;
}

.is-mobile-portrait .app-tab-label {
    font-size: 0.78rem;
}

.is-mobile-portrait .app-tab-label-full {
    display: none;
}

.is-mobile-portrait .app-tab-label-short {
    display: block;
}

.is-mobile-portrait .care-central-login-sticky {
    bottom: calc(82px + env(safe-area-inset-bottom));
}

.is-mobile-portrait .admin-sticky {
    bottom: calc(82px + env(safe-area-inset-bottom));
}

.is-mobile-portrait .app-main {
    grid-row: 2;
    padding: 0;
}

.is-mobile-portrait .user-card {
    grid-template-columns: 1fr;
}

.is-mobile-portrait .user-card-actions {
    justify-content: flex-start;
}

.is-mobile-portrait .page-panel {
    min-width: 0;
    padding: 18px 14px 28px;
    border: 0;
    border-bottom: 1px solid var(--rr-border-color);
    border-radius: 0;
    box-shadow: none;
}

.is-mobile-portrait .page-title-row {
    align-items: center;
    gap: 8px;
}

.is-mobile-portrait .page-icon {
    width: 92px;
    height: 92px;
}

.is-mobile-portrait body[data-page="providers"] .page-icon,
.is-mobile-portrait body[data-page="provider-details"] .page-icon,
.is-mobile-portrait body[data-page="pharmacies"] .page-icon,
.is-mobile-portrait body[data-page="pharmacy-details"] .page-icon,
.is-mobile-portrait body[data-page="documents"] .page-icon,
.is-mobile-portrait body[data-page="document-details"] .page-icon,
.is-mobile-portrait body[data-page="contacts"] .page-icon,
.is-mobile-portrait body[data-page="contact-details"] .page-icon {
    width: 64px;
    height: 64px;
}

.is-mobile-portrait body[data-page="providers"] .page-title-row h1,
.is-mobile-portrait body[data-page="provider-details"] .page-title-row h1,
.is-mobile-portrait body[data-page="pharmacies"] .page-title-row h1,
.is-mobile-portrait body[data-page="pharmacy-details"] .page-title-row h1,
.is-mobile-portrait body[data-page="documents"] .page-title-row h1,
.is-mobile-portrait body[data-page="document-details"] .page-title-row h1,
.is-mobile-portrait body[data-page="contacts"] .page-title-row h1,
.is-mobile-portrait body[data-page="contact-details"] .page-title-row h1 {
    font-size: clamp(1.55rem, 8vw, 2rem);
}

.is-mobile-portrait body[data-page="providers"] .rx-manager-app,
.is-mobile-portrait body[data-page="provider-details"] .rx-manager-app,
.is-mobile-portrait body[data-page="pharmacies"] .rx-manager-app,
.is-mobile-portrait body[data-page="pharmacy-details"] .rx-manager-app,
.is-mobile-portrait body[data-page="documents"] .rx-manager-app,
.is-mobile-portrait body[data-page="document-details"] .rx-manager-app,
.is-mobile-portrait body[data-page="contacts"] .rx-manager-app,
.is-mobile-portrait body[data-page="contact-details"] .rx-manager-app {
    width: 100%;
    min-width: 0;
}

.is-mobile-portrait body[data-page="providers"] .rx-card-meta,
.is-mobile-portrait body[data-page="pharmacies"] .rx-card-meta,
.is-mobile-portrait body[data-page="documents"] .rx-card-meta,
.is-mobile-portrait body[data-page="contacts"] .rx-card-meta {
    min-width: 0;
    overflow-wrap: anywhere;
}

.is-mobile-portrait body[data-page="providers"] .rx-card-meta button,
.is-mobile-portrait body[data-page="pharmacies"] .rx-card-meta button,
.is-mobile-portrait body[data-page="documents"] .rx-card-meta button,
.is-mobile-portrait body[data-page="contacts"] .rx-card-meta button {
    max-width: 100%;
}

.is-mobile-portrait body[data-page="home"] .tile-grid {
    justify-content: center;
}

.is-mobile-portrait .tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(88px, 107px));
    gap: 7px;
}

.is-mobile-portrait .home-tile {
    gap: 4px;
    min-height: 83px;
    padding: 7px;
}

.is-mobile-portrait .home-tile img {
    max-width: 64px;
    max-height: 43px;
}

.is-mobile-portrait body[data-page="home"] .care-central-tile {
    gap: 2px;
    padding: 6px;
}

.is-mobile-portrait body[data-page="home"] .care-central-tile img {
    max-width: 70px;
    max-height: 47px;
}

.is-mobile-portrait body[data-page="home"] .care-central-tile .tile-label {
    font-weight: 900;
    color: var(--rr-main-color);
}

.is-mobile-portrait .home-tile img.care-recipient-tile-photo {
    width: 64px;
    height: 43px;
}

.is-mobile-portrait .field-stack input,
.is-mobile-portrait .field-stack input[type="tel"],
.is-mobile-portrait .password-control,
.is-mobile-portrait .form-message,
.is-mobile-portrait .account-role-note {
    width: 100%;
}

.is-mobile-portrait body[data-page="rr-companion"] .page-content,
.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-config,
.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-config form,
.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-link,
.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-view-card,
.is-mobile-portrait body[data-page="rr-companion"] .rr-widget-config,
.is-mobile-portrait body[data-page="rr-companion"] .rr-template-preview {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-actions,
.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-view-fields,
.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-block-fields,
.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-view-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-block-config,
.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-config label {
    min-width: 0;
    width: 100%;
}

.is-mobile-portrait body[data-page="rr-companion"] .rr-widget-config-grid {
    grid-template-columns: minmax(0, 1fr);
}

.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-config input,
.is-mobile-portrait body[data-page="rr-companion"] .rr-companion-config select {
    width: 100%;
    min-width: 0;
}

.is-mobile-portrait body[data-page="rr-companion"] .rr-checkbox-label input[type="checkbox"] {
    width: 24px;
    min-width: 24px;
    height: 24px;
}

.is-mobile-device body[data-page="rr-companion"] .page-content {
    overflow: hidden;
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-actions {
    display: none;
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-desktop-save {
    display: none;
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-link-actions {
    flex-wrap: nowrap;
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-link-actions form {
    width: auto;
}

.is-mobile-device .add-new[data-add-new] {
    position: fixed;
    right: 40px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 30;
    width: 72px;
    height: auto;
    min-height: 98px;
    gap: 8px;
    justify-items: center;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    color: var(--rr-main-color);
    font-weight: 700;
    touch-action: none;
    user-select: none;
}

.is-mobile-device .add-new[data-add-new] svg {
    width: 72px;
    height: 72px;
    padding: 18px;
    border-radius: 50%;
    background: var(--rr-main-color);
    color: var(--color-surface);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}

.is-mobile-device .add-new[data-add-new] span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-view-card {
    display: none;
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-view-card.is-modal-open {
    position: fixed;
    inset: 12px;
    z-index: 10000;
    display: grid;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    align-content: start;
    border: 2px solid var(--rr-main-color);
    box-shadow: 0 0 0 100vmax rgb(0 0 0 / 55%);
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-view-card.is-modal-open {
    grid-template-columns: minmax(0, 1fr);
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-view-card.is-modal-open > .rr-template-preview {
    grid-column: 1;
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-modal-heading,
.is-mobile-device body[data-page="rr-companion"] .rr-companion-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.is-mobile-device body[data-page="rr-companion"] .rr-companion-modal-actions {
    position: sticky;
    bottom: -14px;
    justify-content: flex-end;
    margin: 0 -14px -14px;
    padding: 12px 14px;
    border-top: 1px solid var(--rr-border-color);
    background: var(--rr-surface-color);
}

.rr-view-modal-open {
    overflow: hidden;
}

.rr-view-action-dialog label {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
    font-weight: 700;
}

.rr-view-action-dialog input[type="number"] {
    width: 8ch;
}

.is-mobile-portrait .password-control {
    grid-template-columns: minmax(0, 1fr) 34px;
}

.is-mobile-portrait .rx-voice-nav {
    display: none;
}

.is-mobile-portrait .rx-voice-step-review {
    gap: 6px;
}

.is-mobile-portrait .rx-field-pair {
    gap: 8px;
}

.is-mobile-portrait .rx-field-pair-quantity {
    display: flex;
    flex-wrap: nowrap;
}

.is-mobile-portrait .rx-field-pair-medication {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
}

.is-mobile-portrait .rx-field-pair-medication .rx-field {
    min-width: 0;
}

.is-mobile-portrait .provider-name-pair {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 8px;
}

.is-mobile-portrait .provider-city-state-zip {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 8px;
}

.is-mobile-portrait .provider-name-pair .rx-field,
.is-mobile-portrait .provider-city-state-zip .rx-field {
    min-width: 0;
}

.is-mobile-portrait .provider-name-pair .rx-field-name {
    --rx-field-width: 11ch;
}

.is-mobile-portrait .provider-name-pair .rx-field-short {
    --rx-field-width: 8ch;
}

.is-mobile-portrait .provider-city-state-zip .rx-field-name {
    --rx-field-width: 13ch;
}

.is-mobile-portrait body[data-page="provider-details"] .provider-detail-form .rx-form-fixed,
.is-mobile-portrait body[data-page="provider-details"] .provider-detail-form .rx-form-scroll,
.is-mobile-portrait body[data-page="pharmacy-details"] .provider-detail-form .rx-form-fixed,
.is-mobile-portrait body[data-page="pharmacy-details"] .provider-detail-form .rx-form-scroll,
.is-mobile-portrait body[data-page="contact-details"] .provider-detail-form .rx-form-fixed,
.is-mobile-portrait body[data-page="contact-details"] .provider-detail-form .rx-form-scroll {
    width: 100%;
    min-width: 0;
}

.is-mobile-portrait body[data-page="document-details"] .document-form,
.is-mobile-portrait body[data-page="document-details"] .document-form-grid,
.is-mobile-portrait body[data-page="document-details"] .document-form .rx-field {
    width: 100%;
    min-width: 0;
}

.is-mobile-portrait body[data-page="document-details"] .document-form-grid {
    grid-template-columns: minmax(0, 1fr);
}

.is-mobile-portrait body[data-page="document-details"] .document-form .rx-field {
    --rx-field-width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

.is-mobile-portrait body[data-page="document-details"] .rx-voice-review-actions {
    flex-wrap: wrap;
}

.is-mobile-portrait body[data-page="documents"] .document-row {
    grid-template-columns: minmax(0, 1fr) 38px 38px 38px;
}

.is-mobile-portrait body[data-page="documents"] .document-icon-button,
.is-mobile-portrait body[data-page="documents"] .row-icon-button {
    min-width: 38px;
    padding-inline: 2px;
}

.is-mobile-portrait body[data-page="provider-details"] .provider-detail-form .rx-field-pair,
.is-mobile-portrait body[data-page="pharmacy-details"] .provider-detail-form .rx-field-pair,
.is-mobile-portrait body[data-page="contact-details"] .provider-detail-form .rx-field-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.is-mobile-portrait body[data-page="provider-details"] .provider-detail-form .rx-field,
.is-mobile-portrait body[data-page="pharmacy-details"] .provider-detail-form .rx-field,
.is-mobile-portrait body[data-page="contact-details"] .provider-detail-form .rx-field {
    width: 100%;
    min-width: 0;
    --rx-field-width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

.is-mobile-portrait body[data-page="contact-details"] .provider-detail-form .provider-name-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.is-mobile-portrait body[data-page="contact-details"] .provider-detail-form .provider-city-state-zip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 4.5rem) minmax(0, 7.5rem);
}

.is-mobile-portrait body[data-page="contact-details"] .provider-detail-form .provider-contact-pair {
    grid-template-columns: minmax(0, 16ch) minmax(0, 6ch);
}

.is-mobile-portrait body[data-page="provider-details"] .provider-portal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.is-mobile-portrait body[data-page="provider-details"] .provider-portal-test {
    margin-top: 0;
}

.is-mobile-portrait .rx-field input,
.is-mobile-portrait .rx-date-control,
.is-mobile-portrait .rx-stepper-control,
.is-mobile-portrait .rx-field-pair .rx-field + .rx-field > input,
.is-mobile-portrait .rx-field-pair .rx-field + .rx-field > .rx-date-control,
.is-mobile-portrait .rx-field-pair .rx-field + .rx-field > .rx-stepper-control {
    margin-left: 0;
}

.is-mobile-landscape .app-shell {
    position: fixed;
    inset: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.is-mobile-landscape .app-header,
.is-mobile-landscape .app-tab-nav {
    position: relative;
    top: auto;
}

.is-mobile-landscape .app-header {
    grid-row: 1;
    min-height: 48px;
    padding: 6px 11px 6px 18px;
    column-gap: 8px;
}

.is-mobile-landscape .care-recipient-picker {
    margin-left: 15px;
}

.is-mobile-landscape .current-care-recipient {
    gap: 6px;
    font-size: 27px;
}

.is-mobile-landscape .current-care-recipient img,
.is-mobile-landscape .brand img,
.is-mobile-landscape .icon-button,
.is-mobile-landscape .account-toggle {
    width: 33px;
    height: 33px;
}

.is-mobile-landscape .current-care-recipient span {
    min-height: 33px;
}

.is-mobile-landscape .sync-status {
    height: 42px;
    font-size: 0.52rem;
    line-height: 1;
}

.is-mobile-landscape .brand {
    gap: 8px;
    margin-right: 3px;
}

.is-mobile-landscape .brand strong {
    font-size: 0.93rem;
}

.is-mobile-landscape .icon-button,
.is-mobile-landscape .account-toggle {
    padding: 6px;
    border-radius: 6px;
}

.is-mobile-landscape .icon-button {
    gap: 3px;
}

.is-mobile-landscape .icon-button span {
    width: 18px;
    height: 2px;
}

.is-mobile-landscape .account-avatar {
    width: 18px;
    height: 18px;
}

.is-mobile-landscape .account-avatar::before {
    width: 6px;
    height: 6px;
    border-width: 2px;
}

.is-mobile-landscape .account-avatar::after {
    bottom: 0;
    width: 15px;
    height: 6px;
    border-width: 2px;
    border-bottom: 0;
}

.is-mobile-landscape .app-tab-nav {
    grid-row: 2;
    max-width: none;
    padding: 0;
    box-shadow: none;
}

.is-mobile-landscape .app-tab-item {
    padding: 0;
}

.is-mobile-landscape .app-main {
    grid-row: 3;
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
}

.is-mobile-landscape .page-panel {
    min-height: 0;
}

.is-mobile-landscape .page-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.is-mobile-landscape .page-panel {
    padding-top: 0;
}

.is-mobile-landscape .page-title-row {
    gap: 3px;
}

.is-mobile-landscape .page-icon {
    width: 42px;
    height: 42px;
}

.is-mobile-landscape h1 {
    font-size: clamp(0.88rem, 3.96vw, 1.18rem);
}

.is-mobile-landscape .page-title-action.primary-button,
.is-mobile-landscape .page-title-action.secondary-button,
.is-mobile-landscape .page-title-action.danger-button {
    min-height: 27px;
    padding: 5px 11px;
    border-radius: 5px;
    font-size: 0.75rem;
}

.is-mobile-landscape .page-title-action .rx-button-icon,
.is-mobile-landscape .page-title-action svg {
    width: 15px;
    height: 15px;
}

.is-mobile-landscape .app-tab-item img,
.is-mobile-landscape .app-tab-more-icon {
    display: none;
}

.is-mobile-landscape .tile-grid {
    grid-template-columns: repeat(auto-fit, minmax(88px, 107px));
    gap: 7px;
}

.is-mobile-landscape .home-tile {
    gap: 4px;
    min-height: 83px;
    padding: 7px;
}

.is-mobile-landscape .home-tile img {
    max-width: 64px;
    max-height: 43px;
}

.is-mobile-landscape body[data-page="home"] .care-central-tile {
    gap: 2px;
    padding: 6px;
}

.is-mobile-landscape body[data-page="home"] .care-central-tile img {
    max-width: 70px;
    max-height: 47px;
}

.is-mobile-landscape body[data-page="home"] .care-central-tile .tile-label {
    font-weight: 900;
    color: var(--rr-main-color);
}

.is-mobile-landscape .home-tile img.care-recipient-tile-photo {
    width: 64px;
    height: 43px;
}

.rr-companion-config {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 16px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.rr-companion-link,
.rr-companion-view-list,
.rr-companion-view-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--rr-surface-color);
}

.rr-companion-link h2 {
    margin: 0;
    color: var(--rr-main-color);
}

.rr-companion-link-heading,
.rr-companion-link-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.rr-companion-link-heading {
    justify-content: space-between;
}

.rr-companion-link-actions form {
    width: auto;
    margin: 0;
}

.rr-companion-link p {
    margin: 0;
    overflow-wrap: anywhere;
}

.rr-companion-view-list h2,
.rr-companion-modal-heading h2 {
    margin: 0;
    color: var(--rr-main-color);
}

.rr-companion-view-list-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rr-companion-view-list ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rr-border-color);
    border-radius: 5px;
    list-style: none;
    overflow: hidden;
}

.rr-companion-view-list li {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid var(--rr-border-color);
    transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease;
}

.rr-companion-view-list li:last-child {
    border-bottom: 0;
}

.rr-companion-view-list a {
    min-width: 0;
    padding: 10px 8px;
    background: transparent;
    color: var(--rr-main-color);
    text-align: left;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.rr-companion-view-list li:hover,
.rr-companion-view-list li:focus-within {
    background: var(--color-primary-soft);
}

.rr-view-drag-handle {
    display: grid;
    place-content: center;
    width: 34px;
    height: 42px;
    padding: 7px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: grab;
    touch-action: none;
}

.rr-view-drag-handle:active {
    cursor: grabbing;
}

.rr-view-drag-handle svg {
    width: 16px;
    height: 24px;
    fill: currentColor;
}

.rr-companion-view-list li.is-view-dragging {
    z-index: 2;
    opacity: 0.48;
    outline: 3px solid var(--rr-main-color);
    outline-offset: -3px;
    background: var(--color-primary-soft);
    transform: scale(0.985);
}

.rr-companion-view-list li.is-drop-before::before,
.rr-companion-view-list li.is-drop-after::after {
    position: absolute;
    z-index: 4;
    left: 4px;
    right: 4px;
    height: 5px;
    border-radius: 999px;
    background: var(--rr-main-color);
    content: "";
    pointer-events: none;
}

.rr-companion-view-list li.is-drop-before::before {
    top: -3px;
}

.rr-companion-view-list li.is-drop-after::after {
    bottom: -3px;
}

.rr-companion-view-list li.is-drop-before,
.rr-companion-view-list li.is-drop-after {
    background: var(--color-primary-soft);
}

body.rr-view-sort-active {
    cursor: grabbing;
    user-select: none;
}

.rr-view-list-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rr-view-list-actions button {
    display: grid;
    place-content: center;
    width: 34px;
    height: 34px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: var(--rr-main-color);
    cursor: pointer;
}

.rr-view-list-actions svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-new {
    display: grid;
    place-content: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rr-main-color);
    color: var(--color-surface);
    cursor: pointer;
}

.add-new svg {
    display: block;
    width: 36px;
    height: 36px;
    padding: 9px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-new span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rr-companion-modal-heading,
.rr-companion-modal-actions {
    display: none;
}

.rr-companion-editor-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}

.is-desktop-device body[data-page="rr-companion"] .page-content {
    overflow: hidden;
}

.is-desktop-device body[data-page="rr-companion"] .rr-companion-config {
    grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
}

.is-desktop-device body[data-page="rr-companion"] .rr-companion-link {
    grid-column: 1;
    grid-row: 1;
}

.is-desktop-device body[data-page="rr-companion"] .rr-companion-view-list {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
}

.is-desktop-device body[data-page="rr-companion"] .rr-companion-desktop-save {
    justify-self: start;
}

.is-desktop-device body[data-page="rr-companion"] .rr-companion-editor-form {
    grid-column: 2;
    grid-row: 1 / -1;
    height: 100%;
}

.is-desktop-device body[data-page="rr-companion"] .rr-companion-view-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.rr-companion-view-card {
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    align-items: start;
}

.rr-companion-view-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-self: start;
    min-width: 0;
}

.rr-companion-view-fields label,
.rr-companion-view-fields input,
.rr-companion-view-fields select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.rr-companion-view-card > .rr-template-preview {
    width: 100%;
    align-self: start;
}

.rr-companion-modal-heading,
.rr-companion-block-fields,
.rr-companion-modal-actions {
    grid-column: 1 / -1;
}

.rr-companion-actions,
.rr-companion-view-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
}

.rr-companion-actions {
    justify-content: flex-end;
}

.rr-companion-block-config {
    display: grid;
    gap: 8px;
    min-width: 0;
    align-self: start;
}

.is-desktop-device body[data-page="rr-companion"] .rr-companion-block-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
}

.is-desktop-device body[data-page="rr-companion"] .rr-companion-block-fields.is-single-block {
    grid-template-columns: minmax(0, 1fr);
}

.rr-companion-config label {
    display: grid;
    gap: 4px;
    min-width: min(100%, 180px);
    font-weight: 700;
}

.rr-companion-config input,
.rr-companion-config select {
    font-weight: 400;
}

.rr-widget-config {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface-secondary);
}

.rr-widget-config summary {
    color: var(--rr-main-color);
    font-weight: 700;
    cursor: pointer;
}

.rr-widget-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.rr-widget-config-wide {
    grid-column: 1 / -1;
}

.rr-widget-config-field {
    display: grid;
    gap: 4px;
}

.rr-widget-config-field-label {
    color: var(--rr-text-color);
    font-weight: 700;
}

.rr-widget-config textarea {
    min-height: 160px;
    resize: vertical;
}

.rr-today-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--rr-background-color);
}

.rr-today-preview-toolbar {
    display: flex;
    justify-content: center;
    padding: max(10px, env(safe-area-inset-top)) 10px 10px;
    background: var(--rr-surface-color);
    border-bottom: 1px solid var(--rr-border-color);
}

.rr-today-preview-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--rr-background-color);
}

.rr-checkbox-label {
    align-content: center;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 40px;
}

.rr-template-preview,
.rr-today-view {
    display: grid;
    gap: 10px;
}

.rr-template-preview {
    min-height: 180px;
    padding: 8px;
    border: 1px dashed var(--rr-border-color);
    border-radius: 8px;
    background: var(--color-surface-secondary);
}

.rr-template-preview > div,
.rr-today-block {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    border: 2px solid var(--rr-main-color);
    border-radius: 8px;
    background: var(--rr-surface-color);
    color: var(--rr-main-color);
    font-weight: 700;
    text-align: center;
}

.rr-template-one-full {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.rr-template-two-stacked {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.rr-template-two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
}

.rr-template-three-top-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.rr-template-three-top-wide > :first-child {
    grid-column: 1 / -1;
}

.rr-template-three-bottom-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.rr-template-three-bottom-wide > :last-child {
    grid-column: 1 / -1;
}

.rr-template-three-stacked {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.rr-template-three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
}

.rr-template-four-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

body.rr-today-body {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: var(--rr-background-color);
}

.rr-today-screen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 12px;
    gap: 12px;
}

.rr-today-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    color: var(--rr-main-color);
    font-size: clamp(1.1rem, 3vw, 2rem);
    font-weight: 700;
}

.rr-today-header div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.rr-today-header img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.rr-today-views,
.rr-today-view {
    min-width: 0;
    min-height: 0;
}

.rr-today-views {
    width: 100vw;
    height: 100%;
}

.rr-today-view {
    width: 100%;
    height: 100%;
}

.rr-widget-placeholder {
    padding: 14px;
    color: var(--color-text-muted);
    font-size: clamp(1.4rem, 4vw, 3rem);
}

.rr-clock-widget {
    display: grid;
    place-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: clamp(12px, 3vw, 36px);
    overflow: hidden;
    background: var(--rr-clock-bg);
    color: var(--rr-clock-text);
    font-family: var(--rr-clock-font);
    font-weight: var(--rr-clock-weight);
}

.rr-clock-digital {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.18em;
    max-width: 100%;
    font-size: clamp(2rem, var(--rr-clock-size), 18vw);
    line-height: 1;
    text-align: center;
}

.rr-clock-suffix {
    font-size: 0.36em;
    line-height: 1;
}

.rr-clock-date {
    margin-top: 0.45em;
    font-size: clamp(1rem, calc(var(--rr-clock-size) * 0.32), 6vw);
    line-height: 1.2;
    text-align: center;
}

.rr-clock-analog {
    position: relative;
    container-type: inline-size;
    width: min(72vmin, 72%);
    max-width: 360px;
    aspect-ratio: 1;
    border: clamp(5px, 1vw, 10px) solid currentColor;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rr-clock-bg) 88%, var(--rr-clock-text));
}

.rr-clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 4px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: bottom center;
}

.rr-clock-number {
    position: absolute;
    display: grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    color: currentColor;
    font-size: clamp(0.8rem, 14cqw, 3.5rem);
    font-weight: var(--rr-clock-weight);
    line-height: 1;
    transform: translate(-50%, -50%);
}

.rr-clock-number-12 {
    left: 50%;
    top: 10%;
}

.rr-clock-number-1 {
    left: 70%;
    top: 15.4%;
}

.rr-clock-number-2 {
    left: 84.6%;
    top: 30%;
}

.rr-clock-number-3 {
    left: 90%;
    top: 50%;
}

.rr-clock-number-4 {
    left: 84.6%;
    top: 70%;
}

.rr-clock-number-5 {
    left: 70%;
    top: 84.6%;
}

.rr-clock-number-6 {
    left: 50%;
    top: 90%;
}

.rr-clock-number-7 {
    left: 30%;
    top: 84.6%;
}

.rr-clock-number-8 {
    left: 15.4%;
    top: 70%;
}

.rr-clock-number-9 {
    left: 10%;
    top: 50%;
}

.rr-clock-number-10 {
    left: 15.4%;
    top: 30%;
}

.rr-clock-number-11 {
    left: 30%;
    top: 15.4%;
}

.rr-clock-hour {
    height: 28%;
    width: 7px;
}

.rr-clock-minute {
    height: 38%;
    width: 5px;
}

.rr-clock-second {
    height: 42%;
    width: 2px;
    opacity: 0.75;
}

.rr-clock-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.rr-clock-mode-both {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(10px, 2vw, 20px);
}

.rr-clock-mode-both .rr-clock-analog {
    width: min(48vmin, 56%);
}

.rr-date-widget {
    display: grid;
    place-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: clamp(14px, 4vw, 48px);
    gap: clamp(14px, 3vw, 30px);
    overflow: hidden;
    background: var(--rr-date-bg);
    color: var(--rr-date-text);
    font-family: var(--rr-date-font);
    font-weight: var(--rr-date-weight);
}

.rr-date-value {
    display: grid;
    max-width: 100%;
    font-size: clamp(2rem, var(--rr-date-size), 15vw);
    line-height: 2;
    text-align: center;
    text-wrap: balance;
}

.rr-date-value span {
    display: block;
}

.rr-date-time {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.18em;
    max-width: 100%;
    font-size: clamp(1.3rem, calc(var(--rr-date-size) * 0.42), 6vw);
    line-height: 1;
    text-align: center;
}

.rr-date-suffix {
    font-size: 0.55em;
}

.rr-date-analog {
    width: min(30vmin, 180px);
}

.rr-date-time-both {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 3vw, 28px);
    max-width: 100%;
}

.rr-date-time-both .rr-date-time {
    font-size: clamp(1.2rem, calc(var(--rr-date-size) * 0.34), 5vw);
}

.rr-custom-widget {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: clamp(18px, 5vw, 64px);
    overflow: hidden;
    background:
        linear-gradient(115deg, rgb(255 250 238 / 0.86), rgb(246 218 198 / 0.56) 48%, rgb(209 226 207 / 0.48)),
        linear-gradient(180deg, rgb(255 255 255 / 0.42), rgb(112 68 41 / 0.1)),
        url("/system/images/rr-plan-warm-texture.png"),
        #F8E9D8;
    background-position: center;
    background-size: cover;
    color: var(--rr-custom-text);
    font-family: var(--rr-custom-font);
    text-align: center;
}

.rr-custom-widget::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 14%, rgb(255 255 255 / 0.38) 0 10%, transparent 32%),
        radial-gradient(circle at 84% 82%, rgb(255 244 224 / 0.28) 0 12%, transparent 34%),
        linear-gradient(90deg, rgb(255 255 255 / 0.14) 0 1px, transparent 1px),
        linear-gradient(0deg, rgb(122 74 44 / 0.07) 0 1px, transparent 1px);
    background-size: auto, auto, 3.8em 3.8em, 3.8em 3.8em;
    content: "";
    opacity: 0.44;
    pointer-events: none;
}

.rr-custom-widget::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0 55%, rgb(112 68 41 / 0.1));
    content: "";
    pointer-events: none;
}

.rr-custom-message {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.35em;
    max-width: min(18em, 100%);
    font-size: clamp(1.2rem, var(--rr-custom-size), 12vw);
    font-weight: var(--rr-custom-weight);
    line-height: 1.08;
    text-wrap: balance;
}

.rr-custom-message > *,
.rr-custom-message p,
.rr-custom-message div,
.rr-custom-message h1,
.rr-custom-message h2,
.rr-custom-message h3 {
    margin: 0;
}

.rr-custom-message h1,
.rr-custom-message h2,
.rr-custom-message h3 {
    color: currentColor;
    font: inherit;
    line-height: 1.02;
}

.rr-custom-message ul,
.rr-custom-message ol {
    display: inline-grid;
    gap: 0.22em;
    justify-self: center;
    padding-left: 1.2em;
    text-align: left;
}

.rr-custom-date {
    position: relative;
    z-index: 1;
    align-self: end;
    margin-top: 1em;
    padding: 0.35em 0.75em;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.42);
    backdrop-filter: blur(5px);
    font-size: clamp(1rem, calc(var(--rr-custom-size) * 0.28), 4vw);
    font-weight: 700;
    line-height: 1.2;
}

.rr-plan-widget {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgb(255 250 238 / 0.88), rgb(246 218 198 / 0.58) 48%, rgb(209 226 207 / 0.5)),
        linear-gradient(180deg, rgb(255 255 255 / 0.48), rgb(112 68 41 / 0.12)),
        url("/system/images/rr-plan-warm-texture.png"),
        #F8E9D8;
    background-position: center;
    background-size: cover;
    color: var(--rr-plan-text);
    font-family: var(--rr-plan-font);
    font-size: clamp(1rem, var(--rr-plan-size), 6vw);
    font-weight: var(--rr-plan-weight);
    text-align: left;
}

.rr-plan-widget::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(255 255 255 / 0.16) 0 1px, transparent 1px),
        linear-gradient(0deg, rgb(122 74 44 / 0.08) 0 1px, transparent 1px),
        radial-gradient(circle at 12% 8%, rgb(255 255 255 / 0.38) 0 10%, transparent 30%),
        linear-gradient(135deg, rgb(255 255 255 / 0.24), transparent 46%);
    background-size: 3.8em 3.8em, 3.8em 3.8em, auto, auto;
    content: "";
    opacity: 0.42;
    pointer-events: none;
}

.rr-plan-widget::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0 58%, color-mix(in srgb, currentColor 8%, transparent)),
        linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 14%, transparent)) left bottom / 100% 0.32em no-repeat;
    content: "";
    opacity: 0.58;
    pointer-events: none;
}

.rr-plan-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(14px, 3vw, 30px);
    border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    background: rgb(255 248 235 / 0.72);
    backdrop-filter: blur(8px) saturate(1.05);
    box-shadow: 0 0.35em 1.2em color-mix(in srgb, currentColor 9%, transparent);
}

.rr-plan-title-wrap {
    display: grid;
    gap: 0.16em;
}

.rr-plan-kicker,
.rr-plan-count {
    width: fit-content;
    border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.44);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rr-plan-kicker {
    padding: 0.22em 0.58em;
    font-size: 0.44em;
    font-weight: 800;
}

.rr-plan-count {
    margin-top: 0.2em;
    padding: 0.2em 0.56em;
    font-size: 0.48em;
    font-weight: 700;
    opacity: 0.82;
}

.rr-plan-header h2 {
    margin: 0;
    color: currentColor;
    font: inherit;
    font-size: 1.22em;
    line-height: 1.02;
}

.rr-plan-date {
    margin-top: 0.18em;
    font-size: 0.68em;
    line-height: 1.2;
    opacity: 0.86;
}

.rr-plan-time {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45em;
    padding: 0.42em 0.5em;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 0.8em;
    background: rgb(255 255 255 / 0.42);
    backdrop-filter: blur(5px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, currentColor 18%, transparent);
}

.rr-plan-current-time {
    white-space: nowrap;
    font-size: 0.78em;
    font-weight: 800;
}

.rr-plan-clock {
    position: relative;
    width: 2.4em;
    aspect-ratio: 1;
    border: 0.12em solid currentColor;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgb(255 248 235 / 0.72) 0 48%, transparent 49%),
        color-mix(in srgb, currentColor 10%, transparent);
    box-shadow: inset 0 0 0 0.16em color-mix(in srgb, var(--rr-plan-bg) 80%, transparent);
}

.rr-plan-hour,
.rr-plan-minute {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 0.09em;
    border-radius: 999px;
    background: currentColor;
    transform-origin: bottom center;
}

.rr-plan-hour {
    height: 27%;
}

.rr-plan-minute {
    height: 38%;
    width: 0.06em;
}

.rr-plan-clock-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.24em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.rr-plan-events {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding: clamp(12px, 2.2vw, 26px);
    overflow-y: auto;
}

.rr-plan-event {
    position: relative;
    display: grid;
    grid-template-columns: minmax(5.8em, auto) minmax(0, 1fr);
    gap: 0.78em;
    margin-bottom: 0.48em;
    padding: 0.58em 0.7em 0.58em 1em;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 0.72em;
    background: rgb(255 252 244 / 0.64);
    backdrop-filter: blur(6px) saturate(1.04);
    box-shadow: 0 0.28em 0.9em color-mix(in srgb, currentColor 8%, transparent);
}

.rr-plan-event::before {
    position: absolute;
    left: 0.42em;
    top: 0.72em;
    bottom: 0.72em;
    width: 0.2em;
    border-radius: 999px;
    background: currentColor;
    content: "";
    opacity: 0.62;
}

.rr-plan-event:last-child {
    margin-bottom: 0;
}

.rr-plan-event-time {
    align-self: start;
    padding: 0.22em 0.42em;
    border-radius: 0.5em;
    background: rgb(255 255 255 / 0.46);
    font-size: 0.72em;
    font-weight: 800;
    white-space: nowrap;
}

.rr-plan-event-details h3,
.rr-plan-event-details p,
.rr-plan-empty {
    margin: 0;
    color: currentColor;
    font: inherit;
}

.rr-plan-event-details h3 {
    font-weight: inherit;
    line-height: 1.12;
}

.rr-plan-event-details p {
    margin-top: 0.2em;
    font-size: 0.72em;
    font-weight: 400;
    line-height: 1.3;
}

.rr-plan-empty {
    display: grid;
    min-height: 100%;
    place-items: center;
    padding: 1em;
    border: 1px dashed color-mix(in srgb, currentColor 34%, transparent);
    border-radius: 0.9em;
    background: rgb(255 252 244 / 0.58);
    backdrop-filter: blur(6px);
    text-align: center;
}

.rr-today-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.rr-today-controls button {
    min-width: 140px;
    min-height: 56px;
    border: 0;
    border-radius: 8px;
    background: var(--rr-main-color);
    color: var(--color-surface);
    font-size: 1.2rem;
    font-weight: 700;
}