#homeScreen .dashboard-next-task { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; padding:22px; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:var(--lift); }
#homeScreen .dashboard-next-task > div { min-width:0; }
#homeScreen .dashboard-next-task h2, #homeScreen .dashboard-actions-title { font-size:20px; margin:0 0 10px; }
#homeScreen .dashboard-next-task p { margin:0 0 8px; font-size:16px; overflow-wrap:anywhere; }
#homeScreen .dashboard-next-task small { color:var(--muted); }
#homeScreen .dashboard-next-task .btn { flex:none; }
#homeScreen .dashboard-actions-title { margin-top:24px; }
#homeScreen .dashboard-metric:first-child strong, #homeScreen .dashboard-metric:nth-child(4) strong { font-size:24px; overflow-wrap:anywhere; }
#homeScreen #dashboardMetrics { margin-bottom:24px; }
@media (max-width:700px) {
  #homeScreen .dashboard-next-task { align-items:stretch; flex-direction:column; padding:18px; }
  #homeScreen .dashboard-metric-grid { grid-template-columns:minmax(0,1fr); }
  #homeScreen .dashboard-welcome { flex-wrap:wrap; }
  #homeScreen .dashboard-metric { min-width:0; overflow-wrap:anywhere; }
}
/* Everly desktop shell, Home and Appearance. Load after desktop-design.css.
   Keep all changes above the existing mobile/tablet breakpoint. */
@media (min-width: 901px) {
  #appShell > .top { gap: 24px; }
  #appShell > .top .profile-trigger { min-height: 44px; padding: 5px 10px 5px 5px; }
  #profileMenu .profile-menu-dropdown { width: min(328px, calc(100vw - 32px)); padding: 18px; gap: 16px; }
  #profileMenu .profile-workspace-name { gap: 8px; font-size: 14px; line-height: 1.5; }
  #profileMenu .workspace-name-edit { flex: none; min-width: 32px; min-height: 32px; }
  #profileMenu #workspaceName { min-width: 0; overflow-wrap: anywhere; }
  #profileMenu .workspace-name-block > .muted { font-size: 12px; line-height: 1.6; }
  #profileMenu .profile-menu-options > :is(.btn, select) { min-height: 42px; padding: 10px 12px; font-size: 13px; }
  #profileMenu .profile-menu-options .btn { white-space: normal; line-height: 1.5; }
  #appShell > #workspaceSaveStatus { font-size: 12px; line-height: 1.6; max-width: 100%; }

  #appShell .sidebar { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  #appShell .sidebar .sidebar-link { min-height: 42px; line-height: 1.5; }
  #appShell .sidebar.expanded .sidebar-link { justify-content: flex-start; gap: 8px; padding: 9px 10px; }
  #appShell .sidebar.expanded .sidebar-sub { padding-left: 18px; }
  #appShell .sidebar.expanded .sidebar-icon { flex: 0 0 28px; width: 28px; }
  #appShell .sidebar.expanded .sidebar-label { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
  #appShell .sidebar.expanded .sidebar-heading { padding: 9px 10px 6px; font-size: 10px; letter-spacing: .07em; white-space: normal; line-height: 1.5; }
  #appShell .sidebar .sidebar-link:focus-visible,
  #appShell .sidebar .sidebar-menu-toggle:focus-visible,
  #profileMenu :is(button, select, summary):focus-visible,
  #homeScreen .btn:focus-visible,
  #appearanceScreen button:focus-visible {
    outline: 3px solid var(--green); outline-offset: 3px;
  }

  #homeScreen > .head, #appearanceScreen > .head { align-items: flex-start; gap: 24px; margin-bottom: 24px; }
  #homeScreen > .head p, #appearanceScreen > .head p { font-size: 14px; line-height: 1.65; }
  #homeScreen #editHome { flex: none; margin-top: 8px; }
  #homeScreen .btn { min-height: 42px; padding: 10px 16px; font-size: 13px; line-height: 1.5; white-space: normal; }
  #homeScreen .dashboard-hero { min-height: 300px; padding: clamp(28px, 3vw, 42px); }
  #homeScreen .dashboard-hero-content { max-width: 850px; min-width: 0; }
  #homeScreen .dashboard-hero h1 { margin: 12px 0; font-size: clamp(38px, 4.5vw, 60px); line-height: 1.15; overflow-wrap: anywhere; }
  #homeScreen .dashboard-info { gap: 10px; margin-top: 18px; }
  #homeScreen .dashboard-info span { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  #homeScreen .dashboard-hero p, #homeScreen .dashboard-details p { font-size: 14px; line-height: 1.7; margin: 14px 0 0; overflow-wrap: anywhere; }
  #homeScreen .dashboard-info a { color: inherit; text-underline-offset: 3px; }
  #homeScreen .dashboard-cards { gap: 16px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
  #homeScreen .dashboard-cards:empty { display: none; }
  #homeScreen .dashboard-card { padding: 22px; min-width: 0; }
  #homeScreen .dashboard-card h3 { line-height: 1.4; overflow-wrap: anywhere; }
  #homeScreen .dashboard-card p { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
  #homeScreen #dashboardMetrics { margin-top: 22px; }
  #homeScreen .dashboard-welcome { min-height: 0; padding: 22px 26px; gap: 24px; border-radius: 18px; background: linear-gradient(120deg, var(--green), color-mix(in srgb, var(--green) 76%, var(--paper))); }
  #homeScreen .dashboard-welcome > div { min-width: 0; }
  #homeScreen .dashboard-welcome h1 { margin-top: 8px; font-size: clamp(25px, 2.5vw, 32px); line-height: 1.3; overflow-wrap: anywhere; }
  #homeScreen .dashboard-welcome p { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
  #homeScreen .dashboard-welcome :is(p, .eyebrow) { color: #fff; }
  #homeScreen .dashboard-metrics-heading { gap: 16px; margin: 26px 0 14px; flex-wrap: wrap; }
  #homeScreen .dashboard-metrics-heading > span { font-size: 12px; line-height: 1.5; }
  #homeScreen .dashboard-metric-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
  #homeScreen .dashboard-metric { align-content: start; grid-template-rows: minmax(36px, auto) auto auto; gap: 8px; padding: 20px; }
  #homeScreen .dashboard-metric > span { font-size: 13px; line-height: 1.5; color: var(--ink); }
  #homeScreen .dashboard-metric strong { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.2; }
  #homeScreen .dashboard-metric small { font-size: 12px; line-height: 1.6; }
  #homeScreen .dashboard-quick-actions { gap: 10px; margin-top: 18px; }

  #appearanceScreen > .panel { padding: 26px; margin-bottom: 22px; }
  #appearanceScreen > .panel h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.4; }
  #appearanceScreen > .panel > p { margin: 0 0 22px; font-size: 14px; line-height: 1.65; color: var(--muted); }
  #appearanceScreen #paletteChoices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  #appearanceScreen #styleChoices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #appearanceScreen .appearance-choice { min-width: 0; min-height: 96px; padding: 18px; gap: 14px; font: inherit; }
  #appearanceScreen .appearance-choice > span:last-child { min-width: 0; }
  #appearanceScreen .appearance-choice strong, #appearanceScreen .style-choice strong { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  #appearanceScreen .appearance-choice small { display: inline-block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--muted); }
  #appearanceScreen .color-dot { width: 42px; height: 42px; }
  #appearanceScreen .style-choice { min-width: 0; padding: 20px; min-height: 116px; font: inherit; }
  #appearanceScreen .style-choice p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
  #appearanceScreen :is(.appearance-choice, .style-choice):hover { border-color: var(--green); background: color-mix(in srgb, var(--sage) 30%, white); }
  #appearanceScreen :is(.appearance-choice, .style-choice)[aria-pressed="true"] { background: color-mix(in srgb, var(--sage) 55%, white); }
  #appearanceScreen .appearance-choice[aria-pressed="true"] { outline: 2px solid var(--green); outline-offset: 1px; }
  #appearanceScreen .style-choice[aria-pressed="true"] { outline: 2px solid var(--green); outline-offset: 1px; }
  #appearanceScreen :is(.appearance-choice, .style-choice)[aria-pressed="true"] strong::after { content: ' ✓'; }

  /* The Home editor lives outside appShell; identify it by its own card editor. */
  dialog.enh-modal:has(#homeCardEditor) { width: min(760px, calc(100vw - 48px)); overflow: hidden; }
  dialog.enh-modal:has(#homeCardEditor) .enh-modal-inner { padding: 28px; max-height: calc(90vh - 2px); overflow: auto; }
  dialog.enh-modal:has(#homeCardEditor) form { gap: 16px; }
  dialog.enh-modal:has(#homeCardEditor) label { font-size: 13px; line-height: 1.5; color: var(--ink); }
  dialog.enh-modal:has(#homeCardEditor) :is(input, textarea) { min-width: 0; font: 14px/1.5 var(--everly-font-body, 'DM Sans', sans-serif); padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
  dialog.enh-modal:has(#homeCardEditor) textarea { min-height: 88px; resize: vertical; }
  dialog.enh-modal:has(#homeCardEditor) label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; }
  dialog.enh-modal:has(#homeCardEditor) input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; padding: 0; flex: none; accent-color: var(--green); }
  dialog.enh-modal:has(#homeCardEditor) .btn { min-height: 42px; font-size: 13px; line-height: 1.5; }
  dialog.enh-modal:has(#homeCardEditor) .modal-actions { position: static; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); background: white; }
  dialog.enh-modal:has(#homeCardEditor) :is(input, textarea, button):focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  #appearanceScreen #paletteChoices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  #appShell .sidebar, #appShell .sidebar :is(.sidebar-label, .sidebar-heading, .sidebar-brand b),
  #homeScreen .btn, #profileMenu .btn { transition: none; }
  #homeScreen .btn:hover, #profileMenu .btn:hover { transform: none; }
}