/* Friendly foundations. Loaded after the legacy theme; domain layers own layouts.
   Screen-only aliases and controls intentionally leave PDF/print output unchanged. */
:root {
  --friendly-bg: #f5f7f3;
  --friendly-surface: #fff;
  --friendly-surface-subtle: #f5f7f3;
  --friendly-ink: #283d30;
  --friendly-muted: #65746d;
  --friendly-accent: #365b43;
  --friendly-accent-hover: #2b4b35;
  --friendly-border: #e1e7dc;
  --friendly-field-border: #cbd6c5;
  --friendly-control-border: #798975;
  --friendly-danger: #a94343;
  --friendly-radius: 13px;
  --friendly-radius-small: 8px;
  --friendly-shadow: none;
  --friendly-ease: cubic-bezier(.2, .7, .2, 1);
  --friendly-font: "Segoe UI", Arial, sans-serif;
}

@media screen {
  body {
    --paper: var(--friendly-bg);
    --ink: var(--friendly-ink);
    --muted: var(--friendly-muted);
    --line: var(--friendly-border);
    --accent: var(--friendly-accent);
    --green: var(--friendly-accent);
    --soft: var(--friendly-surface-subtle);
    --dine-forest: var(--friendly-accent);
    --dine-hover: var(--friendly-accent-hover);
    --dine-tint: var(--friendly-surface-subtle);
    --dine-shadow: var(--friendly-shadow);
    --ui-focus: var(--friendly-accent);
    --ui-control-border: var(--friendly-control-border);
    --ui-control-radius: var(--friendly-radius-small);
    --ui-text-small: 12px;
    --ui-touch-target: 44px;
    --ui-fast: 160ms;
    --ui-ease: var(--friendly-ease);
  }

  body[data-design] { color: var(--friendly-ink); font-family: var(--friendly-font); }
  body[data-design] :is(button, input, select, textarea) { font-family: var(--friendly-font); }
  body[data-design] ::selection { background: #dce9d6; color: #24392c; }

  /* Geometry remains owned by each real form, including hidden source controls. */
  body[data-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]), select, textarea) {
    border-color: var(--friendly-field-border);
    border-radius: var(--friendly-radius-small);
    background-color: var(--friendly-surface);
    color: var(--friendly-ink);
    font-size: 14px;
    transition: background-color 160ms var(--friendly-ease), border-color 160ms var(--friendly-ease), box-shadow 160ms var(--friendly-ease);
  }
  body[data-design] :is(input, textarea)::placeholder { color: var(--friendly-muted); opacity: 1; }
  body[data-design] :is(label, .field-hint, .hours-hint) { line-height: 1.6; }
  body[data-design] label { font-size: 12px; }
  body[data-design] label .optional { color: var(--friendly-muted); font-size: inherit; }
  body[data-design] :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
    border-color: var(--friendly-field-border);
    box-shadow: none;
  }
  body[data-design] :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus-visible {
    outline: 1.5px solid var(--friendly-accent);
    outline-offset: 2px;
    border-color: var(--friendly-field-border);
  }
  body[data-design] :is(button, a, summary):focus-visible {
    outline: 2px solid var(--friendly-accent);
    outline-offset: 3px;
  }
  body[data-design] input[type=checkbox] { border-color: var(--friendly-control-border); }
  body[data-design] input[type=checkbox]:is(:checked, :indeterminate) {
    background-color: var(--friendly-accent);
    border-color: var(--friendly-accent);
  }
  body[data-design] input[type=checkbox]:focus-visible {
    outline: 1.5px solid var(--friendly-accent);
    outline-offset: 2px;
    box-shadow: none;
  }

  body[data-design] :is(.button-primary, .button-dark, .button-select, .primary-link),
  body[data-design=account] button[type=submit] {
    border-color: var(--friendly-accent);
    border-radius: var(--friendly-radius-small);
    background: var(--friendly-accent);
    color: #fff;
    box-shadow: 0 1px 2px rgb(26 48 34 / .08);
  }
  body[data-design] :is(.button-outline, .secondary) {
    border-color: var(--friendly-border);
    border-radius: var(--friendly-radius-small);
    background: var(--friendly-surface);
    color: var(--friendly-accent);
    box-shadow: none;
  }
  body[data-design=workspace] :is(.button-primary, .button-outline) { min-height: 40px; }
  body[data-design] .text-button { color: var(--friendly-accent); font-size: 12px; }
  body[data-design] :is(.form-error, .ui-control-error) { color: var(--friendly-danger); font-size: 13px; }

  /* Surface-only dialog changes retain the existing sticky header, gutter painting,
     body scroll lock, nesting, outside-click and busy-close guards. */
  body[data-design=workspace] dialog {
    border-color: var(--friendly-border);
    border-radius: var(--friendly-radius);
    background-color: var(--friendly-surface);
    color: var(--friendly-ink);
    box-shadow: 0 22px 70px rgb(21 41 28 / .22);
  }
  body[data-design=workspace] dialog::backdrop { background: rgb(25 42 31 / .42); backdrop-filter: blur(3px); }
  body[data-design=workspace] dialog .dialog-header {
    gap: 16px;
    padding: 19px 24px;
    background: var(--friendly-surface);
    border-bottom-color: var(--friendly-border);
    box-shadow: none;
  }
  body[data-design=workspace] dialog .dialog-header h2 {
    color: var(--friendly-ink);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -.025em;
  }
  body[data-design=workspace] dialog .dialog-header .eyebrow { color: var(--friendly-muted); font-size: 10px; letter-spacing: .08em; }
  body[data-design=workspace] dialog :is(.dialog-empty, .hours-hint, .field-hint, .list-label) { color: var(--friendly-muted); font-size: 12px; }
  body[data-design=workspace] dialog .form-actions { border-top-color: var(--friendly-border); gap: 12px; }
  body[data-design=workspace] dialog :is(.button-primary, .button-outline) { min-height: 40px; font-size: 13px; border-radius: var(--friendly-radius-small); }
  body[data-design=workspace] dialog .dialog-header button.ui-close {
    width: 38px;
    height: 38px;
    min-height: 38px;
    flex-basis: 38px;
    border-color: transparent;
    border-radius: var(--friendly-radius-small);
    background: transparent;
    color: var(--friendly-muted);
    box-shadow: none;
  }

  /* Menus and custom controls inherit the same surfaces without changing popover
     positioning, source-field validation, roving focus or search semantics. */
  body .ui-control > :is(.ui-select-trigger, .ui-time-text, .ui-month-trigger) {
    border-color: var(--friendly-field-border);
    border-radius: var(--friendly-radius-small);
    background-color: var(--friendly-surface);
    color: var(--friendly-ink);
  }
  body .ui-control :is(.ui-select-trigger, .ui-time-text, .ui-month-trigger):focus-visible {
    outline: 1.5px solid var(--friendly-accent);
    outline-offset: 2px;
    border-color: var(--friendly-field-border);
    box-shadow: none;
  }
  body .ui-custom-popup {
    border-color: var(--friendly-border);
    border-radius: var(--friendly-radius);
    background: var(--friendly-surface);
    color: var(--friendly-ink);
    box-shadow: 0 10px 32px rgb(26 48 34 / .14);
  }
  body :is(.ui-select-search-head, .ui-picker-head) { border-color: var(--friendly-border); }
  body .ui-select-search-head { background: var(--friendly-surface-subtle); }
  body .ui-select-search-head .ui-select-search { border-color: var(--friendly-field-border); border-radius: var(--friendly-radius-small); color: var(--friendly-ink); }
  body :is(.ui-custom-option, .ui-time-value, .ui-month-value) { border-radius: 7px; }
  body :is(.ui-custom-option[aria-selected=true], .ui-time-value[aria-selected=true], .ui-month-value[aria-selected=true]) {
    color: var(--friendly-accent);
    background: #e8efdf;
  }
  body .ui-custom-option.is-focused { background: var(--friendly-surface-subtle); outline-color: var(--friendly-accent); }
  body :is(.ui-time-column-label, .ui-select-empty) { color: var(--friendly-muted); font-size: 12px; }
  body .ui-picker-actions { border-color: var(--friendly-border); }
  body .ui-picker-actions button { border-radius: var(--friendly-radius-small); }
  body .ui-picker-clear { color: var(--friendly-accent); background: var(--friendly-surface); }
  body .ui-picker-apply { background: var(--friendly-accent); color: #fff; }
  body .ui-month-year { color: var(--friendly-accent); background: var(--friendly-surface-subtle); border-color: var(--friendly-border); border-radius: 7px; }
  body .ui-month-heading { color: var(--friendly-ink); }

  /* Profile remains an avatar; identity stays inside the existing account panel. */
  body :is(.za-panel, .za-notification-panel) { border-color: var(--friendly-border); border-radius: 14px; background: var(--friendly-surface); color: var(--friendly-ink); box-shadow: 0 12px 40px rgb(26 48 34 / .12); }
  body .za-panel { padding: 19px; }
  body .za-panel .za-kicker { color: var(--friendly-muted); font-size: 11px; letter-spacing: .08em; }
  body .za-panel .za-fullname { color: var(--friendly-ink); font-size: 15px; }
  body .za-panel .za-email { color: var(--friendly-muted); font-size: 12px; margin-bottom: 16px; }
  body .za-panel :is(a, button) { color: var(--friendly-accent); border-top-color: var(--friendly-border); font-size: 13px; min-height: 41px; }
  body .za-avatar { color: var(--friendly-accent); background: #e7eddf; }
  body .za-menu .za-trigger, body .za-notification-trigger { border-color: transparent; color: var(--friendly-muted); }
  body .za-menu[open] .za-trigger, body .za-notification-trigger[aria-expanded=true] { background: var(--friendly-surface-subtle); border-color: var(--friendly-border); color: var(--friendly-accent); }
  body .za-login { border-color: var(--friendly-border); border-radius: var(--friendly-radius-small); color: var(--friendly-accent); background: var(--friendly-surface); }
  body .za-notification-top { background: var(--friendly-surface); border-color: var(--friendly-border); }
  body .za-notification-top h2 { color: var(--friendly-ink); font-size: 14px; }
  body :is(.za-notification-status, .za-notification-more, .za-notification-item span, .za-notification-item small, .za-notification-refresh) { color: var(--friendly-muted); font-size: 12px; }
  body .za-notification-item { border-radius: var(--friendly-radius-small); color: var(--friendly-ink); }
  body .za-notification-item.is-unread { background: var(--friendly-surface-subtle); border-left-color: #8ba180; }
  body .za-notification-close { color: var(--friendly-muted); }
  body .za-error { background: #fff5f2; color: var(--friendly-danger); border-color: #e6cbc4; border-radius: var(--friendly-radius-small); font-size: 12px; }

  @media (hover: hover) {
    body[data-design] :is(input:not([type=checkbox]):not([type=radio]), select, textarea):hover:not(:disabled),
    body .ui-control :is(.ui-select-trigger, .ui-time-text, .ui-month-trigger):hover:not(:disabled) { box-shadow: inset 0 1px 5px rgb(40 61 48 / .09); }
    body[data-design] :is(.button-primary, .button-dark, .button-select, .primary-link):hover:not(:disabled),
    body[data-design=account] button[type=submit]:hover:not(:disabled) { background: var(--friendly-accent-hover); border-color: var(--friendly-accent-hover); box-shadow: 0 3px 10px rgb(26 48 34 / .12); transform: none; }
    body[data-design] :is(.button-outline, .secondary):hover:not(:disabled), body .za-login:hover { background: var(--friendly-surface-subtle); border-color: #b9c7b3; box-shadow: none; transform: none; }
    body[data-design=workspace] dialog .dialog-header button.ui-close:hover:not(:disabled) { color: var(--friendly-ink); background: transparent; border-color: transparent; }
    body :is(.ui-custom-option:hover:not([aria-disabled=true]), .ui-time-value:hover:not(:disabled), .ui-month-value:hover:not(:disabled)) { color: var(--friendly-accent); background: var(--friendly-surface-subtle); }
    body .za-menu .za-trigger:hover, body .za-notification-trigger:hover { background: var(--friendly-surface-subtle); border-color: transparent; }
    body .za-panel :is(a, button):hover:not(:disabled) { color: var(--friendly-accent-hover); }
    body .za-notification-item:hover { background: #e8efdf; }
  }

  @media (max-width: 760px) {
    body[data-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]), select, textarea),
    body .ui-control > :is(.ui-select-trigger, .ui-time-text, .ui-month-trigger),
    body .ui-select-search-head .ui-select-search { font-size: 16px; }
    body[data-design=workspace] dialog .dialog-header { padding: 18px 17px; gap: 12px; }
    body[data-design=workspace] dialog .dialog-header h2 { font-size: 21px; }
    body[data-design=workspace] dialog .dialog-header button.ui-close { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
    body[data-design=workspace] :is(.button-primary, .button-outline),
    body[data-design=workspace] dialog :is(.button-primary, .button-outline),
    body .za-panel :is(a, button), body .za-login { min-height: 44px; }
    body .za-menu .za-trigger, body .za-notification-trigger { width: 44px; height: 44px; min-height: 44px; }
    body .za-notification-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    body .za-notification-refresh { min-height: 44px; }
    body .za-notification-panel { border-radius: var(--friendly-radius); }
  }

  @media (prefers-reduced-motion: reduce) {
    body[data-design] :is(input, select, textarea), body .ui-control > :is(.ui-select-trigger, .ui-time-text, .ui-month-trigger) { transition: none; }
  }
}