/* ==========================================================================
   Fllo — HIG token layer (loaded last on every page).
   One shared vocabulary for spacing, radius, type, materials, elevation and
   motion, applied as a light-touch refinement on top of the existing styles.
   Liquid Glass is reserved for chrome (nav bars, toolbars, sheets, popovers);
   dense content keeps solid surfaces so text stays crisp and AA-contrast.
   Every glass rule has a solid fallback (no backdrop-filter support, reduced
   transparency, low-end / data-motion="off" devices).
   ========================================================================== */
/* Tokens (--hig-*) live in visual-identity.css with the other brand tokens. */

/* ---------- 1. Glass chrome: top navigation bar and popovers (with solid fallbacks).
   The phone bottom bar stays opaque on purpose: it floats over dense lead cards. ---------- */
html body #appNavbar .card.header,
html body .profile-menu-panel {
  background: var(--hig-glass-solid) !important;
  border: 1px solid var(--hig-glass-line) !important;
  box-shadow: inset 0 1px 0 var(--hig-glass-edge), var(--hig-shadow-2) !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not([data-motion="off"]) body :is(#appNavbar .card.header, .profile-menu-panel) {
    background: var(--hig-glass-bg) !important;
    -webkit-backdrop-filter: var(--hig-glass-blur) !important;
    backdrop-filter: var(--hig-glass-blur) !important;
  }
}
/* Nested panels inside the bar must not stack a second blur (cheap on old tablets). */
html body #appNavbar .card.header .tabs { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (prefers-reduced-transparency: reduce) {
  html body :is(#appNavbar .card.header, .profile-menu-panel) {
    background: var(--hig-glass-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ---------- 3. Typography: consistent page-title rhythm ---------- */
html body :is(h1, h2, h3) { letter-spacing: -.01em; }
html[dir="rtl"] body :is(h1, h2, h3) { letter-spacing: 0; }
html body :is(.sub, .section-copy, .lead-note) { line-height: 1.5; }

/* ---------- 4. Touch targets: grow hit areas without changing layout ---------- */
@media (pointer: coarse) {
  html body :is(.lead-delete-corner, .fllo-open-details-v13, #flloBoardViewBtn, #flloListViewBtn, .quick-actions button, .support-close, .fllo-theme-toggle) { position: relative; }
  html body :is(.lead-delete-corner, .fllo-open-details-v13, #flloBoardViewBtn, #flloListViewBtn, .quick-actions button, .support-close, .fllo-theme-toggle)::before {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    width: max(100%, var(--hig-hit)); height: max(100%, var(--hig-hit));
    transform: translate(-50%, -50%); background: none; pointer-events: auto;
  }
  html body .quick-actions { overflow: visible; }
}

/* ---------- 5. Focus: one ring, visible in both themes ---------- */
html body :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--hig-focus) !important; outline-offset: 1px !important;
}

/* ---------- 6. Motion: shared durations, honour reduced motion ---------- */
html[data-motion="on"] body :is(.btn, .tab, .chip, .filter-chip, .mobile-bottom-nav a) {
  transition-timing-function: var(--hig-ease);
}
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
html[data-motion="off"] body *, html[data-motion="off"] body *::before, html[data-motion="off"] body *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

/* ---------- 7. Dark mode contrast: secondary text and placeholders >= AA ---------- */
html[data-theme="dark"] body :is(.sub, .lead-note, .section-copy) { color: #a9b4c6; }
html[data-theme="dark"] body :is(input, textarea)::placeholder { color: rgba(255, 255, 255, .5); }

/* Dashboard filter bar, "Specific day": the date sits beside the range select so the cell keeps
   the same height as its neighbours and every control shares one bottom edge. The calendar hint and
   the spelled-out date stay available to assistive tech (aria-describedby / aria-live) only. */
html body #flloLeadBrowser .fllo-lead-browser-row > div:has(> .fllo-native-date:not([hidden])) {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 8px;
  align-content: end; align-items: end; grid-column: span 2; min-width: 0;
}
html body #flloLeadBrowser .fllo-lead-browser-row > div:has(> .fllo-native-date:not([hidden])) > label { grid-column: 1 / -1; }
html body #flloLeadBrowser .fllo-lead-browser-row > div > .fllo-native-date { display: block; gap: 0; flex: none; min-width: 0; margin: 0; }
html body #flloLeadBrowser .fllo-lead-browser-row > div > .fllo-native-date[hidden] { display: none !important; }
html body #flloLeadBrowser .fllo-lead-browser-row .fllo-native-date :is(.fllo-date-hint, .fllo-date-preview) {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 860px) {
  html body #flloLeadBrowser .fllo-lead-browser-row > div:has(> .fllo-native-date:not([hidden])) { grid-column: 1 / -1; }
}