/* EHSync design-system theme for a plain-CSS / Jinja app.
 *
 * Colours, borders, buttons and logo rules: extracted from Purecores-admin
 * PR #39 at 9e40aef (apps/account/src/ehsync-brand.css, apps/web/src/ehsync-brand.css,
 * apps/web/src/admin.css). That head passed the brand check.
 *
 * Spacing, radius, shadows and type scale: @pure-cores-apps/core 0.4.2
 * (Pure-Cores-Apps/purecores-admin, packages/core/src/iso/tokens.css,
 * packages/core/src/iso/components.css, plus the 0.4.2 spacing/type aliases
 * in packages/core/src/tokens.css). Core colour tokens are the old PureCores
 * palette and are NOT copied.
 *
 * Contrast ratios in comments were recomputed with the WCAG 2 relative-luminance
 * formula (sRGB). They are not copied from CONTRAST.json, though they match it
 * where the same pairs were measured.
 *
 * Never use white text on #01A7FB (2.65:1, fails). Never use #01A7FB as text
 * on white or #F3F6FA (2.65:1 / 2.45:1). Light links and primary fills use navy.
 * Do not introduce PureCores colours #14284B, #1E6FB8, #185C99, #7CC4F0,
 * violet, or #CBC9CF input borders.
 */

/* -------------------------------------------------------------------------- */
/* Fonts (self-hosted; no Google Fonts or CDN)                                */
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: "EHSync Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/montserrat/montserrat-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "EHSync Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/montserrat/montserrat-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2");
}

/* -------------------------------------------------------------------------- */
/* Light tokens                                                               */
/* -------------------------------------------------------------------------- */

:root,
html[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;

  /* Brand */
  --ehsync-navy: #00235D;
  --ehsync-blue: #01A7FB;
  --brand-navy: #00235D;
  --brand-primary: #00235D;
  --brand-accent: #01A7FB;
  --brand-hover: #00235D; /* secondary / chrome hover; not a blue fill */
  --brand-pressed: #00235D;
  --brand-on-primary: #FFFFFF; /* #FFFFFF on #00235D = 15.02:1 */
  --brand-link: #00235D; /* #00235D on #FFFFFF = 15.02:1. Do not use #01A7FB on light. */
  --brand-focus: #00235D;
  --brand-tint: #E8EEF6;

  /* Neutrals: text, muted, page, card, surface, tint, stroke */
  --ehsync-text: #00235D; /* 15.02:1 on #FFFFFF; 13.85:1 on #F3F6FA; 12.87:1 on #E8EEF6 */
  --ehsync-muted: #3A4A66; /* 8.93:1 on #FFFFFF; 8.24:1 on #F3F6FA; 7.65:1 on #E8EEF6 */
  --ehsync-page: #F3F6FA;
  --ehsync-card: #FFFFFF;
  --ehsync-surface: #F3F6FA;
  --ehsync-tint: #E8EEF6;
  --ehsync-stroke: #D5DCE8; /* decorative only; 1.38:1 on white — not a 3:1 UI boundary */
  --pc-ink: #00235D;
  --pc-ink-muted: #3A4A66;
  --pc-surface: #F3F6FA;
  --pc-surface-card: #FFFFFF;
  --pc-surface-muted: #F3F6FA;
  --pc-stroke: #D5DCE8;

  /* Borders — light input #6B7A90 (Reseller/ISO/Waste precedent, PR #39).
     4.36:1 on #FFFFFF / card (WCAG 1.4.11 UI 3:1); 4.03:1 on page #F3F6FA; 3.74:1 on tint. */
  --ehsync-input-border: #6B7A90;
  --ehsync-input-border-hover: #00235D; /* 15.02:1 on white */
  --pc-input-border: #6B7A90;
  --pc-input-border-hover: #00235D;
  --sf-form-element-border-rest: #6B7A90;
  --sf-button-border-rest: #6B7A90;

  /* Focus ring */
  --ehsync-focus-ring: #00235D;
  --ehsync-focus-offset: 2px;

  /* Status — ISO shell tokens from core 0.4.2 iso/tokens.css.
     Text and white-on-fill all meet 4.5:1 on light surfaces. */
  --ehsync-success: #157A45; /* 5.38:1 on #FFFFFF; 4.97:1 on #F3F6FA */
  --ehsync-success-on: #FFFFFF; /* 5.38:1 on #157A45 */
  --ehsync-warn: #B45309; /* 5.02:1 on #FFFFFF; 4.63:1 on #F3F6FA */
  --ehsync-warn-on: #FFFFFF; /* 5.02:1 on #B45309 */
  --ehsync-danger: #B91C1C; /* 6.47:1 on #FFFFFF; 5.97:1 on #F3F6FA */
  --ehsync-danger-on: #FFFFFF; /* 6.47:1 on #B91C1C */
  --pc-success: #157A45;
  --pc-warning: #B45309;
  --pc-danger: #B91C1C;

  /* Buttons */
  --ehsync-btn-primary-bg: #00235D;
  --ehsync-btn-primary-fg: #FFFFFF; /* 15.02:1 */
  --ehsync-btn-primary-border: #00235D;
  --ehsync-btn-primary-hover-bg: #00235D;
  --ehsync-btn-primary-hover-ring: #01A7FB; /* inset 2px; #01A7FB on #00235D = 5.66:1 */
  --ehsync-btn-primary-active-bg: #001A3D; /* from admin.css .sign-in .button-primary:active */
  --ehsync-btn-secondary-bg: #FFFFFF;
  --ehsync-btn-secondary-fg: #00235D; /* 15.02:1 */
  --ehsync-btn-secondary-border: #6B7A90; /* 4.36:1 on white */
  --ehsync-btn-secondary-hover-bg: #F3F6FA; /* on-brand stand-in for admin.css #F3F7FC hover (old surface) */
  --ehsync-btn-secondary-hover-border: #00235D;
  /* Accent fill, if needed: navy text on blue, never white on blue. */
  --ehsync-btn-accent-bg: #01A7FB;
  --ehsync-btn-accent-fg: #00235D; /* 5.66:1. White on #01A7FB is 2.65:1 — forbidden. */

  /* Type */
  --ehsync-font-heading: "EHSync Montserrat", Inter, ui-sans-serif, system-ui, sans-serif;
  --ehsync-font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --pc-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --sf-font-family: Inter;
  --sf-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;

  /* Type scale — ISO shell (packages/core/src/iso/components.css) */
  --ehsync-font-size-kicker: 10px;       /* letter-spacing 0.06em; line-height 1.3 */
  --ehsync-font-size-badge: 10px;        /* letter-spacing 0.06em; line-height 1.4 */
  --ehsync-font-size-caption: 12px;
  --ehsync-font-size-table: 12.5px;      /* line-height 1.35 */
  --ehsync-font-size-helper: 13px;       /* line-height 1.4 */
  --ehsync-font-size-body: 14px;         /* ISO inputs, card titles; line-height 1.3 */
  --ehsync-font-size-button: 15px;       /* weight 600; letter-spacing -0.01em; line-height 1.2 */
  --ehsync-font-size-input: 16px;        /* admin.css sign-in inputs (avoids iOS zoom) */
  --ehsync-font-size-modal-title: 16px;  /* letter-spacing -0.01em */
  --ehsync-font-size-page-title: 22px;   /* letter-spacing -0.03em; line-height 1.1 */

  /* Type scale — core 0.4.2 Source Fusion default (packages/core/src/tokens.css :root) */
  --sf-font-size-xs2: 10px;
  --sf-font-size-xs: 11px;
  --sf-font-size-sm: 12px;
  --sf-font-size-base: 13px;
  --sf-font-size-md: 16px;
  --sf-font-size-lg: 19px;
  --sf-font-size-xl: 22px;
  --sf-font-size-xl2: 27px;
  --sf-font-size-xl3: 32px;
  --sf-font-size-xl4: 39px;
  --sf-font-size-xl5: 47px;
  --sf-font-size-xl6: 56px;
  --sf-font-size-xl7: 67px;
  --sf-line-height-xs2: 10px;
  --sf-line-height-xs: 12px;
  --sf-line-height-sm: 14px;
  --sf-line-height-base: 16px;
  --sf-line-height-md: 20px;
  --sf-line-height-lg: 24px;
  --sf-line-height-xl: 28px;
  --sf-line-height-xl2: 32px;
  --sf-line-height-xl3: 40px;
  --sf-line-height-xl4: 44px;
  --sf-line-height-xl5: 52px;
  --sf-line-height-xl6: 60px;
  --sf-line-height-xl7: 78px;
  --font-size-xs: var(--sf-font-size-xs);
  --font-size-sm: var(--sf-font-size-sm);
  --font-size-base: var(--sf-font-size-base);
  --font-size-md: var(--sf-font-size-md);
  --font-size-lg: var(--sf-font-size-lg);
  --font-size-xl: var(--sf-font-size-xl);
  --line-xs: var(--sf-line-height-xs);
  --line-sm: var(--sf-line-height-sm);
  --line-base: var(--sf-line-height-base);
  --line-lg: var(--sf-line-height-lg);

  /* Spacing scale — core 0.4.2 tokens.css */
  --sf-spacing-minor-xs4: 2px;
  --sf-spacing-minor-xs3: 4px;
  --sf-spacing-minor-xs2: 6px;
  --sf-spacing-minor-xs: 8px;
  --sf-spacing-minor-sm: 12px;
  --sf-spacing-minor-base: 16px;
  --sf-spacing-minor-md: 20px;
  --sf-spacing-minor-lg: 24px;
  --sf-spacing-minor-xl: 28px;
  --sf-spacing-minor-xl2: 36px;
  --sf-spacing-minor-xl3: 44px;
  --sf-spacing-minor-xl4: 56px;
  --sf-spacing-minor-xl5: 68px;
  --sf-spacing-xs4: 4px;
  --sf-spacing-xs3: 6px;
  --sf-spacing-xs2: 8px;
  --sf-spacing-xs: 12px;
  --sf-spacing-sm: 16px;
  --sf-spacing-base: 20px;
  --sf-spacing-md: 24px;
  --sf-spacing-lg: 28px;
  --sf-spacing-xl: 32px;
  --sf-spacing-xl2: 40px;
  --sf-spacing-xl3: 48px;
  --sf-spacing-xl4: 60px;
  --sf-spacing-xl5: 72px;
  --spacing-xs4: var(--sf-spacing-minor-xs4);
  --spacing-xs3: var(--sf-spacing-minor-xs3);
  --spacing-xs2: var(--sf-spacing-minor-xs2);
  --spacing-xs: var(--sf-spacing-minor-xs);
  --spacing-minor-sm: var(--sf-spacing-minor-sm);
  --spacing-sm: var(--sf-spacing-sm);
  --spacing-base: var(--sf-spacing-base);
  --spacing-md: var(--sf-spacing-md);
  --spacing-lg: var(--sf-spacing-lg);
  --ehsync-space-2: 2px;
  --ehsync-space-4: 4px;
  --ehsync-space-6: 6px;
  --ehsync-space-8: 8px;
  --ehsync-space-12: 12px;
  --ehsync-space-16: 16px;
  --ehsync-space-18: 18px; /* logo clear space, from the brief / PR #39 */
  --ehsync-space-20: 20px;
  --ehsync-space-24: 24px;
  --ehsync-space-28: 28px;
  --ehsync-space-32: 32px;

  /* Radius — ISO shell (iso/tokens.css) is the app chrome scale */
  --pc-radius-badge: 2px;
  --pc-radius-card: 4px;
  --pc-radius-sm: 8px;
  --pc-radius-input: 12px;
  --pc-radius-md: 14px;
  --pc-radius-lg: 22px;
  --pc-radius-control: 999px;
  --ehsync-radius-badge: 2px;
  --ehsync-radius-card: 4px;
  --ehsync-radius-sm: 8px;
  --ehsync-radius-input: 12px;
  --ehsync-radius-md: 14px;
  --ehsync-radius-lg: 22px;
  --ehsync-radius-control: 999px;
  /* Source Fusion radii from core 0.4.2 tokens.css, if a control needs them */
  --sf-radii-none: 0;
  --sf-radii-sm: 4.5px;
  --sf-radii-base: 6px;
  --sf-radii-md: 9px;
  --sf-radii-lg: 12px;
  --sf-radii-xl: 16px;
  --sf-radii-xl2: 22px;
  --sf-radii-round: 999px;
  --radii-sm: var(--sf-radii-sm);
  --radii-base: var(--sf-radii-base);
  --radii-md: var(--sf-radii-md);
  --radii-lg: var(--sf-radii-lg);
  --radii-xl: var(--sf-radii-xl);
  --radii-round: var(--sf-radii-round);

  /* Layout — iso/tokens.css */
  --pc-sidebar-width: 252px;
  --pc-sidebar-collapsed: 72px;
  --pc-topbar-height: 64px;
  --pc-control-height: 44px;
  --ehsync-logo-width: 158px;
  --ehsync-logo-height: 48px;
  --ehsync-logo-clearance: 18px;
  --ehsync-rail-icon: 32px;

  /* Shadows. ISO iso/tokens.css used rgb(15 27 45 / …) (old #0F1B2D ink).
     Recoloured to navy #00235D, matching admin.css .sign-in .card-basic. */
  --pc-shadow-card: 0 1px 2px rgb(0 35 93 / 4%), 0 12px 32px rgb(0 35 93 / 6%);
  --pc-shadow-modal: 0 24px 64px rgb(0 35 93 / 28%);
  --ehsync-shadow-card: var(--pc-shadow-card);
  --ehsync-shadow-modal: var(--pc-shadow-modal);

  --ehsync-theme-color: #00235D;
}

/* -------------------------------------------------------------------------- */
/* Dark tokens: explicit data-theme, or prefers-color-scheme when unset        */
/* -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ehsync-navy: #00235D;
    --ehsync-blue: #01A7FB;
    --brand-navy: #00235D;
    --brand-primary: #00235D;
    --brand-accent: #01A7FB;
    --brand-hover: #01A7FB;
    --brand-pressed: #00235D;
    --brand-on-primary: #FFFFFF; /* still 15.02:1 on navy fill */
    --brand-link: #01A7FB; /* 6.52:1 on card #001A3D; 7.24:1 on page #000F24; 6.90:1 on tint #001433 */
    --brand-focus: #01A7FB;
    --brand-tint: #001433;

    --ehsync-text: #F4F7FB; /* 17.87:1 on page; 16.08:1 on card; 17.03:1 on tint */
    --ehsync-muted: #C5D0E0; /* 12.32:1 on page; 11.09:1 on card; 11.74:1 on tint */
    --ehsync-page: #000F24;
    --ehsync-card: #001A3D;
    --ehsync-surface: #000F24;
    --ehsync-tint: #001433;
    --ehsync-stroke: #5B82B8; /* 4.87:1 on page; 4.39:1 on card; 4.64:1 on tint (UI 3:1) */
    --pc-ink: #F4F7FB;
    --pc-ink-muted: #C5D0E0;
    --pc-surface: #000F24;
    --pc-surface-card: #001A3D;
    --pc-surface-muted: #001433;
    --pc-stroke: #5B82B8;

    --ehsync-input-border: #5B82B8; /* 4.64:1 on input fill #001433 */
    --ehsync-input-border-hover: #01A7FB;
    --pc-input-border: #5B82B8;
    --pc-input-border-hover: #01A7FB;
    --sf-form-element-border-rest: #5B82B8;
    --sf-button-border-rest: #5B82B8;

    --ehsync-focus-ring: #01A7FB;

    /* Dark status text from core 0.4.2 tokens.css html[data-theme=dark]
       (final cascade, including the later --sf-warning override).
       ISO #157A45 / #B45309 / #B91C1C fail 4.5:1 as text on these navy surfaces. */
    --ehsync-success: #41CB78; /* 8.26:1 on card; 9.18:1 on page; 8.75:1 on tint */
    --ehsync-success-on: #000F24; /* keep dark text on the light green if used as a fill */
    --ehsync-warn: #F5A524; /* 8.47:1 on card; 9.41:1 on page; 8.96:1 on tint */
    --ehsync-warn-on: #000F24;
    --ehsync-danger: #E4A29E; /* 8.20:1 on card; 9.11:1 on page; 8.68:1 on tint */
    --ehsync-danger-on: #000F24;
    /* Button fills may still use the light-mode ISO greens/reds with white text (AA). */
    --pc-success: #41CB78;
    --pc-warning: #F5A524;
    --pc-danger: #E4A29E;

    --ehsync-btn-primary-bg: #00235D;
    --ehsync-btn-primary-fg: #FFFFFF; /* 15.02:1 */
    --ehsync-btn-primary-border: #5B82B8;
    --ehsync-btn-primary-hover-bg: #00235D;
    --ehsync-btn-primary-hover-ring: #01A7FB;
    --ehsync-btn-primary-active-bg: #00102E; /* web --sf-primary-pressed at 9e40aef */
    --ehsync-btn-secondary-bg: #001A3D;
    --ehsync-btn-secondary-fg: #01A7FB; /* 6.52:1 on #001A3D */
    --ehsync-btn-secondary-border: #5B82B8; /* 4.39:1 on card */
    --ehsync-btn-secondary-hover-bg: #001A3D;
    --ehsync-btn-secondary-hover-border: #01A7FB;
    --ehsync-btn-accent-bg: #01A7FB;
    --ehsync-btn-accent-fg: #00235D; /* 5.66:1 */

    --pc-shadow-card: 0 1px 2px rgb(0 0 0 / 35%); /* core 0.4.2 dark iso/tokens.css */
    --pc-shadow-modal: 0 24px 64px rgb(0 0 0 / 45%);
    --ehsync-shadow-card: var(--pc-shadow-card);
    --ehsync-shadow-modal: var(--pc-shadow-modal);

    --ehsync-theme-color: #00235D;
  }
}

html[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  --ehsync-navy: #00235D;
  --ehsync-blue: #01A7FB;
  --brand-navy: #00235D;
  --brand-primary: #00235D;
  --brand-accent: #01A7FB;
  --brand-hover: #01A7FB;
  --brand-pressed: #00235D;
  --brand-on-primary: #FFFFFF;
  --brand-link: #01A7FB;
  --brand-focus: #01A7FB;
  --brand-tint: #001433;

  --ehsync-text: #F4F7FB;
  --ehsync-muted: #C5D0E0;
  --ehsync-page: #000F24;
  --ehsync-card: #001A3D;
  --ehsync-surface: #000F24;
  --ehsync-tint: #001433;
  --ehsync-stroke: #5B82B8;
  --pc-ink: #F4F7FB;
  --pc-ink-muted: #C5D0E0;
  --pc-surface: #000F24;
  --pc-surface-card: #001A3D;
  --pc-surface-muted: #001433;
  --pc-stroke: #5B82B8;

  --ehsync-input-border: #5B82B8;
  --ehsync-input-border-hover: #01A7FB;
  --pc-input-border: #5B82B8;
  --pc-input-border-hover: #01A7FB;
  --sf-form-element-border-rest: #5B82B8;
  --sf-button-border-rest: #5B82B8;

  --ehsync-focus-ring: #01A7FB;

  --ehsync-success: #41CB78;
  --ehsync-success-on: #000F24;
  --ehsync-warn: #F5A524;
  --ehsync-warn-on: #000F24;
  --ehsync-danger: #E4A29E;
  --ehsync-danger-on: #000F24;
  --pc-success: #41CB78;
  --pc-warning: #F5A524;
  --pc-danger: #E4A29E;

  --ehsync-btn-primary-bg: #00235D;
  --ehsync-btn-primary-fg: #FFFFFF;
  --ehsync-btn-primary-border: #5B82B8;
  --ehsync-btn-primary-hover-bg: #00235D;
  --ehsync-btn-primary-hover-ring: #01A7FB;
  --ehsync-btn-primary-active-bg: #00102E;
  --ehsync-btn-secondary-bg: #001A3D;
  --ehsync-btn-secondary-fg: #01A7FB;
  --ehsync-btn-secondary-border: #5B82B8;
  --ehsync-btn-secondary-hover-bg: #001A3D;
  --ehsync-btn-secondary-hover-border: #01A7FB;
  --ehsync-btn-accent-bg: #01A7FB;
  --ehsync-btn-accent-fg: #00235D;

  --pc-shadow-card: 0 1px 2px rgb(0 0 0 / 35%);
  --pc-shadow-modal: 0 24px 64px rgb(0 0 0 / 45%);
  --ehsync-shadow-card: var(--pc-shadow-card);
  --ehsync-shadow-modal: var(--pc-shadow-modal);

  --ehsync-theme-color: #00235D;
}

/* -------------------------------------------------------------------------- */
/* Minimal base rules                                                         */
/* -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--ehsync-page);
  color-scheme: inherit;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ehsync-page);
  color: var(--ehsync-text); /* light 15.02:1 on white / 13.85:1 on page; dark 16.08:1+ */
  font-family: var(--ehsync-font-body);
  font-size: var(--ehsync-font-size-input); /* 16px, from admin.css sign-in inputs */
  font-weight: 400;
  line-height: 1.5; /* derived: ISO control line-heights are tighter (1.2–1.4); 1.5 is for body copy */
}

h1, h2, h3, h4 {
  font-family: var(--ehsync-font-heading);
  font-weight: 700;
  color: var(--ehsync-text); /* same pairs as body text */
  letter-spacing: -0.03em;
  line-height: 1.1;
}

h1 { font-size: var(--ehsync-font-size-page-title); } /* 22px */
h2 { font-size: var(--ehsync-font-size-modal-title); letter-spacing: -0.01em; line-height: 1.3; }
h3, h4 { font-size: var(--ehsync-font-size-body); letter-spacing: -0.01em; line-height: 1.3; }

a {
  color: var(--brand-link); /* light #00235D on white 15.02:1; dark #01A7FB on card 6.52:1 */
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { text-decoration-thickness: 2px; }

button,
.ehsync-btn {
  font-family: inherit;
  font-size: var(--ehsync-font-size-button);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-height: var(--pc-control-height);
  padding: 10px 18px;
  border-radius: var(--ehsync-radius-control);
  border: 1px solid var(--ehsync-btn-primary-border);
  background: var(--ehsync-btn-primary-bg);
  color: var(--ehsync-btn-primary-fg); /* #FFFFFF on #00235D = 15.02:1 */
  cursor: pointer;
}

button:hover:not(:disabled),
.ehsync-btn:hover:not(:disabled),
.ehsync-btn-primary:hover:not(:disabled) {
  background: var(--ehsync-btn-primary-hover-bg);
  box-shadow: inset 0 0 0 2px var(--ehsync-btn-primary-hover-ring); /* #01A7FB on #00235D = 5.66:1 */
}

button:active:not(:disabled),
.ehsync-btn:active:not(:disabled),
.ehsync-btn-primary:active:not(:disabled) {
  background: var(--ehsync-btn-primary-active-bg);
  box-shadow: none;
}

.ehsync-btn-primary {
  background: var(--ehsync-btn-primary-bg);
  color: var(--ehsync-btn-primary-fg);
  border-color: var(--ehsync-btn-primary-border);
}

.ehsync-btn-secondary {
  background: var(--ehsync-btn-secondary-bg);
  color: var(--ehsync-btn-secondary-fg); /* light 15.02:1; dark 6.52:1 */
  border: 1px solid var(--ehsync-btn-secondary-border); /* light 4.36:1; dark 4.39:1 */
}

.ehsync-btn-secondary:hover:not(:disabled) {
  background: var(--ehsync-btn-secondary-hover-bg);
  border-color: var(--ehsync-btn-secondary-hover-border);
  box-shadow: none;
}

/* Accent / promotional button: navy text on #01A7FB (5.66:1). Never white on #01A7FB (2.65:1). */
.ehsync-btn-accent {
  background: var(--ehsync-btn-accent-bg);
  color: var(--ehsync-btn-accent-fg);
  border-color: var(--ehsync-btn-accent-bg);
}

.ehsync-btn-accent:hover:not(:disabled) {
  box-shadow: inset 0 0 0 2px var(--ehsync-navy);
}

button:disabled,
.ehsync-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: var(--ehsync-font-size-input); /* 16px */
  font-weight: 500;
  color: var(--ehsync-text);
  background: var(--ehsync-card);
  border: 1px solid var(--ehsync-input-border); /* light 4.36:1 on white; dark 4.64:1 on #001433 */
  border-radius: var(--ehsync-radius-input);
  min-height: var(--pc-control-height);
  padding: 0 12px;
}

textarea { padding: 10px 12px; min-height: 6rem; }

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--ehsync-input-border-hover);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--ehsync-tint); /* #001433, as in PR #39 .pc-input */
  color: var(--ehsync-text);
  border-color: var(--ehsync-input-border);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input,
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea {
    background: var(--ehsync-tint);
    color: var(--ehsync-text);
    border-color: var(--ehsync-input-border);
  }
}

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--ehsync-focus-ring); /* light #00235D 15.02:1; dark #01A7FB 6.52:1+ */
  outline-offset: var(--ehsync-focus-offset);
}

label {
  color: var(--ehsync-muted); /* light 8.93:1 on white / 8.24:1 on page; dark 11.09:1+ */
  font-size: var(--ehsync-font-size-helper);
  line-height: 1.4;
}

.ehsync-muted,
.ehsync-legal {
  color: var(--ehsync-muted);
}

.ehsync-legal {
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.4;
}

.ehsync-legal a { color: var(--brand-link); }

/* Horizontal lockup, 158×48 CSS px, 18px clear space.
   Light: full-colour lockup; a white panel behind it is optional on light and
   is the default here (PR #39 / Safety 9dee1fd).
   Dark: reversed two-colour lockup, NO panel. Never a one-colour white mark. */
.ehsync-logo {
  display: inline-block;
  flex: none;
  box-sizing: content-box;
  width: 158px;
  height: auto;
  padding: 18px;
  max-width: 100%;
  line-height: 0;
  background: #FFFFFF;
  color-scheme: light;
}

.ehsync-logo > img {
  display: none;
  width: 158px;
  height: 48px;
}

.ehsync-logo > .ehsync-logo-full { display: block; }

html[data-theme="dark"] .ehsync-logo,
[data-theme="dark"] .ehsync-logo {
  background: transparent; /* no panel on dark */
  color-scheme: dark;
}

html[data-theme="dark"] .ehsync-logo > .ehsync-logo-full,
[data-theme="dark"] .ehsync-logo > .ehsync-logo-full { display: none; }

html[data-theme="dark"] .ehsync-logo > .ehsync-logo-full-on-dark,
[data-theme="dark"] .ehsync-logo > .ehsync-logo-full-on-dark { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ehsync-logo {
    background: transparent;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .ehsync-logo > .ehsync-logo-full { display: none; }
  :root:not([data-theme="light"]) .ehsync-logo > .ehsync-logo-full-on-dark { display: block; }
}

/* Optional: skip the white panel on a light background by adding this class. */
.ehsync-logo.ehsync-logo--on-light {
  background: transparent;
}

/* Collapsed rail: icon-only at 32px, keep 256×263 aspect ratio. */
.ehsync-logo--rail,
[data-collapsed="true"] .ehsync-logo {
  width: 32px;
  padding: 12px;
  background: #FFFFFF;
}

.ehsync-logo--rail > .ehsync-logo-full,
.ehsync-logo--rail > .ehsync-logo-full-on-dark,
[data-collapsed="true"] .ehsync-logo > .ehsync-logo-full,
[data-collapsed="true"] .ehsync-logo > .ehsync-logo-full-on-dark { display: none; }

.ehsync-logo--rail > .ehsync-logo-icon,
[data-collapsed="true"] .ehsync-logo > .ehsync-logo-icon {
  display: block;
  width: 32px;
  height: auto;
  aspect-ratio: 256 / 263;
}

html[data-theme="dark"] .ehsync-logo--rail,
html[data-theme="dark"] [data-collapsed="true"] .ehsync-logo,
[data-theme="dark"] .ehsync-logo--rail,
[data-theme="dark"] [data-collapsed="true"] .ehsync-logo {
  background: transparent;
}

html[data-theme="dark"] .ehsync-logo--rail > .ehsync-logo-icon,
html[data-theme="dark"] [data-collapsed="true"] .ehsync-logo > .ehsync-logo-icon,
[data-theme="dark"] .ehsync-logo--rail > .ehsync-logo-icon,
[data-theme="dark"] [data-collapsed="true"] .ehsync-logo > .ehsync-logo-icon { display: none; }

html[data-theme="dark"] .ehsync-logo--rail > .ehsync-logo-icon-on-dark,
html[data-theme="dark"] [data-collapsed="true"] .ehsync-logo > .ehsync-logo-icon-on-dark,
[data-theme="dark"] .ehsync-logo--rail > .ehsync-logo-icon-on-dark,
[data-theme="dark"] [data-collapsed="true"] .ehsync-logo > .ehsync-logo-icon-on-dark {
  display: block;
  width: 32px;
  height: auto;
  aspect-ratio: 256 / 263;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ehsync-logo--rail,
  :root:not([data-theme="light"]) [data-collapsed="true"] .ehsync-logo {
    background: transparent;
  }
  :root:not([data-theme="light"]) .ehsync-logo--rail > .ehsync-logo-icon,
  :root:not([data-theme="light"]) [data-collapsed="true"] .ehsync-logo > .ehsync-logo-icon { display: none; }
  :root:not([data-theme="light"]) .ehsync-logo--rail > .ehsync-logo-icon-on-dark,
  :root:not([data-theme="light"]) [data-collapsed="true"] .ehsync-logo > .ehsync-logo-icon-on-dark {
    display: block;
    width: 32px;
    height: auto;
    aspect-ratio: 256 / 263;
  }
}

/* Stacked logo for empty states and large placeholders: at least 120px wide. */
.ehsync-stacked {
  display: inline-block;
  width: 160px; /* above the 120px minimum */
  line-height: 0;
}

.ehsync-stacked > img { display: none; width: 160px; height: auto; }
.ehsync-stacked > .ehsync-stacked-light { display: block; }

html[data-theme="dark"] .ehsync-stacked > .ehsync-stacked-light,
[data-theme="dark"] .ehsync-stacked > .ehsync-stacked-light { display: none; }
html[data-theme="dark"] .ehsync-stacked > .ehsync-stacked-dark,
[data-theme="dark"] .ehsync-stacked > .ehsync-stacked-dark { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ehsync-stacked > .ehsync-stacked-light { display: none; }
  :root:not([data-theme="light"]) .ehsync-stacked > .ehsync-stacked-dark { display: block; }
}

.ehsync-card {
  background: var(--ehsync-card);
  color: var(--ehsync-text);
  border: 1px solid var(--ehsync-stroke);
  border-radius: var(--ehsync-radius-lg);
  box-shadow: var(--ehsync-shadow-card);
  padding: 14px;
}