@charset "UTF-8";

:root{
  --theme-surface:#fff;
  --theme-surface-raised:#fafbf8;
  --theme-surface-soft:#eef2e9;
  --theme-accent:#193b34;
  --theme-accent-hover:#2b554a;
  --theme-text-on-accent:#fff;
  --theme-danger:#8a2f27;
  --theme-focus:#b97612;
  --theme-highlight:#b85c00;
  --theme-highlight-soft:#fff0df;
  --theme-highlight-border:#df9a54;
  --theme-highlight-text:#fff;
  --theme-selected:#e8ede1;
  --theme-selected-border:#b7c2b8;
  --theme-selected-text:#193b34;
  --theme-control-border:#aebbb0;
  --theme-divider:#edf0e9;
  --theme-surface-translucent:#ffffff80;
}

html[data-theme="dark"]{
  --ink:#f7faf8;
  --muted:#c6d0cb;
  --paper:#0d1210;
  --line:#35413d;
  --white:#151b18;
  --green:#355c3d;
  --gold:#b98444;
  --theme-surface:#151b18;
  --theme-surface-raised:#1a211e;
  --theme-surface-soft:#202824;
  --theme-accent:#2d675a;
  --theme-accent-hover:#387769;
  --theme-text-on-accent:#fff;
  --theme-danger:#ffb4aa;
  --theme-focus:#e1a84f;
  --theme-highlight:#f0a44b;
  --theme-highlight-soft:#4a301c;
  --theme-highlight-border:#8f6033;
  --theme-highlight-text:#1a1208;
  --theme-selected:#244139;
  --theme-selected-border:#48675e;
  --theme-selected-text:#f7faf8;
  --theme-control-border:#5a6963;
  --theme-divider:#35413d;
  --theme-surface-translucent:#151b18cc;
}

html[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] :focus-visible{outline-color:var(--theme-focus)}
html[data-theme="dark"] ::placeholder{color:#9eaba5;opacity:1}
html[data-theme="dark"] :where(input,select,textarea){background:var(--theme-surface);color:var(--ink);border-color:var(--theme-control-border)}
html[data-theme="dark"] :where(.button,button){background:var(--theme-accent);border-color:var(--theme-accent);color:var(--theme-text-on-accent)}
html[data-theme="dark"] :where(.button,button):hover{background:var(--theme-accent-hover)}
/* A tappable shopping product label is still neutral content, not an accent action.
 * Override both generic dark button and hover rules without changing the + button.
 */
html[data-theme="dark"] .shopping-add-row-label-button,
html[data-theme="dark"] .shopping-add-row-label-button:is(:hover,:active,:focus-visible){
  background:transparent;
  color:inherit;
  border-color:transparent;
}
html[data-theme="dark"] :where(.brand-mark,.app-add-action,.scout-control-panel>.scout-filters .filter-count,.scout-control-panel>.scout-filters[open] .filter-count){background:var(--theme-accent);border-color:var(--theme-accent);color:#fff}
html[data-theme="dark"] :where(.quiet,.rating-actions button,.account-menu .account-menu-action,.shopping-check,.shopping-remove,.shopping-product-thumb-button,.shopping-product-edit-image-button){background:transparent;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] :where(.quiet,.rating-actions button,.account-menu .account-menu-action):hover{background:var(--theme-surface-soft);color:var(--ink)}

/* Category headers are structural controls, not selected/primary actions.
 * Keep them neutral in dark mode; generic button/accent rules must never make them green.
 */
html[data-theme="dark"] :where([data-shopping-category] > .shopping-category-head,[data-shopping-category] .shopping-category-inline-editor){
  background:var(--shopping-category-head-bg);
  color:var(--ink);
}
html[data-theme="dark"] :where(.shopping-category-collapse-toggle,.shopping-category-edit-toggle,.shopping-category-chevron-toggle){
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}

html[data-theme="dark"] :where(
  .scout-profile-bar,.scout-profile-control,.scout-profile-edit,.scout-profile-menu>summary,.scout-profile-options,.scout-filters,
  .scout-tool-link,.scout-control-panel>.scout-filters>.scout-filter-summary,.scout-control-panel>.scout-filters .filters,
  .messages-icon-button,.messages-source-picker,.messages-status-tabs button,
  .messages-signature-list>div,.profile-context-edit-icon,.profile-handle-input,.messages-connection-edit-icon,.messages-signature-item,
  .shopping-create form,.shopping-list-card,.shopping-add-item,.shopping-category,.shopping-completed,.shopping-settings,
  .shopping-product-thumb,.shopping-product-edit-image,
  .shopping-add-popover,.shopping-suggestions,.shopping-suggestion,.shopping-item-quantity-popover,.shopping-product-edit-form,
  .shopping-list-edit-action,.shopping-editor-card,.shopping-category-add>form,.shopping-undo-toast,.shopping-catalog-action,
  .shopping-product-catalog-card,.shopping-product-transfer,.shopping-template-action,.shopping-template-card,.shopping-template-apply,.shopping-template-settings,
  .shopping-shared-access
){background:var(--theme-surface);border-color:var(--line);color:var(--ink)}

html[data-theme="dark"] :where(
  .stat,.messages-empty-icon,.messages-provider-icon,.profile-context-item[open] .profile-context-edit-icon,
  .messages-connection-item[open] .messages-connection-edit-icon,.messages-identity-item[open] .messages-connection-edit-icon,
  .messages-signature-item[open] .messages-connection-edit-icon,.shopping-empty-icon,.shopping-remove:hover,
  .shopping-edit:hover,.shopping-category-editor-order,.shopping-category-drag-handle,.shopping-template-icon,.shopping-template-cover,.shopping-list-cover,
  .account-trigger:hover,.account-menu[open] .account-trigger,.account-menu .account-menu-action:hover,
  .mobile-tabbar-link:hover,.mobile-tabbar-link:focus-visible
){background:var(--theme-surface-soft);color:var(--ink);border-color:var(--line)}

html[data-theme="dark"] :where(
  .messages-identity-card,.messages-readonly-value,.shopping-product-edit-form input[type=file],
  .shopping-category-editor-row,.shopping-list-preset-option
){background:var(--theme-surface-raised);color:var(--ink);border-color:var(--line)}

html[data-theme="dark"] :where(
  .card-bottom,.messages-connection-row,.messages-settings-disclosure,.profile-context-list,.profile-context-item,
  .profile-context-delete-form,.profile-handle,.messages-connection-list,.messages-connection-item,.messages-identity-editor,
  .messages-signature-section,.messages-signature-editor,[data-shopping-category] > .shopping-category-head,.shopping-template-products-head,.shopping-item,.shopping-product-danger
){border-color:var(--line)}

html[data-theme="dark"] .messages-empty{background:var(--theme-surface-translucent);border-color:var(--theme-control-border)}
html[data-theme="dark"] .mobile-tabbar{--tabbar-glass-solid:#0d1210;--tabbar-glass:rgba(13,18,16,.78);--tabbar-border:rgba(247,250,248,.16);--tabbar-shadow:0 10px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);--tabbar-hover:rgba(32,40,36,.78);--tabbar-active:rgba(45,103,90,.58);--tabbar-active-border:rgba(127,176,159,.28)}
html[data-theme="dark"] .module-option{background:rgba(255,255,255,.05);border-color:var(--line)}
html[data-theme="dark"] .hero-art{background:#1c2a24}
html[data-theme="dark"] .hero-art .decor{color:#9fc4b7}
html[data-theme="dark"] .scout-profile-options{box-shadow:0 12px 30px rgba(0,0,0,.34)}
html[data-theme="dark"] :where(.scout-profile-options a:hover,.scout-profile-options a:focus-visible,.shopping-suggestion:hover,.shopping-suggestion:focus-visible,.shopping-category-editor-row[open]>summary){background:var(--theme-surface-soft);color:var(--ink)}
html[data-theme="dark"] .shopping-item-quantity{background:var(--theme-surface-raised);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .shopping-item-quantity-picker[open]>.shopping-item-quantity{background:var(--theme-surface-soft);border-color:#60736b}
html[data-theme="dark"] .shopping-suggestions-label{background:var(--theme-surface-raised);color:var(--muted)}
html[data-theme="dark"] :where(.shopping-edit,.shopping-remove){color:var(--muted)}
@media (hover:none), (pointer:coarse){
  html[data-theme="dark"] .shopping-check:hover{background:transparent;color:var(--ink);border-color:var(--line)}
}

html[data-theme="dark"] .badge{background:#29322e;color:#f7faf8}
html[data-theme="dark"] .badge.shortlisted{background:#5a4325;color:#ffe6b8}
html[data-theme="dark"] .badge.booked{background:#294b31;color:#d9f7d8}
html[data-theme="dark"] .badge.rejected,
html[data-theme="dark"] .badge.expired{background:#332f2d;color:#e4ddd8}
html[data-theme="dark"] .event-chips>span{background:#25302b;color:var(--ink)}
html[data-theme="dark"] .event-chips .scout-match{background:#244139;color:#e8fff5}
html[data-theme="dark"] .event-priority{background:#4c391e;color:#ffe4ad}
html[data-theme="dark"] .error{background:#49231f;color:#ffc7bd}
html[data-theme="dark"] .notice{background:#253d2a;color:#e7f7e6}
html[data-theme="dark"] :where(.shopping-delete-list button,.shopping-product-danger button,.shopping-category-delete button,.shopping-list-danger button,.shopping-shared-list-settings .shopping-leave-list){color:var(--theme-danger)}
html[data-theme="dark"] .event-cover .badge{background:#18201ded;color:#f7faf8;border-color:#52625b}

/*
 * Dark interaction states need explicit specificity.
 * Several component styles intentionally use more specific hover/open selectors;
 * without these overrides a tapped control can retain a light surface on touch devices.
 * Focus is an interaction state, not a selected state, so it uses the softer surface.
 */
html[data-theme="dark"] .shopping-suggestion:hover,
html[data-theme="dark"] .shopping-suggestion:focus-visible,
html[data-theme="dark"] .shopping-category-editor-row[open]>summary,
html[data-theme="dark"] .shopping-category-editor-details[open]>summary,
html[data-theme="dark"] .scout-profile-options a:hover,
html[data-theme="dark"] .scout-profile-options a:focus,
html[data-theme="dark"] .scout-profile-options a:focus-visible,
html[data-theme="dark"] .scout-control-panel>.scout-filters[open]>.scout-filter-summary,
html[data-theme="dark"] .profile-context-item[open] .profile-context-edit-icon,
html[data-theme="dark"] .messages-connection-item[open] .messages-connection-edit-icon,
html[data-theme="dark"] .messages-identity-item[open] .messages-connection-edit-icon,
html[data-theme="dark"] .messages-signature-item[open] .messages-connection-edit-icon,
html[data-theme="dark"] .account-trigger:hover,
html[data-theme="dark"] .account-trigger:focus,
html[data-theme="dark"] .account-trigger:focus-visible,
html[data-theme="dark"] .account-menu[open] .account-trigger,
html[data-theme="dark"] .shopping-product-catalog-card:hover,
html[data-theme="dark"] .shopping-product-catalog-card:focus,
html[data-theme="dark"] .shopping-product-catalog-card:focus-visible,
html[data-theme="dark"] .shopping-product-catalog-card:active,
html[data-theme="dark"] .shopping-template-card:hover,
html[data-theme="dark"] .shopping-template-card:focus,
html[data-theme="dark"] .shopping-template-card:focus-visible,
html[data-theme="dark"] .shopping-template-card:active,
html[data-theme="dark"] .shopping-catalog-action:hover,
html[data-theme="dark"] .shopping-catalog-action:focus-visible,
html[data-theme="dark"] .shopping-list-edit-action:hover,
html[data-theme="dark"] .shopping-list-edit-action:focus-visible,
html[data-theme="dark"] .shopping-template-action:hover,
html[data-theme="dark"] .shopping-template-action:focus-visible{
  background:var(--theme-surface-soft);
  color:var(--ink);
  border-color:var(--line);
}

/* Native file controls need an explicit dark surface; component CSS otherwise wins by specificity. */
html[data-theme="dark"] .shopping-product-edit-form input[type=file]{
  background:var(--theme-surface-raised);
  color:var(--ink);
  border-color:#5a6963;
  color-scheme:dark;
}
html[data-theme="dark"] input[type=file]::file-selector-button{
  margin-right:10px;
  padding:8px 12px;
  border:1px solid var(--theme-selected-border);
  border-radius:8px;
  background:var(--theme-selected);
  color:var(--theme-selected-text);
  font:inherit;
}
html[data-theme="dark"] input[type=file]::-webkit-file-upload-button{
  margin-right:10px;
  padding:8px 12px;
  border:1px solid var(--theme-selected-border);
  border-radius:8px;
  background:var(--theme-selected);
  color:var(--theme-selected-text);
  font:inherit;
}

/* Attention counts signal pending items with text color, never a selected surface.
 * Keep selection independent of count, including zero and sticky touch hover.
 */
.family-calendar-attention-number:not(.is-active){
  background:var(--theme-surface);
  color:var(--muted);
  border-color:var(--line);
  box-shadow:none;
}
.family-calendar-attention-number.has-attention:not(.is-active){
  color:var(--theme-attention-text);
}
.family-calendar-attention-number.is-active{
  box-shadow:none;
}

/* Shared selected state: subtle in light mode, calm REVEED green in dark mode. */
.family-calendar-attention-number.is-active,
.family-calendar-attention-number.has-attention.is-active,
.family-calendar-today-icon.is-active,
.messages-status-tabs :is(a,button).is-active,
.mobile-tabbar-link.is-active,
.scout-profile-options a[aria-current="page"]{
  background:var(--theme-selected);
  color:var(--theme-selected-text);
  border-color:var(--theme-selected-border);
}
.family-calendar-attention-number.is-active:hover,
.family-calendar-attention-number.has-attention.is-active:hover,
.family-calendar-today-icon.is-active:hover,
.messages-status-tabs :is(a,button).is-active:hover,
.messages-status-tabs :is(a,button).is-active:focus-visible,
.mobile-tabbar-link.is-active:hover,
.mobile-tabbar-link.is-active:focus-visible,
.scout-profile-options a[aria-current="page"]:hover,
.scout-profile-options a[aria-current="page"]:focus-visible{
  background:var(--theme-selected);
  color:var(--theme-selected-text);
}

.theme-settings-card form{margin:0}
.theme-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.theme-choice{display:flex;align-items:flex-start;gap:10px;margin:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--white);cursor:pointer}
.theme-choice:hover{border-color:#9eafa3}
.theme-choice:has(input:checked){border-color:#789486;box-shadow:0 0 0 2px rgba(120,148,134,.18)}
.theme-choice input{width:auto;min-height:0;margin:4px 0 0;accent-color:#2b554a}
.theme-choice span{display:grid;gap:3px;min-width:0}
.theme-choice strong{font-size:14px;line-height:1.3}
.theme-choice small{color:var(--muted);font-size:12px;line-height:1.4}
.theme-preference-status{min-height:20px;margin:9px 0 0}
html[data-theme="dark"] .theme-choice:has(input:checked){border-color:#7fa797;box-shadow:0 0 0 2px rgba(127,167,151,.22)}
html[data-theme="dark"] .theme-choice input{accent-color:#7fb09f}

@media(max-width:700px){
  .theme-choice-grid{grid-template-columns:1fr}
  .theme-choice{padding:12px 13px}
}


/* Shared semantic status and person tokens for attention-oriented calendar UIs. */
:root{
  --theme-warning-surface:#fff2d9;
  --theme-warning-text:#714900;
  --theme-attention-text:#a65100;
  --theme-warning-border:#efd69d;
  --theme-conflict-surface:#fae5df;
  --theme-conflict-text:#862e24;
  --theme-conflict-border:#e5b6aa;
  --theme-change-surface:#e4edf6;
  --theme-change-text:#244e74;
  --theme-change-border:#bdd0e2;
  --theme-person-1:#4f8175;
  --theme-person-2:#8069a6;
  --theme-person-3:#ad685e;
  --theme-person-4:#607bad;
  --theme-person-family:#9a763f;
  --theme-person-neutral:#81908a;
  --theme-focus-ring:#789486;
}
html[data-theme="dark"]{
  --theme-warning-surface:#4c391e;
  --theme-warning-text:#ffe4ad;
  --theme-attention-text:#efae54;
  --theme-warning-border:#6f552c;
  --theme-conflict-surface:#49231f;
  --theme-conflict-text:#ffc7bd;
  --theme-conflict-border:#7a3b34;
  --theme-change-surface:#20384b;
  --theme-change-text:#c8e6ff;
  --theme-change-border:#365a75;
  --theme-person-1:#7fb09f;
  --theme-person-2:#b29add;
  --theme-person-3:#e09b91;
  --theme-person-4:#9fb8e9;
  --theme-person-family:#d9b66f;
  --theme-person-neutral:#a9b7b1;
  --theme-focus-ring:#9bc2b3;
}