/*
 * Kinstead Design System — Patch 108
 * A calm, content-first presentation layer. This file intentionally loads
 * after feature styles so legacy screens share one final component contract.
 */
:root {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-display: clamp(2rem, 4vw, 3rem);
  --text-title: clamp(1.55rem, 2.4vw, 2rem);
  --text-heading: 1.125rem;
  --text-body: .9375rem;
  --text-meta: .8125rem;
  --weight-regular: 450;
  --weight-medium: 620;
  --weight-bold: 760;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --surface-canvas: #f8f7f4;
  --surface-raised: rgba(255, 255, 255, .94);
  --surface-subtle: color-mix(in srgb, var(--theme-pale) 24%, #fff);
  --border-subtle: color-mix(in srgb, var(--theme-dark) 11%, #e9e6ed);
  --border-strong: color-mix(in srgb, var(--theme-dark) 23%, #ded9e5);
  --text-primary: #24212a;
  --text-secondary: #68636f;
  --text-tertiary: #817b87;
  --focus-ring: color-mix(in srgb, var(--theme-mid) 27%, transparent);
  --shadow-card: 0 1px 2px rgba(34, 28, 42, .025), 0 8px 28px rgba(34, 28, 42, .045);
  --shadow-float: 0 20px 60px rgba(34, 28, 42, .16);
  --radius-control: .75rem;
  --radius-card: 1.125rem;
  --radius-modal: 1.5rem;
  --content-width: 72rem;
}

html { background: var(--surface-canvas); }
body {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.55;
  background:
    radial-gradient(circle at 90% -10%, color-mix(in srgb, var(--theme-pale) 45%, transparent) 0, transparent 28rem),
    var(--surface-canvas);
}

:where(h1, h2, h3, p) { text-wrap: pretty; }
h1 { font-size: var(--text-display); letter-spacing: -.04em; line-height: 1.05; }
h2 { font-size: var(--text-title); letter-spacing: -.025em; line-height: 1.15; }
h3 { font-size: var(--text-heading); letter-spacing: -.012em; line-height: 1.25; }
:where(h1, h2, h3, strong, b) { color: var(--text-primary); }
.muted, .permission-note, .security-note, small { color: var(--text-secondary) !important; }
.eyebrow {
  color: var(--theme-dark);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.2;
}

/* Page frame and navigation */
html body :is(.topbar, main) { width: min(var(--content-width), calc(100% - 2rem)); }
.topbar {
  align-items: center;
  padding-block: var(--space-6) var(--space-4);
}
.topbar h1 { margin-top: var(--space-1); }
.sync-status-cluster { justify-items: start; }
.date-chip, .save-status, .connection-status-badge {
  border-color: var(--border-subtle);
  background: rgba(255,255,255,.72);
  box-shadow: none;
}
.app-primary-navigation {
  position: sticky;
  top: var(--space-2);
  z-index: 35;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  background: rgba(248,247,244,.88);
  box-shadow: 0 8px 28px rgba(34,28,42,.055);
  backdrop-filter: blur(18px) saturate(130%);
}
.section-menu-button {
  width: min(19rem, 100%);
  justify-content: space-between;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.section-menu-button:hover { background: var(--surface-subtle) !important; }
.section-menu, .app-dropdown-menu, .profile-menu {
  border-color: var(--border-subtle) !important;
  border-radius: 1rem !important;
  box-shadow: var(--shadow-float) !important;
}

/* Page titles use space instead of extra decoration. */
.view { padding-block: var(--space-5) var(--space-8) !important; }
.view > .section-heading {
  align-items: center;
  margin: 0 0 var(--space-5) !important;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.section-heading h2 { margin: var(--space-1) 0 0; }
.section-heading .muted { max-width: 42rem; margin: var(--space-2) 0 0; }
.section-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Quiet, reusable surfaces */
html body :is(.hero-card, .panel, .countdown-card, .profile-card, .signin-card, .adaptive-settings-panel) {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface-raised) !important;
  box-shadow: var(--shadow-card) !important;
}
html body :is(.panel, .countdown-card, .profile-card) { padding: var(--space-5) !important; }
html body :is(.panel, .countdown-card, .profile-card):hover {
  transform: none !important;
  box-shadow: var(--shadow-card) !important;
}
.hero-card {
  grid-template-columns: minmax(13rem, .72fr) minmax(18rem, 1.28fr);
  gap: var(--space-5);
  padding: var(--space-6) !important;
}
.quick-ai-notice {
  grid-column: 2;
  margin: calc(var(--space-4) * -1) 0 0;
  max-width: 48rem;
}
.quick-result { background: var(--surface-subtle); }
.dashboard-priority { grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr); }
.priority-panel { min-height: 15rem; }
.priority-count {
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: .65rem;
  border: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
  font-size: .9rem;
}
.stats { gap: var(--space-3); }
.stat {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle) !important;
  border-radius: .875rem;
}
.stat strong { font-size: 1.35rem; }
.stat span { color: var(--text-secondary); font-size: var(--text-meta); }

/* Buttons and fields */
html body button:not(.ui-icon-button):not(.menu-item):not(.tab),
html body .file-button {
  min-height: 2.75rem;
  padding: .65rem .95rem;
  border-radius: var(--radius-control) !important;
  font-size: .875rem;
  font-weight: var(--weight-bold);
  box-shadow: none !important;
}
html body button.secondary, html body .file-button.secondary {
  border: 1px solid var(--border-strong) !important;
  background: rgba(255,255,255,.8) !important;
  color: var(--text-primary) !important;
}
html body button.secondary:hover, html body .file-button.secondary:hover {
  background: var(--surface-subtle) !important;
  border-color: var(--theme-mid) !important;
}
html body .ui-icon-button {
  border-color: var(--border-strong) !important;
  background: rgba(255,255,255,.82) !important;
}
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  min-height: 3rem;
  padding: .72rem .85rem;
  border-color: var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-primary);
}
html body textarea { min-height: 6.5rem; resize: vertical; }
label { margin-top: var(--space-4); font-size: .875rem; font-weight: var(--weight-medium); }
:focus-visible { outline: 3px solid var(--focus-ring) !important; outline-offset: 2px !important; }

/* Lists: content is primary; controls recede until needed. */
.task-card, .template-card, .logbook-entry-row {
  border-color: var(--border-subtle) !important;
}
.task-card {
  position: relative;
  padding: var(--space-4) !important;
  border-radius: .875rem !important;
  background: color-mix(in srgb, var(--surface-subtle) 60%, #fff) !important;
}
.task-title { font-weight: var(--weight-bold); }
.task-meta { color: var(--text-secondary); font-size: var(--text-meta); }
.item-actions { margin-top: var(--space-2); }
@media (hover:hover) and (pointer:fine) {
  .task-card .item-actions,
  .countdown-card .countdown-actions,
  .profile-card .family-profile-actions,
  .journal-card .journal-card-actions {
    opacity: .28;
    transition: opacity .16s ease;
  }
  :is(.task-card,.countdown-card,.profile-card,.journal-card):is(:hover,:focus-within) :is(.item-actions,.countdown-actions,.family-profile-actions,.journal-card-actions) {
    opacity: 1;
  }
}

/* Filters are a compact utility row, not another card. */
.area-sort-filter, .journal-library-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 14rem));
  justify-content: end;
  gap: var(--space-2) !important;
  margin: calc(var(--space-3) * -1) 0 var(--space-5);
}
.journal-library-tools { grid-template-columns: minmax(16rem, 1fr) auto auto; align-items: end; }
.journal-library-tools label { margin: 0; }

/* Dialogs share one visual and spacing model. */
html body dialog {
  max-height: min(50rem, calc(100dvh - 2rem));
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-modal) !important;
  background: #fff;
  box-shadow: var(--shadow-float) !important;
}
html body dialog::backdrop { background: rgba(28,24,34,.42); backdrop-filter: blur(6px); }
:is(.app-popup-header,.modal-head,.dialog-header) {
  min-height: 4.5rem;
  padding: var(--space-5) var(--space-5) var(--space-4) !important;
  border-bottom: 1px solid var(--border-subtle);
}
:is(.app-popup-body,#modalFields) { padding: var(--space-5) !important; }
:is(.app-popup-footer,.modal-actions) {
  padding: var(--space-4) var(--space-5) var(--space-5) !important;
  border-top: 1px solid var(--border-subtle);
}

/* Settings is intentionally a focused, single-section workspace. */
.settings-section-switcher { max-width: 25rem; }
.notification-settings-card {
  border-color: var(--border-subtle) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
}
.notification-option {
  padding-block: var(--space-4) !important;
  border-color: var(--border-subtle) !important;
}
.notification-option small { margin-top: var(--space-1); line-height: 1.45; }

/* Authentication is deliberately spare and reassuring. */
.signin-screen { background: var(--surface-canvas); }
.signin-card { width: min(34rem, 100%); padding: clamp(1.5rem, 5vw, 2.5rem) !important; }
.signin-card h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
.auth-tabs { padding: var(--space-1); border-radius: .875rem; background: var(--surface-subtle); }
.auth-tab { border-color: transparent !important; }

/* Responsive simplification */
@media (max-width: 800px) {
  .hero-card, .dashboard-priority { grid-template-columns: 1fr; }
  .quick-ai-notice { grid-column: 1; margin-top: 0; }
  .app-primary-navigation { top: var(--space-1); }
  .area-sort-filter { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .journal-library-tools { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  html body :is(.topbar, main) { width: min(100% - 1rem, var(--content-width)); }
  .topbar { align-items: flex-start; gap: var(--space-3); padding-top: var(--space-4); }
  .topbar > div:first-child { max-width: 100%; }
  .sync-status-cluster { display: none; }
  .date-chip { display: none; }
  .app-primary-navigation { border-radius: .875rem; }
  .view { padding-bottom: var(--space-7) !important; }
  .view > .section-heading { align-items: flex-start; }
  .section-heading > div:first-child { min-width: 0; }
  .section-heading h2 { font-size: 1.5rem; }
  .hero-card { padding: var(--space-5) !important; }
  html body :is(.panel,.countdown-card,.profile-card) { padding: var(--space-4) !important; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .area-sort-filter { grid-template-columns: 1fr; }
  :is(.app-popup-header,.modal-head,.dialog-header) { padding: var(--space-4) !important; }
  :is(.app-popup-body,#modalFields) { padding: var(--space-4) !important; }
  :is(.app-popup-footer,.modal-actions) { padding: var(--space-3) var(--space-4) var(--space-4) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (forced-colors: active) {
  .app-primary-navigation, .hero-card, .panel, .countdown-card, .profile-card, dialog { border: 1px solid CanvasText !important; }
}

/* Patch 114 — minimalist polish and universal icon controls. */
:root {
  --surface-canvas: #faf8f3;
  --surface-raised: rgba(255, 255, 255, .9);
  --surface-subtle: color-mix(in srgb, var(--theme-pale) 18%, #fff);
  --border-subtle: color-mix(in srgb, var(--theme-dark) 8%, #ebe7df);
  --border-strong: color-mix(in srgb, var(--theme-dark) 17%, #e1ddd5);
  --shadow-card: 0 1px 2px rgba(38, 30, 28, .018), 0 7px 24px rgba(38, 30, 28, .035);
  --content-gap: clamp(1rem, 2.2vw, 1.5rem);
}

body {
  letter-spacing: -.004em;
  background:
    radial-gradient(circle at 92% -8%, color-mix(in srgb, var(--theme-pale) 38%, transparent) 0, transparent 31rem),
    var(--surface-canvas);
}

:where(h1,h2,h3) { margin-block-start: 0; }
:where(p,ul,ol) { margin-block: .55em 0; }
.view > .section-heading {
  gap: var(--space-4);
  margin-bottom: var(--space-6) !important;
  padding-bottom: 0;
  border-bottom: 0;
}
.view > :is(.panel,.grid,.countdown-grid,.profile-grid,.journal-library,.routine-grid) + :is(.panel,.grid,.countdown-grid,.profile-grid,.journal-library,.routine-grid) {
  margin-top: var(--content-gap);
}
.section-heading h2 { max-width: 24ch; }
.section-heading .muted { line-height: 1.52; }

html body :is(.hero-card,.panel,.countdown-card,.profile-card,.signin-card,.adaptive-settings-panel) {
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-card) !important;
}
html body :is(.panel,.countdown-card,.profile-card) :is(.panel,.task-card,.notification-list-card) {
  border-color: transparent !important;
  box-shadow: none !important;
}
.task-card + .task-card,
.logbook-entry-row + .logbook-entry-row,
.notification-option + .notification-option {
  border-top-color: var(--border-subtle) !important;
}
.task-title,.profile-card h3,.countdown-card h3 { letter-spacing: -.012em; }
.task-meta,.permission-note,.security-note { max-width: 68ch; }

html body button:not(.ui-icon-button):not(.menu-item):not(.tab),
html body .file-button {
  min-height: 44px;
  padding-inline: 1rem;
  border-width: 1px !important;
  box-shadow: none !important;
  letter-spacing: 0;
}
html body button.secondary,
html body .file-button.secondary {
  border-color: var(--border-subtle) !important;
  background: rgba(255,255,255,.68) !important;
}
html body button.secondary:hover,
html body .file-button.secondary:hover {
  border-color: var(--border-strong) !important;
  background: var(--surface-subtle) !important;
}

/* One component owns Settings, Close, Favorite, Expand, Collapse, More, and Help. */
html body :is(button,summary).ui-icon-button,
html body :is(button,summary)[data-ui-icon] {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}
html body :is(button,summary).ui-icon-button:hover,
html body :is(button,summary)[data-ui-icon]:hover {
  border-color: var(--border-strong) !important;
  background: color-mix(in srgb, var(--theme-pale) 30%, #fff) !important;
}
.ui-icon {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.ui-icon .ui-icon-fill { fill: currentColor; stroke: none; }
.ui-icon-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--theme-dark) 22%, var(--border-subtle)) !important;
  background: color-mix(in srgb, var(--theme-pale) 58%, #fff) !important;
  color: var(--theme-dark) !important;
}
.ui-icon-button:focus-visible { outline-offset: 3px !important; }

/* Empty space now explains what belongs here without adding another heavy card. */
.empty-state {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 8rem;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  border: 0 !important;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface-subtle) 68%, transparent) !important;
  box-shadow: none !important;
  color: var(--text-secondary);
  text-align: left;
}
.empty-state-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  color: color-mix(in srgb, var(--theme-dark) 78%, var(--text-secondary));
}
.empty-state-icon svg { width: 23px; height: 23px; }
.empty-state-copy { min-width: 0; }
.empty-state-copy strong { display: block; font-size: 1rem; line-height: 1.3; }
.empty-state-copy p { max-width: 48ch; margin-top: .3rem; line-height: 1.5; }
.empty-state-action { grid-column: 2; margin-top: var(--space-1); }
.empty-state-compact {
  min-height: 5.5rem;
  padding: var(--space-4) !important;
  border-radius: .875rem;
}
.empty-state-compact .empty-state-icon { width: 38px; height: 38px; border-radius: 12px; }
.empty:not(.empty-state) {
  padding: var(--space-5);
  border-radius: .875rem;
  background: color-mix(in srgb, var(--surface-subtle) 52%, transparent);
}

@media (max-width: 600px) {
  .view > .section-heading { margin-bottom: var(--space-5) !important; }
  .empty-state { grid-template-columns: 38px minmax(0,1fr); min-height: 6.5rem; padding: var(--space-4) !important; }
  .empty-state-icon { width: 38px; height: 38px; border-radius: 12px; }
}
@media (forced-colors: active) {
  html body :is(button,summary).ui-icon-button,
  html body :is(button,summary)[data-ui-icon],
  .empty-state { border: 1px solid ButtonText !important; }
}

/* Patch 115 — shared overlay layer and dashboard refinement. */
:root {
  --z-content: 1;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-toast: 1200;
  --z-dialog: 2000;
  --z-startup: 3000;
  --shadow-menu: 0 22px 60px rgba(33, 27, 42, .18), 0 4px 14px rgba(33, 27, 42, .08);
}

.app-primary-navigation { z-index: var(--z-sticky) !important; }
.adaptive-celebration-toast { z-index: var(--z-toast) !important; }
html body dialog { z-index: var(--z-dialog) !important; }
.kinstead-startup-overlay { z-index: var(--z-startup) !important; }

/* Menus are portaled to body, so cards and scrollers can no longer clip them. */
.app-overlay-portal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}
.app-overlay-portal > [data-overlay-panel] {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  box-sizing: border-box;
  max-width: calc(100vw - 20px) !important;
  max-height: min(34rem, calc(100dvh - 20px)) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 1rem !important;
  background: rgba(255,255,255,.985) !important;
  box-shadow: var(--shadow-menu) !important;
  pointer-events: auto;
  isolation: isolate;
}
.app-overlay-portal > #sectionMenu { width: min(20rem, calc(100vw - 20px)) !important; padding: .5rem !important; }
.app-overlay-portal > #profileMenu { width: min(18rem, calc(100vw - 20px)) !important; padding: .5rem !important; }
.app-overlay-portal > .compact-action-menu-panel { width: min(16rem, calc(100vw - 20px)) !important; padding: .5rem !important; gap: .125rem; }

.app-dropdown-menu .menu-group { display: grid; gap: .125rem; min-width: 0; padding: .25rem; }
.app-dropdown-menu .menu-group + .menu-group { margin-top: .25rem; padding-top: .625rem; border-top: 1px solid var(--border-subtle); }
.app-dropdown-menu .menu-group-label {
  padding: .25rem .625rem .375rem;
  color: var(--text-tertiary);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}
html body .app-dropdown-menu .menu-group > :is(.menu-item,.tab) {
  position: relative;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: .65rem .75rem !important;
  border: 0 !important;
  border-radius: .625rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  text-align: left !important;
  font-size: .875rem;
  font-weight: var(--weight-medium) !important;
}
html body .app-dropdown-menu .menu-group > :is(.menu-item,.tab):hover { background: var(--surface-subtle) !important; color: var(--theme-dark) !important; }
html body .app-dropdown-menu .menu-group > :is(.menu-item,.tab):is(.active,[aria-current="page"]),
html body .compact-action-menu-panel > :is(button,a,label):is(.active,[aria-pressed="true"],[aria-current="page"]) {
  background: color-mix(in srgb, var(--theme-pale) 54%, #fff) !important;
  color: var(--theme-dark) !important;
  font-weight: var(--weight-bold) !important;
  box-shadow: inset 3px 0 var(--theme-mid) !important;
}
html body .app-dropdown-menu .danger-menu-item { color: var(--danger) !important; }
html body .app-dropdown-menu .danger-menu-item:hover { background: #fff0f3 !important; color: var(--danger) !important; }
.section-menu-button[aria-expanded="true"],.profile-menu-button[aria-expanded="true"],.compact-action-menu[open] > summary {
  background: color-mix(in srgb, var(--theme-pale) 38%, #fff) !important;
}

/* The Dashboard reads as one organized workspace rather than unrelated boxes. */
#today { --dashboard-gap: clamp(1rem, 2vw, 1.35rem); }
#today > .section-heading { margin-bottom: var(--dashboard-gap) !important; }
#today > :is(.encouragement-card,.adaptive-focus-grid,.dashboard-priority,.dashboard-routines-panel,.overdue-panel,.stats,.dashboard-family-actions) {
  margin-top: 0 !important;
  margin-bottom: var(--dashboard-gap) !important;
}
#today > :is(.stats,.dashboard-family-actions):last-child { margin-bottom: 0 !important; }
.dashboard-priority {
  grid-template-columns: minmax(0,1.15fr) minmax(18rem,.85fr);
  align-items: stretch;
  gap: var(--dashboard-gap) !important;
}
html body #today :is(.priority-panel,.dashboard-routines-panel,.overdue-panel,.dashboard-action-card) {
  min-width: 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) !important;
  border-color: var(--border-subtle) !important;
  border-radius: var(--radius-card) !important;
  background: rgba(255,255,255,.92) !important;
}
.dashboard-priority > .priority-panel { min-height: 17rem; }
#today .priority-heading { align-items: flex-start; margin-bottom: var(--space-4); }
#today .priority-heading h3 { margin-top: .2rem; font-size: 1.2rem; }
#today .priority-count {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-pale) 50%, #fff);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  color: var(--theme-dark);
  font-weight: 800;
}
#today :is(.task-card,.dashboard-routine-card) { border-radius: .75rem !important; }
#today .stats { gap: .625rem !important; }
#today .stat { min-height: 5.5rem; padding: .9rem 1rem !important; background: color-mix(in srgb,var(--surface-subtle) 48%,#fff) !important; }
#today .stat strong { font-size: 1.25rem; }
.dashboard-family-actions { gap: var(--dashboard-gap) !important; }

/* One clear primary action, with settings and page help as quiet utilities. */
#today > .section-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; }
#today > .section-heading .adaptive-dashboard-actions { align-self: center; }
html body #today .dashboard-add-task { min-width: 7.5rem; }
html body #today .dashboard-settings-button { border-color: transparent !important; background: var(--surface-subtle) !important; }
.section-title-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.section-title-row > :is(h2,h3) { min-width: 0; margin: 0; }
html body .section-title-row > .page-more-info-button {
  position: static !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
}

/* Dashboard customization is organized by mode and purpose. */
html body dialog.dashboard-customize-dialog { width: min(44rem, calc(100vw - 24px)) !important; max-width: 44rem !important; }
.dashboard-customize-header { min-height: 4.75rem; }
.dashboard-customize-body { gap: 1.5rem !important; }
.dashboard-customize-intro { max-width: 58ch; margin: 0 !important; }
.dashboard-mode-shortcuts {
  gap: 1rem !important;
  padding: 1rem !important;
  border: 0 !important;
  border-radius: .875rem !important;
  background: var(--surface-subtle) !important;
}
.dashboard-mode-actions { gap: .625rem !important; }
html body .dashboard-mode-actions button { justify-content: flex-start !important; min-height: 48px; }
.dashboard-sections-picker > div:first-child > p { margin-top: .25rem !important; }
.dashboard-widget-choices { display: grid; gap: 1rem !important; }
.dashboard-widget-group { display: grid; gap: .375rem !important; }
.dashboard-widget-group h4 {
  margin: 0;
  color: var(--text-tertiary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.dashboard-widget-group > div { display: grid; border-radius: .875rem; background: color-mix(in srgb,var(--surface-subtle) 55%,#fff); overflow: hidden; }
.dashboard-widget-option {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  margin: 0;
  padding: .8rem 1rem;
  cursor: pointer;
}
.dashboard-widget-option + .dashboard-widget-option { border-top: 1px solid var(--border-subtle); }
.dashboard-widget-option span { min-width: 0; }
.dashboard-widget-option strong,.dashboard-widget-option small { display: block; }
.dashboard-widget-option small { margin-top: .15rem; line-height: 1.4; }
.dashboard-widget-option input { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--theme-dark); }
.dashboard-customize-dialog .app-popup-footer { align-items: center; justify-content: space-between; background: rgba(255,255,255,.96); }

/* More Info now sits beside each title and opens a calm, scannable summary. */
html body dialog.page-help-dialog,html body dialog.page-help-dialog[open] { width: min(38rem,calc(100vw - 24px)) !important; border-radius: var(--radius-modal) !important; }
html body dialog.page-help-dialog > .page-help-shell { padding: 1.5rem !important; border-radius: var(--radius-modal) !important; box-shadow: var(--shadow-float) !important; }
.page-help-heading { align-items: center !important; gap: 1rem !important; margin-bottom: 1rem !important; }
html body .page-help-heading .ui-icon-button { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 12px !important; }
html body .page-help-intro { margin: 0 0 1.25rem !important; font-size: .95rem; }
html body .page-help-grid { display: grid; grid-template-columns: 1fr !important; gap: .5rem !important; }
html body .page-help-item { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .75rem; padding: .75rem !important; border: 0 !important; border-radius: .75rem !important; background: var(--surface-subtle) !important; box-shadow: none !important; }
.page-help-item-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .625rem; background: rgba(255,255,255,.82); color: var(--theme-dark); font-weight: 900; }
.page-help-item strong,.page-help-item small { display: block; }
.page-help-item small { margin-top: .15rem; line-height: 1.45; }

@media (max-width: 800px) {
  .dashboard-priority { grid-template-columns: 1fr; }
  .dashboard-priority > .priority-panel { min-height: 0; }
}
@media (max-width: 620px) {
  .app-overlay-portal > .compact-action-menu-panel[data-overlay-mobile-sheet] {
    left: max(10px,env(safe-area-inset-left)) !important;
    right: max(10px,env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: max(10px,env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70dvh,32rem) !important;
    padding: .625rem !important;
    border-radius: 1rem !important;
  }
  #today > .section-heading { grid-template-columns: 1fr !important; }
  #today > .section-heading > div:first-child { text-align: left !important; }
  #today > .section-heading > .adaptive-dashboard-actions { justify-self: start !important; }
  .section-title-row { justify-content: flex-start; }
  .dashboard-customize-dialog .app-popup-footer { gap: .625rem; }
  .dashboard-customize-dialog .app-popup-footer button { flex: 1 1 auto; }
  .dashboard-widget-option { min-height: 4.25rem; padding: .75rem .875rem; }
}
@media (forced-colors: active) {
  .app-overlay-portal > [data-overlay-panel],.dashboard-widget-group > div,.page-help-item { border: 1px solid CanvasText !important; }
}

/* Patch 121 — open, centered small controls without cramped outlines. */
html body :is(button,summary).ui-icon-button {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-color: transparent !important;
  background-clip: padding-box !important;
}
html body #journals :is(button,summary).ui-icon-button { border-color: transparent !important; }
html body :is(button,summary).ui-icon-button > :is(.ui-icon,svg,span) {
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
}

/* Patch 126 - one quiet, borderless language for icon and close controls. */
:root { --ui-icon-green: #0f6b3a; }

html body :is(button,summary).ui-icon-button,
html body :is(button,summary)[data-ui-icon],
html body button.icon-button,
html body button.kinstead-picker-close,
html body button[data-picker-close] {
  appearance: none !important;
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  outline-offset: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ui-icon-green) !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer;
  transition: background-color .14s ease, transform .14s ease, opacity .14s ease !important;
}

html body :is(button,summary).ui-icon-button > :is(.ui-icon,svg,span),
html body :is(button,summary)[data-ui-icon] > :is(.ui-icon,svg,span),
html body button.icon-button > :is(.ui-icon,svg,span),
html body button.kinstead-picker-close > :is(.ui-icon,svg,span),
html body button[data-picker-close] > :is(.ui-icon,svg,span) {
  display: block !important;
  margin: auto !important;
  align-self: center !important;
  justify-self: center !important;
}

html body :is(button,summary).ui-icon-button:active,
html body :is(button,summary)[data-ui-icon]:active,
html body button.icon-button:active,
html body button.kinstead-picker-close:active,
html body button[data-picker-close]:active,
html body :is(button,summary).ui-icon-button[aria-pressed="true"],
html body :is(button,summary)[data-ui-icon][aria-pressed="true"] {
  border: 0 !important;
  background: rgba(15,107,58,.12) !important;
  box-shadow: none !important;
  transform: scale(.96) !important;
}

html body :is(button,summary).ui-icon-button:disabled,
html body :is(button,summary)[data-ui-icon]:disabled,
html body button.icon-button:disabled,
html body button.kinstead-picker-close:disabled,
html body button[data-picker-close]:disabled {
  opacity: .36 !important;
  background: transparent !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* Close controls remain a large target, but visually render only the green X. */
html body :is(.app-popup-close,.logbook-close,.family-profile-chooser-close,.kinstead-picker-close,[data-picker-close],[data-layer-panel-close]).ui-icon-button,
html body :is(button.kinstead-picker-close,button[data-picker-close]) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ui-icon-green) !important;
  font-size: 1.55rem !important;
}

@media (hover:hover) and (pointer:fine) {
  html body :is(button,summary).ui-icon-button:hover:not(:disabled),
  html body :is(button,summary)[data-ui-icon]:hover:not(:disabled),
  html body button.icon-button:hover:not(:disabled),
  html body button.kinstead-picker-close:hover:not(:disabled),
  html body button[data-picker-close]:hover:not(:disabled) {
    border: 0 !important;
    background: rgba(15,107,58,.06) !important;
    box-shadow: none !important;
    color: var(--ui-icon-green) !important;
    transform: none !important;
  }
}

@media (max-width:1024px), (pointer:coarse) {
  html body :is(button,summary).ui-icon-button,
  html body :is(button,summary)[data-ui-icon],
  html body button.icon-button,
  html body button.kinstead-picker-close,
  html body button[data-picker-close] {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

/* Patch 126c - absolute final authority over historical ID-based button rules. */
html body :is(button,summary).ui-icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c),
html body :is(button,summary)[data-ui-icon]:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c),
html body button.icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c),
html body button.kinstead-picker-close:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c),
html body button[data-picker-close]:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c) {
  appearance: none !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 solid transparent !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--ui-icon-green) !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
}

html body :is(button,summary).ui-icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c) > :is(.ui-icon,svg,span),
html body :is(button,summary)[data-ui-icon]:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c) > :is(.ui-icon,svg,span),
html body button.icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c) > :is(.ui-icon,svg,span) {
  position: static !important;
  inset: auto !important;
  display: block !important;
  margin: auto !important;
  align-self: center !important;
  justify-self: center !important;
  transform: none !important;
}

html body :is(button,summary).ui-icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):is(:active,[aria-pressed="true"],[aria-expanded="true"]),
html body :is(button,summary)[data-ui-icon]:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):is(:active,[aria-pressed="true"],[aria-expanded="true"]) {
  border: 0 solid transparent !important;
  background: rgba(15,107,58,.12) !important;
  box-shadow: none !important;
  transform: scale(.96) !important;
}

html body :is(button,summary).ui-icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):disabled,
html body :is(button,summary)[data-ui-icon]:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):disabled,
html body button.icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):disabled {
  border: 0 solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .36 !important;
  transform: none !important;
}

@media (hover:hover) and (pointer:fine) {
  html body :is(button,summary).ui-icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):hover:not(:disabled),
  html body :is(button,summary)[data-ui-icon]:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):hover:not(:disabled),
  html body button.icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):hover:not(:disabled),
  html body button.kinstead-picker-close:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):hover:not(:disabled),
  html body button[data-picker-close]:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c):hover:not(:disabled) {
    border: 0 solid transparent !important;
    background: rgba(15,107,58,.06) !important;
    box-shadow: none !important;
    color: var(--ui-icon-green) !important;
    transform: none !important;
  }
}

@media (max-width:1024px), (pointer:coarse) {
  html body :is(button,summary).ui-icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c),
  html body :is(button,summary)[data-ui-icon]:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c),
  html body button.icon-button:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c),
  html body button.kinstead-picker-close:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c),
  html body button[data-picker-close]:not(#kinstead-icon-a):not(#kinstead-icon-b):not(#kinstead-icon-c) {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html body :is(button,summary).ui-icon-button,
  html body :is(button,summary)[data-ui-icon],
  html body button.icon-button,
  html body button.kinstead-picker-close,
  html body button[data-picker-close] { transition: none !important; }
}

@media (forced-colors:active) {
  html body :is(button,summary).ui-icon-button,
  html body :is(button,summary)[data-ui-icon],
  html body button.icon-button,
  html body button.kinstead-picker-close,
  html body button[data-picker-close] {
    border: 0 !important;
    color: ButtonText !important;
    forced-color-adjust: auto;
  }
  html body :is(button,summary).ui-icon-button:focus-visible,
  html body :is(button,summary)[data-ui-icon]:focus-visible { outline: 2px solid Highlight !important; }
}

/* Patch 126b - final cascade authority over legacy component !important rules. */
html body :is(button,summary).ui-icon-button.ui-icon-button:not(#kinstead-icon-size-override),
html body :is(button,summary)[data-ui-icon].ui-icon-button:not(#kinstead-icon-size-override),
html body button.icon-button.icon-button:not(#kinstead-icon-size-override),
html body button.kinstead-picker-close.kinstead-picker-close:not(#kinstead-icon-size-override),
html body button[data-picker-close]:not(#kinstead-icon-size-override) {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--ui-icon-green) !important;
  transform: none !important;
}

html body :is(button,summary).ui-icon-button.ui-icon-button:not(#kinstead-icon-size-override) > :is(.ui-icon,svg,span),
html body :is(button,summary)[data-ui-icon].ui-icon-button:not(#kinstead-icon-size-override) > :is(.ui-icon,svg,span),
html body button.icon-button.icon-button:not(#kinstead-icon-size-override) > :is(.ui-icon,svg,span) {
  position: static !important;
  inset: auto !important;
  display: block !important;
  margin: auto !important;
  align-self: center !important;
  justify-self: center !important;
  transform: none !important;
}

html body :is(button,summary).ui-icon-button.ui-icon-button:not(#kinstead-icon-size-override):is(:active,[aria-pressed="true"],[aria-expanded="true"]),
html body :is(button,summary)[data-ui-icon].ui-icon-button:not(#kinstead-icon-size-override):is(:active,[aria-pressed="true"],[aria-expanded="true"]) {
  border: 0 !important;
  background: rgba(15,107,58,.12) !important;
  box-shadow: none !important;
  transform: scale(.96) !important;
}

html body :is(button,summary).ui-icon-button.ui-icon-button:not(#kinstead-icon-size-override):disabled,
html body :is(button,summary)[data-ui-icon].ui-icon-button:not(#kinstead-icon-size-override):disabled,
html body button.icon-button.icon-button:not(#kinstead-icon-size-override):disabled {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .36 !important;
  transform: none !important;
}

@media (hover:hover) and (pointer:fine) {
  html body :is(button,summary).ui-icon-button.ui-icon-button:not(#kinstead-icon-size-override):hover:not(:disabled),
  html body :is(button,summary)[data-ui-icon].ui-icon-button:not(#kinstead-icon-size-override):hover:not(:disabled),
  html body button.icon-button.icon-button:not(#kinstead-icon-size-override):hover:not(:disabled),
  html body button.kinstead-picker-close.kinstead-picker-close:not(#kinstead-icon-size-override):hover:not(:disabled),
  html body button[data-picker-close]:not(#kinstead-icon-size-override):hover:not(:disabled) {
    border: 0 !important;
    border-color: transparent !important;
    background: rgba(15,107,58,.06) !important;
    box-shadow: none !important;
    color: var(--ui-icon-green) !important;
    transform: none !important;
  }
}

@media (max-width:1024px), (pointer:coarse) {
  html body :is(button,summary).ui-icon-button.ui-icon-button:not(#kinstead-icon-size-override),
  html body :is(button,summary)[data-ui-icon].ui-icon-button:not(#kinstead-icon-size-override),
  html body button.icon-button.icon-button:not(#kinstead-icon-size-override),
  html body button.kinstead-picker-close.kinstead-picker-close:not(#kinstead-icon-size-override),
  html body button[data-picker-close]:not(#kinstead-icon-size-override) {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}