/* Incremental readability pass, October 2026.
   Only visible site/demo wrappers opt in; the experiments keep their original CSS.
   Layout, brand typography, content, imagery and corner radii stay with each page. */
html:has([data-hios-ui="site"]) {
  --color-bg: #f5f6f8;
  --color-card: #fff;
  --color-text: #16181c;
  --color-subtext: #4d535d;
  --color-border: rgba(29, 38, 53, .15);
  --text-primary: #16181c;
  --text-secondary: #4d535d;
  --text-muted: #5e6570;
  --text-subtle: #5e6570;
  --hios-canvas: #f5f6f8;
  --hios-glass-fill: rgba(170, 197, 217, .08);
  --hios-glass-solid: #fff;
  --hios-field-fill: rgba(255, 255, 255, .94);
  --hios-glass-blur: none;
  --hios-glass-shadow: 0 6px 22px rgba(28, 39, 57, .06);
  --hios-glass-shadow-hover: 0 8px 24px rgba(28, 39, 57, .08);
  --hios-rim-light: rgba(255, 255, 255, .92);
  --hios-rim-shade: rgba(44, 54, 72, .12);
  background: var(--hios-canvas);
}
html[data-theme="dark"]:has([data-hios-ui="site"]) {
  --color-bg: #0d1016;
  --color-card: #191f29;
  --color-text: #f4f6fa;
  --color-subtext: #c2c8d2;
  --color-border: rgba(216, 226, 245, .2);
  --text-primary: #f4f6fa;
  --text-secondary: #c2c8d2;
  --text-muted: #a8b0bd;
  --text-subtle: #a8b0bd;
  --hios-canvas: #0d1016;
  --hios-glass-fill: rgba(156, 190, 214, .06);
  --hios-glass-solid: #191f29;
  --hios-field-fill: rgba(17, 23, 33, .94);
  --hios-glass-shadow: 0 6px 22px rgba(0, 0, 0, .16);
  --hios-glass-shadow-hover: 0 8px 24px rgba(0, 0, 0, .2);
  --hios-rim-light: rgba(226, 237, 255, .32);
  --hios-rim-shade: rgba(0, 0, 0, .18);
}
/* Broad, stationary light falloff. The old grid no longer crosses the reading area. */
html:has([data-hios-ui="site"])::before {
  inset: 0;
  background: radial-gradient(ellipse 80% 55% at 0% 0%, rgba(205, 219, 238, .22), transparent 70%), radial-gradient(ellipse 65% 50% at 100% 95%, rgba(224, 226, 238, .15), transparent 75%), var(--hios-canvas);
  background-size: auto;
}
html[data-theme="dark"]:has([data-hios-ui="site"])::before {
  background: radial-gradient(ellipse 80% 55% at 0% 0%, rgba(73, 98, 140, .12), transparent 70%), radial-gradient(ellipse 65% 50% at 100% 95%, rgba(91, 87, 126, .07), transparent 75%), var(--hios-canvas);
}
html:has([data-hios-ui="site"])::after {
  inset: 0;
  background: url("/noise-light.png") repeat;
  background-size: 200px 200px;
  opacity: .12;
  transition: none;
}
html[data-theme="dark"]:has([data-hios-ui="site"])::after { background-image: url("/noise.png"); opacity: .09; }
[data-hios-ui="site"] p { text-wrap: pretty; }
[data-hios-ui="site"] :is(p.text-lg, p.text-xl) { line-height: 1.65; }
[data-hios-ui="site"] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 4px;
}
[data-hios-ui="site"] :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
/* Glass is a background treatment. Foreground type never enters the SVG filter. */
html:has([data-hios-ui="site"]) [data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav) {
  background: var(--hios-glass-fill);
  box-shadow: var(--hios-glass-shadow) !important;
  backdrop-filter: var(--hios-glass-blur);
  -webkit-backdrop-filter: var(--hios-glass-blur);
  will-change: auto;
}
html:has([data-hios-ui="site"]) [data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav):hover { box-shadow: var(--hios-glass-shadow-hover) !important; }
/* Existing inline underlays used 1px blur; the parent now supplies the full material. */
[data-hios-ui="site"] .liquidGlass-wrapper > span:first-child {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}
/* No decorative inner rim: the rounded silhouette comes from the surface. */
[data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav)::before,
[data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav)::after {
  display: none !important;
}
[data-hios-ui="site"] nav .liquidGlass-wrapper { background: var(--hios-glass-fill); }
[data-hios-ui="site"] nav .liquidGlass-wrapper:hover { transform: none; }
[data-hios-ui="site"] nav a { text-shadow: none; }
[data-hios-ui="site"] nav a.text-sm { display: inline-flex; align-items: center; min-height: 44px; }
[data-hios-ui="site"] input.glass { background: var(--hios-field-fill) !important; }
/* Direct backdrop refraction in Chromium; clear tinted material in other engines.
   No copied scene, scroll alignment, or delayed content refresh. */
.hios-nav-optics { visibility:hidden; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; }
[data-hios-ui="site"] .hios-nav-optics[data-hios-refraction-ready] { visibility:visible; }
html:has([data-hios-ui="site"]) [data-hios-navigation] .liquidGlass-wrapper:has([data-hios-refraction-ready]) {
  background:transparent;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  isolation:isolate;
}
[data-hios-ui="site"] [data-hios-navigation] .liquidGlass-wrapper:has([data-hios-refraction-ready])::after { display:none; }
[data-hios-ui="site"] [data-hios-navigation] .liquidGlass-wrapper::before { z-index:2; }
.hios-nav-tint {
  position:absolute; inset:0; border-radius:inherit;
  background:var(--hios-glass-fill);
  box-shadow:none;
}
/* Coarse-pointer devices and narrow viewports use one stable native material.
   The tint stays clear; no phone blur or displacement maps. */
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
  html:has([data-hios-ui="site"]) { --hios-glass-blur: none; }
  html:has([data-hios-ui="site"]) [data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav, .hios-liquid-surface) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html:has([data-hios-ui="site"]) [data-hios-navigation] .liquidGlass-wrapper {
    background: var(--hios-glass-fill);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  [data-hios-ui="site"] .hios-nav-optics { display: none; }
}
/* Keep the same floating bar, with a real route menu when desktop links hide. */
.hios-menu-toggle { display:none; }
.hios-mobile-menu {
  position:fixed; inset:108px 24px auto; margin:0 auto; width:calc(100% - 48px); max-width:420px;
  max-height:calc(100dvh - 132px); overflow:auto; padding:12px 16px 20px;
  border:1px solid var(--color-border); border-radius:24px;
  background:rgba(250,251,253,.97); color:var(--text-primary);
  box-shadow:0 18px 54px rgba(15,22,36,.18);
}
html[data-theme="dark"] .hios-mobile-menu { background:rgba(20,25,34,.98); }
.hios-mobile-menu::backdrop { background:rgba(6,10,18,.38); }
.hios-menu-heading { display:flex; align-items:center; justify-content:space-between; font-size:18px; font-weight:650; padding-bottom:8px; }
.hios-menu-heading button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:transparent; color:inherit; cursor:pointer; }
.hios-menu-section { display:grid; }
.hios-menu-section + .hios-menu-section { border-top:1px solid var(--color-border); margin-top:12px; padding-top:12px; }
.hios-menu-section a { display:flex; align-items:center; min-height:48px; padding:10px 12px; border-radius:12px; text-decoration:none; color:inherit; font-size:16px; }
.hios-menu-section a:hover { background:rgba(127,127,127,.1); }
.hios-menu-label { color:var(--text-secondary); padding:6px 12px; font-size:13px; }
.hios-mobile-menu :focus-visible { outline:2px solid var(--text-primary); outline-offset:2px; }
@media(max-width:767px) {
  [data-hios-ui="site"] [data-hios-navigation] .hios-nav-content { padding:16px; }
  [data-hios-ui="site"] [data-hios-navigation] .hios-nav-brand { gap:8px; min-width:0; }
  [data-hios-ui="site"] [data-hios-navigation] .hios-nav-brand img { width:40px!important; height:40px!important; }
  [data-hios-ui="site"] [data-hios-navigation] .hios-nav-brand span { font-size:clamp(15px,4.2vw,18px); letter-spacing:-.02em; }
  [data-hios-ui="site"] .hios-menu-toggle { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; border-radius:50%; color:var(--text-primary); background:transparent; cursor:pointer; }
}
/* Brand demos share the clarity/material improvements while keeping their own palettes. */
[data-hios-ui="demo"] { text-rendering: optimizeLegibility; }
[data-hios-ui="demo"] :is(p, address) { text-wrap: pretty; }
[data-hios-ui="demo"] .concept-strip {
  font-size: 14px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
[data-hios-ui="demo"] .concept-strip a { min-height: 44px; display: inline-flex; align-items: center; }
[data-hios-ui="demo"] .button-secondary {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 5%, transparent);
}
[data-hios-ui="demo"] :is(.footer-note, .source-notes) { font-size: 14px; line-height: 1.7; }
[data-hios-ui="demo"] :is(input, select, textarea) { background: var(--background); }
@media (prefers-reduced-motion: reduce) {
  html:has([data-hios-ui]) { scroll-behavior: auto; }
  [data-hios-ui] *, [data-hios-ui] *::before, [data-hios-ui] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-hios-ui] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav):hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html:root:has([data-hios-ui="site"]) [data-hios-navigation] .liquidGlass-wrapper {
    background: var(--hios-glass-solid) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  [data-hios-ui="site"] .hios-nav-optics[data-hios-refraction-ready] { display:none; }
  html:has([data-hios-ui="site"]) { --hios-glass-fill: var(--hios-glass-solid); --hios-field-fill: var(--hios-glass-solid); --hios-glass-blur: none; --text-muted: var(--text-primary); --text-subtle: var(--text-primary); }
  /* Accessibility preferences take priority over the legacy control panel's inline blur. */
  [data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  html:has([data-hios-ui="site"])::after { opacity: 0; }
  [data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav)::after { display: none; }
  [data-hios-ui="demo"] :is(.concept-strip, .button-secondary) { background: var(--background); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:has([data-hios-ui="site"]) { --hios-glass-fill: var(--hios-glass-solid); }
  [data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav)::after { display: none; }
}
@media (forced-colors: active) {
  html:root:has([data-hios-ui="site"]) [data-hios-navigation] .liquidGlass-wrapper { background: Canvas !important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  [data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav) { border: 1px solid CanvasText; }
  [data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav)::before,
  [data-hios-ui="site"] :is(.liquidGlass-wrapper, .glass, .glass-strong, .glass-subtle, .glass-nav)::after { display: none; }
}

/* Reference: HiOS Local Business Previews. Quiet paper, lighter display type,
   existing page structure and liquid-glass surfaces. Experiments do not opt in. */
html:has([data-hios-ui="site"]) {
  --hios-canvas: #f5f7f6;
  --color-bg: #f5f7f6;
  --color-text: #1b2621;
  --text-primary: #1b2621;
  --hios-rim-light: transparent;
  --hios-rim-shade: transparent;
  --glow-blue: rgba(105,133,130,.035);
  --glow-purple: rgba(105,133,130,.025);
}
html[data-theme="dark"]:has([data-hios-ui="site"]) {
  --hios-canvas: #101614;
  --color-bg: #101614;
  --color-text: #f4f6fa;
  --text-primary: #f4f6fa;
  --glow-blue: rgba(105,133,130,.035);
  --glow-purple: rgba(105,133,130,.025);
}
html:has([data-hios-ui="site"])::before,
html[data-theme="dark"]:has([data-hios-ui="site"])::before { background: var(--hios-canvas); }
html:has([data-hios-ui="site"])::after,
html[data-theme="dark"]:has([data-hios-ui="site"])::after { opacity: .025; }
[data-hios-ui="site"], [data-hios-ui="site"] main {
  font-family: 'Avenir Next', Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html [data-hios-ui="site"] h1 { font-family: inherit; font-weight: 500; letter-spacing: -.055em; line-height: 1.07; }
html [data-hios-ui="site"] h2 { font-family: inherit; font-weight: 550; letter-spacing: -.035em; }
html [data-hios-ui="site"] [data-hios-navigation] .liquidGlass-wrapper { border-color: transparent; }
@media (forced-colors: active) {
  html [data-hios-ui="site"] [data-hios-navigation] .liquidGlass-wrapper { border-color: CanvasText; }
}