/* Probate Tracker modernization layer.
Additive only. Every rule either adds a capability the app did not have, or
corrects a default that only mattered because the page used to render in
quirks mode. Nothing here changes existing layout or color decisions. */

/* 1. Native browser UI follows the app theme.
Without this the browser paints scrollbars, dropdowns, date pickers and
autofilled fields in light chrome regardless of the theme, which is why an
autofilled login field showed up as a pale blue box. */
:root{ color-scheme: light dark; }
html[data-theme="light"]{ color-scheme: light; }
html[data-theme="dark"]{ color-scheme: dark; }

/* Checkboxes, radios, range and progress pick up the brand accent. */
:root{ accent-color: var(--gold); }

/* Stop the page shifting sideways when a scrollbar appears and disappears. */
html{ scrollbar-gutter: stable; }

/* 2. Correct viewport height on phones.
100vh ignores the mobile browser toolbar, so full height panes were taller
than the screen and jumped while scrolling. dvh tracks the visible area. */
body, .app-shell, .login-wrap{ min-height: 100dvh; }
.modal-card{ max-height: 88dvh; }
.ai-window{ height: min(540px, 70dvh); }
.a11y-body{ max-height: 70dvh; }

/* 3. Respect the notch and the home indicator on modern phones. */
@supports (padding: max(0px)){
  .login-wrap{ padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .app-shell{ padding-bottom: env(safe-area-inset-bottom); }
}

/* 4. Keyboard focus is visible again.
Focus rings only appear for keyboard and assistive tech users, never on a
mouse click, so this costs nothing visually and makes the app usable
without a pointer. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
:where(a, button, input, select, textarea, [tabindex]):focus:not(:focus-visible){ outline: none; }

/* 5. Honour the operating system reduced motion setting.
The app already has a manual toggle. This makes it automatic for anyone who
has asked their device for less movement, which includes people prone to
motion sickness and vestibular disorders. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #aurora{ display: none; }
}

/* 6. Figures line up.
Tabular numerals give every digit the same width, so money columns, scores
and counts align vertically instead of drifting. */
table, .kpi-grid, .kpi-val, .badge, .pill, .money, td, th{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 7. Better line breaking.
Headings avoid a single orphaned word on the last line, body copy avoids
short widow lines. */
h1, h2, h3, h4, .panel-h h3{ text-wrap: balance; }
p, .sub, .disclosure, .alert{ text-wrap: pretty; }

/* 8. Scrolling containers stop stealing the page scroll. */
.tbl-wrap, .ai-window, .a11y-body, #notifDropdown, #pepUpdatesList{
  overscroll-behavior: contain;
}

/* 9. Touch behaviour.
Removes the grey flash on tap and guarantees controls are large enough to
hit reliably on a phone. */
@media (pointer: coarse){
  *{ -webkit-tap-highlight-color: transparent; }
  button, .btn, .btn-sm, .btn-ghost, .btn-gold, .nav-item, a.btn{ min-height: 40px; }
  input, select, textarea{ font-size: 16px; }
}

/* 10. Selection colour matches the brand instead of the browser default. */
::selection{ background: color-mix(in srgb, var(--gold) 30%, transparent); }

/* 11. Autofilled fields keep the app styling instead of the browser yellow
or blue block. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--panel2) inset;
  caret-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;
}

/* 13. Printing a lead, script or letter drops the app chrome. */
@media print{
  .rail, .topbar, #aurora, #aiDock, .btn, .btn-sm, .btn-ghost, .btn-gold,
  #notifDropdown, .pt-i, .pt-pop{ display: none !important; }
  body, .panel{ background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .panel{ border: 1px solid #ccc !important; break-inside: avoid; }
}