/* Phase 1 only: shared typography and controls.
   No layout, visibility, positioning, scrolling or event colour overrides.
   Authentication retains its existing presentation until its own phase. */
:is(#shell, #modal-root, #qa-overlay, #ai-panel) {
  --sans: var(--life-font);
  font-family: var(--life-font);
}
:root:not([data-theme="vintage-garden"]) :is(#shell, #modal-root, #qa-overlay, #ai-panel) {
  --serif: var(--life-font);
}
#shell { background-color: var(--life-canvas); }
/* Bridge neutral surfaces only in the two standard themes. Custom themes retain
   their own palette. No --accent / --red / --green / calendar values are touched. */
:root:is([data-theme="light"], [data-theme="dark"]) :is(#shell, #modal-root, #qa-overlay, #ai-panel) {
  --bg: var(--life-canvas);
  --bg-elevated: var(--life-surface);
  --bg-elevated-2: var(--life-surface-secondary);
  --bg-hover: var(--life-hover);
  --text: var(--life-ink);
  --text-dim: var(--life-muted);
  --text-faint: var(--life-muted);
  --border: var(--life-line);
  --border-soft: var(--life-line-soft);
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn {
  min-height: var(--life-control-height);
  border-radius: var(--life-radius-control);
  padding: .625rem 1rem;
  font-family: var(--life-font);
  font-size: var(--life-text-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  white-space: normal;
  text-align: center;
  justify-content: center;
  transition: background-color var(--life-duration-fast) var(--life-ease),
    border-color var(--life-duration-fast) var(--life-ease),
    color var(--life-duration-fast) var(--life-ease);
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn-sm {
  min-height: 2.125rem;
  padding: .4375rem .75rem;
  font-size: var(--life-text-caption);
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn-primary {
  background: var(--life-action);
  color: var(--life-action-ink);
  border-color: var(--life-action);
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn-primary:hover {
  background: var(--life-action);
  color: var(--life-action-ink);
  box-shadow: inset 0 0 0 2px var(--life-action-ink);
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn-ghost {
  background: transparent;
  color: var(--life-muted);
  border-color: transparent;
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn-ghost:hover {
  background: var(--life-hover);
  color: var(--life-ink);
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn-danger {
  color: var(--life-invalid);
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .field label {
  font-size: var(--life-text-caption);
  font-weight: 500;
  color: var(--life-muted);
  line-height: 1.4;
  margin-bottom: var(--life-space-2);
}
/* Exclude native toggles, upload controls, ranges and hidden inputs. */
:is(#shell, #modal-root, #qa-overlay, #ai-panel) .field :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),
  select, textarea
) {
  min-width: 0;
  max-width: 100%;
  min-height: var(--life-control-height);
  font-family: var(--life-font);
  font-size: var(--life-text-body);
  line-height: 1.4;
  color: var(--life-ink);
  background-color: var(--life-surface-secondary);
  border: 1px solid var(--life-line);
  border-radius: var(--life-radius-control);
  padding: .625rem .75rem;
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) :is(input, textarea)::placeholder {
  color: var(--life-muted);
  opacity: 1;
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--life-focus);
  outline-offset: 3px;
}
:is(#shell, #modal-root, #qa-overlay, #ai-panel) :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--life-invalid);
}
@media (max-width: 620px), (pointer: coarse) {
  :is(#shell, #modal-root, #qa-overlay, #ai-panel) :is(.btn, .icon-btn) {
    min-height: var(--life-touch-height);
    min-width: var(--life-touch-height);
  }
  :is(#shell, #modal-root, #qa-overlay, #ai-panel) .field :is(input, select, textarea) {
    font-size: 1rem;
  }
}
@media (forced-colors: active) {
  :is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn { border: 1px solid ButtonText; }
  :is(#shell, #modal-root, #qa-overlay, #ai-panel) .btn-primary { background: Highlight; color: HighlightText; }
  :is(#shell, #modal-root, #qa-overlay, #ai-panel) :focus-visible { outline-color: Highlight; }
}