/* Phase 88.2 D-03 critical-CSS — auto-generated by scripts/extract-critical-css.js. DO NOT EDIT BY HAND.
   Source: public/styles.css (manifest selectors: 50, rules emitted: 68).
   Re-run: npm run build (chained before esbuild).
   CSP note: externalised from inline <style> to satisfy style-src 'self' (no 'unsafe-inline' needed). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --brand:      #007AFF;
  --brand-dark: #0062CC;
  --blue:       var(--brand);
  --blue-dark:  var(--brand-dark);
  --blue-light: #F0F5FF;
  --blue-bg:    #e8f4f8;
  --green:      #34C759;
  --green-dark: #28A745;
  --green-bg:   #F0FFF4;
  --red:        #FF3B30;
  --red-bg:     #FFF5F5;
  --orange:     #FF9500;
  --orange-bg:  #FFFBF0;
  --amber:      #ffc107;
  --amber-bg:   #fff3cd;
  --gray-50:    #FAFAFA;
  --gray-100:   #F5F5F7;
  --gray-200:   #E8E8ED;
  --gray-300:   #D1D1D6;
  --gray-400:   #AEAEB2;
  --gray-600:   #86868B;
  --gray-700:   #48484A;
  --gray-800:   #1D1D1F;
  --xero-blue:  #13B5EA;
  /* MYOB brand tokens (Phase 68) — wordmark-derived primary, white on-primary, Identi-kit accent */
  --myob-brand-primary:    #6100A5; /* Extracted from official wordmark PNG (Phase 68 path-trace) */
  --myob-brand-on-primary: #FFFFFF; /* White text on MYOB brand background */
  --myob-brand-accent:     #FFDC4B; /* MYOB Identi-kit accent yellow */
  --myob-primary:          #6100A5; /* Phase 78 UX-04 alias — matches src/connections.js pill reference */
  /* Employment Hero brand tokens (Phase 70) — Purple Heart primary, white on-primary, lightened accent */
  --eh-brand-primary:    #7622D7; /* Purple Heart — Employment Hero brand (path-traced fallback, 70-RESEARCH.md) */
  --eh-brand-on-primary: #FFFFFF; /* White text on EH purple — WCAG AAA 7.6:1 */
  --eh-brand-accent:     #8E44E8; /* Primary lightened ~10% for hover/focus */
  --shadow:     0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.06);
  --radius:     12px;
  --radius-sm:  8px;
  --font:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  /* Type scale */
  --text-sm:      12px;
  --text-base:    14px;
  --text-heading: 17px;
  --text-display: 28px;
  /* Min interactive target */
  --min-target: 44px;
  /* Semantic surface tokens — used by dark mode overrides */
  --surface:           #ffffff;
  --surface-secondary: var(--gray-50);
  --surface-elevated:  #ffffff;
  --text-primary:      var(--gray-800);
  --text-secondary:    var(--gray-600);
  --text-muted:        var(--gray-600);
  --border-color:      var(--gray-200);
  /* Transition durations — Phase 102 UX-04 */
  --transition-fast:  150ms ease;
  --transition-base:  200ms ease;
  --transition-slow:  300ms ease;
  /* Z-index scale — Phase 102 UX-05 */
  --z-base:     100;
  --z-dropdown: 200;  /* semantic slot for dropdowns/popovers — Phase 102 D-04 */
  --z-sticky:   300;
  --z-toast:   1000;
  --z-modal:   1100;
  --z-drawer-backdrop: 1300;
  --z-drawer:  1400;
  --z-overlay: 1500;
  --z-auth:    2000;   /* Phase 88.3 CLS gate — DO NOT CHANGE VALUE */
  --z-top:     9999;
  /* Surface & common whites */
  --white:             #ffffff;
  --black:             #000000;
  /* Button hover variants */
  --secondary-hover:   #D8D8DC;
  --danger-hover:      #E0342B;
  --xero-hover:        #0f9dc9;
  /* State badge colors (Australian jurisdictions) */
  --state-vic:   #1B3A5C;
  --state-nt:    #C25700;
  --state-act:   #5A2D82;
  --state-nsw:   #0072CE;
  --state-qld:   #7B003C;
  --state-sa:    #8B5E3C;
  --state-wa:    #1B5E20;
  --state-tas:   #00695C;
  /* Status/badge semantic colors */
  --info-bg:     #E3F2FD;
  --info-text:   #1565C0;
  --source-xero-bg:    #E0F5FD;
  --source-xero-text:  #0B7EA3;
  --source-manual-text: #996300;
  --source-manual-border: rgba(153, 99, 0, 0.2);
  /* OAuth provider colors */
  --oauth-facebook:  #1877f2;
  --oauth-google:    #4285f4;
  --oauth-microsoft: #2f2f2f;
  --oauth-apple:     #000000;
  /* Alert text */
  --alert-amber-text: #6b5900;
  --alert-brown-text: #78350f;
  /* Subtle backgrounds */
  --blue-subtle:  #EBF5FF;
  --amber-subtle: #fffbeb;
  --amber-border:  #f59e0b;
  --alert-brown-dark: #92400e;
  /* OAuth hover variants */
  --oauth-google-text:  #3c4043;
  --oauth-google-border: #dadce0;
  --oauth-google-hover: #f8f9fa;
  --oauth-hover-dark:   #1a1a1a;
  --oauth-facebook-hover: #166fe5;
  /* Diff highlight */
  --diff-changed-bg:  #FFF8E1;
  /* Sandbox dark accents */
  --sandbox-accent: #ffd866;
}
body {
  font-family: var(--font);
  font-size: var(--text-base);
  background: var(--gray-100);
  color: var(--gray-800);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px 24px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  letter-spacing: -0.01em;
  min-height: 44px;
}
.btn:active { transform: scale(0.97); }
.btn:disabled,
.btn[disabled],
.btn-oauth:disabled,
.btn-oauth[disabled],
.btn-danger-sm:disabled,
.btn-danger-sm[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--primary   { background: var(--brand); color: var(--white); }
.btn--primary:hover   { background: var(--brand-dark); }
.btn--outline   { background: transparent; color: var(--gray-600); border: 1px solid var(--gray-300); }
.btn--outline:hover { background: var(--gray-50); color: var(--gray-800); border-color: var(--gray-400); }
.btn--full { width: 100%; }
.connect-prompt { text-align: center; padding: 60px 40px; max-width: 560px; margin: 60px auto; }
.connect-icon { margin-bottom: 16px; line-height: 1; }
.connect-prompt h2 { font-size: var(--text-display); font-weight: 600; margin-bottom: 10px; letter-spacing: -0.02em; }
.connect-prompt p { color: var(--gray-600); margin-bottom: 20px; line-height: 1.6; font-size: var(--text-base); }
.feature-list { text-align: left; display: inline-block; margin-bottom: 24px; list-style: none; }
.feature-list li { padding: 3px 0; color: var(--gray-600); font-size: var(--text-base); }
.form-group { margin-bottom: var(--space-md); }
.form-group label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary, var(--gray-600)); margin-bottom: 6px; }
.form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--gray-800);
  background: var(--white);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,122,255,0.12); }
.form-control::placeholder { color: var(--gray-500, #9ca3af); opacity: 1; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
.sr-only:focus,
.sr-only:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--brand);
  color: var(--white);
  z-index: var(--z-top);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.btn--secondary.btn-loading::after,
.btn--outline.btn-loading::after {
  border-color: var(--gray-600);
  border-top-color: transparent;
}
.auth-overlay {
  position: fixed;
  inset: 0;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-auth); /* Phase 88.3 CLS gate — value MUST remain 2000 */
}
.auth-overlay.hidden { display: none !important; }
.auth-overlay.auth-pending .auth-box { visibility: hidden; }
.auth-overlay:not(.hidden) ~ main.container { visibility: hidden; }
.auth-box {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  padding: 36px 44px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  min-height: 588px; /* Phase 88.1 W1 CLS fix — reserve final rendered height so flex-centered auth-box doesn't reflow as JS-populated content (oauth, branding) streams in (DevTools-observed shifts 0.1248 + 0.0397, node 18) */
}
.auth-logo { margin-bottom: 18px; min-height: 48px; /* Phase 88.1 W1 CLS fix — reserve brand-mark slot during loadBranding() display flip (matches .auth-logo img max-height:48px line 825) */ }
.auth-logo img { max-height: 48px; max-width: 180px; object-fit: contain; }
.auth-logo-text { font-size: var(--text-heading); font-weight: 600; color: var(--brand); display: inline-block; letter-spacing: -0.02em; }
.auth-box h2 { font-size: var(--text-heading); font-weight: 600; margin: 10px 0 5px; color: var(--gray-800); letter-spacing: -0.01em; }
.auth-box p.auth-sub { font-size: var(--text-base); color: var(--gray-600); margin-bottom: 22px; }
.auth-box .form-group { text-align: left; }
.auth-error {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 0.9em;
  color: var(--red);
  display: none;
}
.auth-error.visible { display: block; }
.required-mark { color: var(--red); font-weight: 700; margin-left: 2px; }
@media (max-width: 600px) {
.auth-overlay { align-items: flex-start; overflow-y: auto; padding-block: clamp(24px, 5.5vh, 72px) 24px; }
.auth-box { padding: 24px 18px; }
.auth-box { min-height: calc(48px + 18px + 36px + 43px + (2 * 82px) + 56px + 35px + (4 * 44px + 3 * 0.625rem) + 35px + 44px + 48px); }
.auth-box .oauth-buttons { min-height: calc(4 * 44px + 3 * 0.625rem); }
}
.btn, input[type="text"], input[type="password"],
input[type="email"], input[type="number"],
select, textarea { min-height: var(--min-target, 44px); }
.btn.btn-sm { min-height: 32px; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    --surface:           #1C1C1E;
    --surface-secondary: #2C2C2E;
    --surface-elevated:  #3A3A3C;
    --text-primary:      #F2F2F7;
    --text-secondary:    #AEAEB2;
    --text-muted:        #636366;
    --border-color:      #38383A;
    --shadow:            0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:         0 2px 8px rgba(0,0,0,0.4);
    --gray-50:    #1C1C1E;
    --gray-100:   #2C2C2E;
    --gray-200:   #38383A;
    --gray-400:   #636366;
    --gray-600:   #AEAEB2;
    --gray-800:   #F2F2F7;
    --white: #1C1C1E;
    --black: #000000;
    --secondary-hover: #48484A;
    --danger-hover: #FF453A;
    --xero-hover: #15C3FC;
  }
:root:not([data-theme="light"]) body {
    background: var(--black);
    color: var(--text-primary);
  }
}
.oauth-error {
  color: var(--danger, #dc2626);
  background: var(--danger-bg, #fef2f2);
  border: 1px solid var(--danger-border, #fecaca);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.85rem;
}
.oauth-divider,
.login-divider { display: flex; align-items: center; margin: 1.25rem 0; color: var(--gray-700, #374151); font-size: 0.85rem; }
.oauth-divider::before, .oauth-divider::after,
.login-divider::before, .login-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.oauth-divider span, .login-divider span { padding: 0 0.75rem; }
.oauth-buttons {
  display: grid;
  /* Auto-fit so a single configured provider spans the full width; 2+ providers wrap into columns. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0.625rem;
  min-height: 44px; /* Phase 88.1 W1 CLS fix — reserve OAuth-button row height so /api/auth/providers populating doesn't reflow the auth-box (DevTools-observed shift 0.1248) */
}
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  min-height: 44px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  width: 100%;
  /* Prevent "Sign in with / Xero" from wrapping onto two lines in narrow cells. */
  white-space: nowrap;
}
.btn-oauth:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.btn-oauth:active { transform: translateY(1px); }
.btn-oauth:focus-visible,
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-oauth-xero { background: #13B5EA; color: #fff; border-color: #13B5EA; }
.btn-oauth-xero:hover { background: #0FA2D1; border-color: #0FA2D1; }
@media (max-width: 380px) {
.oauth-buttons { grid-template-columns: 1fr; }
}
.btn-oauth-google { background: var(--white); color: var(--oauth-google-text); border-color: var(--oauth-google-border); }
.btn-oauth-google:hover { background: var(--oauth-google-hover); }
.btn-oauth-microsoft { background: var(--oauth-microsoft); color: var(--white); border-color: var(--oauth-microsoft); }
.btn-oauth-microsoft:hover { background: var(--oauth-hover-dark); }
.btn-oauth-apple { background: var(--oauth-apple); color: var(--white); border-color: var(--oauth-apple); }
.btn-oauth-apple:hover { background: var(--oauth-hover-dark); }
.btn-oauth-facebook { background: var(--oauth-facebook); color: var(--white); border-color: var(--oauth-facebook); }
.btn-oauth-facebook:hover { background: var(--oauth-facebook-hover); }
.oauth-icon { width: 20px; height: 20px; flex-shrink: 0; }
body.has-tfa-banner { padding-top: 36px !important; }