/* R24 Mobile Clarity | loaded after R21 to preserve existing themes and business logic.
   Native pickers remain accessible; the *closed* controls use ROMVI styling. */
.r21-board{--r24-control-border:rgba(118,177,211,.54);--r24-control-bg:#152b43;--r24-control-text:#f3f8ff;--r24-link:#9ce9f1}
html[data-theme="light"] .r21-board{--r24-control-border:#9eb8d2;--r24-control-bg:#fff;--r24-control-text:#19334d;--r24-link:#135f7b}
.r21-task-row{gap:9px;padding:11px 0}
.r21-task-main strong,.r21-agenda-row strong{font-size:14px;line-height:1.43;color:var(--r21-fg)}
.r21-task-main small,.r21-agenda-row small{font-size:12px;line-height:1.48}
.r21-task-tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;min-width:0}
.r21-task-tools>.r21-member{min-width:0;max-width:100%;width:100%;flex:auto}
.r21-member,.r21-date-input{box-sizing:border-box;min-width:0;min-height:44px!important;max-width:100%;border:1px solid var(--r24-control-border)!important;border-radius:12px!important;background-color:var(--r24-control-bg)!important;color:var(--r24-control-text)!important;color-scheme:dark;font:650 13px/1.4 Inter,system-ui,sans-serif!important}
html[data-theme="light"] .r21-member,html[data-theme="light"] .r21-date-input{color-scheme:light}
.r21-member{appearance:none;-webkit-appearance:none;padding:10px 34px 10px 12px!important;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2397bdd3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;cursor:pointer}
html[data-theme="light"] .r21-member{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23395e7c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.r21-task-tools .r21-small-btn{min-width:68px;min-height:44px;white-space:nowrap;font-size:12.5px;font-weight:800;padding:9px 12px;border-color:var(--r24-control-border);background-color:var(--r24-control-bg);color:var(--r24-control-text)}
.r21-task-tools .r21-small-btn:hover{border-color:var(--r24-link);filter:brightness(1.05)}
.r21-title-row h4,.r21-activity summary{font-size:14px;font-weight:800}
.r21-agenda-row{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:11px 0;align-items:baseline}
.r21-date{font-size:12px;font-weight:800;color:var(--r21-fg);white-space:nowrap}
.r21-more-btn{width:100%;text-align:center;min-height:44px;margin-top:9px;border:1px solid var(--r24-control-border);background:transparent;color:var(--r24-link);border-radius:11px;font-size:12px;font-weight:800;cursor:pointer}
.r21-more-btn:hover{background:rgba(40,135,165,.08)}
.r21-event-form{gap:12px}
.r21-field{display:grid;gap:7px;min-width:0;color:var(--r21-fg);font-size:12px;font-weight:800}
.r21-event-form .r21-input{box-sizing:border-box;width:100%;min-height:44px;border-color:var(--r24-control-border)!important;background-color:var(--r24-control-bg)!important;color:var(--r24-control-text)!important;font-size:13px}
.r21-date-input{padding:10px 12px!important}
.r21-date-input::-webkit-calendar-picker-indicator{opacity:.88;cursor:pointer}
.r21-activity{padding:11px 13px}
.r21-activity summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.r21-activity summary::-webkit-details-marker{display:none}
.r21-activity summary::after{content:'⌄';font-size:20px;font-weight:700;color:var(--r24-link);transition:transform .16s ease}
.r21-activity[open] summary::after{transform:rotate(180deg)}
.r21-activity[open] summary{padding-bottom:10px}
.r21-activity-row{font-size:12px}
/* Always give genuine actions a visible affordance, especially in light mode. */
#dashboard.r18-work-focused .r18-work-footer .r18-work-link{background:#176e89!important;border-color:#155d78!important;color:#fff!important;box-shadow:0 4px 12px rgba(0,74,110,.15)!important;font-size:13px;font-weight:800;min-height:44px}
#dashboard.r18-work-focused .r18-work-footer .r18-work-link:hover{background:#10586f!important}
html[data-theme="light"] #dashboard.r18-work-focused .r18-work-footer .r18-work-link{background:#126981!important;border-color:#12596e!important;color:#fff!important}
#familyHub .family-command-10 .romvi-mode-actions-10 button{border:1px solid #7daac2!important;background:#193750!important;color:#f5faff!important;font-weight:800!important;font-size:12px!important;min-height:44px!important}
html[data-theme="light"] #familyHub .family-command-10 .romvi-mode-actions-10 button{background:#eef6fd!important;border-color:#9cb6ce!important;color:#1a405b!important}
html[data-theme="light"] #familyHub .family-command-10 .romvi-mode-actions-10 button.primary{background:#d9edf5!important;border-color:#72b2c7!important;color:#174961!important}
#familyHub .family-command-10 .romvi-mode-actions-10 button:focus-visible,.r21-more-btn:focus-visible{outline:3px solid #2aa6bd;outline-offset:2px}
@media(max-width:760px){
 .r21-board{padding:12px;border-radius:16px}
 .r21-head{gap:9px}
 .r21-head p{font-size:12px;margin-bottom:11px}
 .r21-columns{gap:10px}
 .r21-panel{padding:12px}
 .r21-task-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
 .r21-task-tools>.r21-member{grid-column:1/-1}
 .r21-task-tools .r21-small-btn{width:100%;min-width:0}
 .r21-agenda-row{grid-template-columns:62px minmax(0,1fr)}
 .r20-summary-grid{margin:11px 0!important}
 .r20-family-board{margin-bottom:9px!important}
 .r20-header p{font-size:12px}
 .r20-actions{margin-bottom:11px}
 .r20-list-card{padding:12px}
 .r21-activity{margin-top:9px}
}
@media(max-width:350px){
 .r21-head h3{font-size:19px}
 .r21-date{font-size:11.5px}
 .r21-agenda-row{gap:8px}
 .r21-refresh{min-height:40px}
}
@media(prefers-reduced-motion:reduce){.r21-activity summary::after{transition:none}}
/* Theme sheets previously used the background shorthand on selects; override its
   implicit repeat/reset so the chevron is drawn just once in light theme. */
.r21-board .r21-member,html[data-theme="light"] .r21-board .r21-member{
 background-repeat:no-repeat!important;
 background-size:16px 16px!important;
 background-position:right 11px center!important;
}

/* The legacy Family page includes a very long set of panels (Child Safety,
   inventory, documents, notes). Keep those elements operational and reachable,
   but collapse secondary tools behind an explicit button on phones. */
.r24-tools-toggle{display:none;width:100%;min-height:44px;padding:10px 12px;margin-top:10px;
 border:1px solid var(--r24-control-border);border-radius:12px;background:var(--r24-control-bg);
 color:var(--r24-control-text);font:800 12px/1.45 Inter,system-ui,sans-serif;cursor:pointer}
.r24-tools-toggle:focus-visible{outline:3px solid #28acc5;outline-offset:2px}
@media(max-width:760px){
 #familyHub.r21-enhanced:not(.r24-tools-open)>.hub-card,
 #familyHub.r21-enhanced:not(.r24-tools-open)>.metric-row,
 #familyHub.r21-enhanced:not(.r24-tools-open)>.hub-head,
 #familyHub.r21-enhanced:not(.r24-tools-open)>.family-command-10{display:none!important}
 #familyHub.r21-enhanced>.r20-family-board{margin-top:0!important}
 #familyHub.r21-enhanced .r24-tools-toggle{display:block}
}