/* ============================================================================
   imranosoft-theme.css — Imranosoft shared design system
   Plan_20260806_v2.md v2.4a, section 7. Built at W2.

   ISOLATION CONTRACT (section 7.1) — this file contains ZERO bare element
   selectors. Every rule is namespaced `.io-*` (or `:root`, which only declares
   custom properties and paints nothing by itself). It therefore cannot leak
   into the body of any existing page when W4 injects the shared shell.
   ONE DELIBERATE EXCEPTION (2026-09-26): `:root` also sets scroll-padding-top,
   because the sticky shell header would otherwise cover the target of every
   in-page link. It paints nothing; it only moves where an anchor jump stops.
   Only the three new full pages (/, liteview2.html, litegrid.html) style
   elements freely, and they do so in their own page-level <style> blocks.

   CASCADE (7.2): existing pages load their current CSS first, this file last.
   FONTS  (7.4): Windows-native stacks only. No webfonts, no CDN.
   MOTION (7.8): all transitions inside prefers-reduced-motion: no-preference.
   PRINT  (7.6): @media print hides shell nav/footer.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --io-ink: #0F1620;
  --io-paper: #F4F7FB;
  --io-surface: #FFFFFF;
  --io-surface-2: #E8EEF5;
  --io-text: #16202E;
  --io-text-dim: #56677D;
  --io-accent: #B96B2E;
  --io-accent-ink: #FFFFFF;
  --io-accent-tint: rgba(185, 107, 46, .14);
  /* Text-on-tint accent. The plain --io-accent measures only 3.6:1 on its own
     tint in the light theme, which fails the 4.5:1 gate (section 13.3); this
     darker pair measures 5.8:1. In the dark theme the normal accent already
     measures 5.5:1 on tint, so it is reused unchanged. */
  --io-accent-strong: #8A4E1F;
  --io-line: #D7E0EA;
  --io-ok: #3F8A5C;
  --io-ok-tint: rgba(63, 138, 92, .14);
  --io-ok-strong: #2F6B45;
  --io-shadow: 0 1px 2px rgba(15, 22, 32, .04), 0 8px 24px rgba(15, 22, 32, .06);
  --io-radius: 3px;
  --io-header-h: 64px;

  --io-font-display: Cambria, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --io-font-ui: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, sans-serif;
  --io-font-mono: "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --io-paper: #0F1620;
    --io-surface: #16202E;
    --io-surface-2: #1C2836;
    --io-text: #E8ECF1;
    --io-text-dim: #8FA0B3;
    --io-accent: #E0A458;
    --io-accent-ink: #17130C;
    --io-accent-tint: rgba(224, 164, 88, .16);
    --io-accent-strong: #E0A458;
    --io-line: #2A3A4D;
    --io-ok: #5FB981;
    --io-ok-tint: rgba(95, 185, 129, .16);
    --io-ok-strong: #5FB981;
    --io-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  }
}

/* Explicit choice always wins over the OS preference, in both directions. */
:root[data-theme="dark"] {
  --io-paper: #0F1620;
  --io-surface: #16202E;
  --io-surface-2: #1C2836;
  --io-text: #E8ECF1;
  --io-text-dim: #8FA0B3;
  --io-accent: #E0A458;
  --io-accent-ink: #17130C;
  --io-accent-tint: rgba(224, 164, 88, .16);
  --io-accent-strong: #E0A458;
  --io-line: #2A3A4D;
  --io-ok: #5FB981;
  --io-ok-tint: rgba(95, 185, 129, .16);
  --io-ok-strong: #5FB981;
  --io-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
}
:root[data-theme="light"] {
  --io-paper: #F4F7FB;
  --io-surface: #FFFFFF;
  --io-surface-2: #E8EEF5;
  --io-text: #16202E;
  --io-text-dim: #56677D;
  --io-accent: #B96B2E;
  --io-accent-ink: #FFFFFF;
  --io-accent-tint: rgba(185, 107, 46, .14);
  --io-accent-strong: #8A4E1F;
  --io-line: #D7E0EA;
  --io-ok: #3F8A5C;
  --io-ok-tint: rgba(63, 138, 92, .14);
  --io-ok-strong: #2F6B45;
  --io-shadow: 0 1px 2px rgba(15, 22, 32, .04), 0 8px 24px rgba(15, 22, 32, .06);
}

/* ---------------------------------------------------- anchor offset --- */
/* The shell header is sticky (see .io-shell), so an in-page link would scroll its
   target under it. This reserves the header height plus 24 px on every shell page.
   :root outranks the older page-level html{scroll-padding-top} values (docs
   76 px, cookbooks 24 px), which were set before the 64 px shell header existed. */
:root {
  scroll-padding-top: calc(var(--io-header-h) + 24px);
}

/* ------------------------------------------------------- skip / a11y --- */
.io-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--io-accent-strong);
  color: var(--io-accent-ink);
  padding: 10px 18px;
  border-radius: 0 0 var(--io-radius) 0;
  font-family: var(--io-font-ui);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.io-skip:focus {
  left: 0;
}
.io-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------- shell --- */
.io-shell {
  font-family: var(--io-font-ui);
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--io-paper);
  border-bottom: 1px solid var(--io-line);
}
.io-shell *,
.io-footer * {
  box-sizing: border-box;
}
/* Several legacy pages have pre-existing horizontal content overflow at
   narrow widths. Without this, the overflowed body stretches the shell and
   pushes the mobile burger off-screen; pinning the chrome to the viewport
   keeps it reachable while the page content scrolls beneath it. */
.io-shell,
.io-ctx,
.io-footer {
  position: sticky;
  left: 0;
  max-width: 100vw;
}
.io-shell-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--io-header-h);
}
.io-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.io-brand-lockup {
  height: 40px;
  width: auto;
  display: block;
  margin-left: -12px;
}

/* -------------------------------------------------------------- nav ---- */
.io-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
}
.io-nav a {
  color: var(--io-text-dim);
  text-decoration: none;
  font-family: var(--io-font-ui);
}
.io-nav a:hover {
  color: var(--io-text);
}
.io-nav a[aria-current="page"] {
  color: var(--io-text);
  font-weight: 600;
}
.io-nav-soon {
  color: var(--io-text-dim);
  font-size: 14px;
  white-space: nowrap;
  cursor: default;
}

/* Products dropdown: <details>/<summary>, fully usable with JS disabled. */
.io-menu {
  position: relative;
}
.io-menu > summary {
  list-style: none;
  cursor: pointer;
  color: var(--io-text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.io-menu > summary::-webkit-details-marker {
  display: none;
}
.io-menu > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.io-menu[open] > summary,
.io-menu > summary:hover {
  color: var(--io-text);
}
.io-menu-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  min-width: 248px;
  background: var(--io-surface);
  border: 1px solid var(--io-line);
  border-radius: var(--io-radius);
  box-shadow: var(--io-shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.io-menu-panel a,
.io-menu-panel .io-nav-soon {
  padding: 9px 12px;
  border-radius: var(--io-radius);
  display: block;
  font-size: 14px;
}
.io-menu-panel a:hover {
  background: var(--io-surface-2);
  color: var(--io-text);
}
.io-menu-panel .io-menu-desc {
  display: block;
  font-size: 12px;
  color: var(--io-text-dim);
  margin-top: 2px;
}

/* --------------------------------------------------- theme toggle ------ */
.io-theme-toggle {
  background: transparent;
  border: 1px solid var(--io-line);
  color: var(--io-text-dim);
  border-radius: var(--io-radius);
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-family: var(--io-font-ui);
  flex: none;
}
.io-theme-toggle:hover {
  color: var(--io-text);
  border-color: var(--io-text-dim);
}
.io-theme-toggle svg {
  width: 16px;
  height: 16px;
}
.io-theme-toggle .io-icon-sun {
  display: none;
}
:root[data-theme="dark"] .io-theme-toggle .io-icon-sun {
  display: block;
}
:root[data-theme="dark"] .io-theme-toggle .io-icon-moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .io-theme-toggle .io-icon-sun {
    display: block;
  }
  :root:not([data-theme="light"]) .io-theme-toggle .io-icon-moon {
    display: none;
  }
}

/* ------------------------------------------------- product context row - */
.io-ctx {
  background: var(--io-surface-2);
  border-bottom: 1px solid var(--io-line);
  font-family: var(--io-font-ui);
}
.io-ctx-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 42px;
  flex-wrap: wrap;
}
.io-ctx-label {
  font-family: var(--io-font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--io-accent-strong);
  font-weight: 600;
  flex: none;
}
.io-ctx-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.io-ctx-links a {
  font-size: 13.5px;
  color: var(--io-text-dim);
  text-decoration: none;
}
.io-ctx-links a:hover {
  color: var(--io-text);
}
.io-ctx-links a[aria-current="page"] {
  color: var(--io-text);
  font-weight: 600;
}

/* Availability pill: carries TEXT, never colour alone (section 13.3). */
.io-pill {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--io-surface);
  color: var(--io-text-dim);
  border: 1px solid var(--io-line);
}
.io-pill-soon {
  background: var(--io-accent-tint);
  color: var(--io-accent-strong);
  border-color: transparent;
}
.io-pill-live {
  background: var(--io-ok-tint);
  color: var(--io-ok-strong);
  border-color: transparent;
}
.io-price-was {
  color: var(--io-text-dim);
  font-weight: 500;
  text-decoration-thickness: 1.5px;
}
.io-pill .io-price-was {
  color: inherit;
}
.io-price-now {
  color: var(--io-text);
  font-weight: 800;
}
.io-price-note {
  color: var(--io-ok-strong);
  font-weight: 700;
}

/* ------------------------------------------------------- mobile nav ---- */
.io-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--io-line);
  color: var(--io-text);
  border-radius: var(--io-radius);
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-family: var(--io-font-ui);
  place-items: center;
  flex: none;
}
.io-burger svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 820px) {
  .io-burger {
    display: inline-grid;
  }
  .io-nav {
    position: absolute;
    top: var(--io-header-h);
    left: 0;
    right: 0;
    background: var(--io-surface);
    border-bottom: 1px solid var(--io-line);
    box-shadow: var(--io-shadow);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 32px 20px;
    display: none;
  }
  .io-shell.io-open .io-nav {
    display: flex;
  }
  .io-menu-panel {
    position: static;
    box-shadow: none;
    border: none;
    padding: 4px 0 4px 12px;
    min-width: 0;
  }
}

/* ----------------------------------------------------------- footer ---- */
.io-footer {
  font-family: var(--io-font-ui);
  text-align: left;
  background: var(--io-paper);
  border-top: 1px solid var(--io-line);
  padding: 44px 0 40px;
  color: var(--io-text-dim);
}
.io-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 880px) {
  .io-footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .io-footer-inner {
    grid-template-columns: 1fr;
  }
}
.io-footer h2 {
  font-family: var(--io-font-ui);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--io-text-dim);
  margin: 0 0 12px;
  font-weight: 700;
}
.io-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.io-footer a {
  color: var(--io-text-dim);
  text-decoration: none;
  font-size: 13.5px;
}
.io-footer a:hover {
  color: var(--io-text);
}
.io-footer-brand p {
  margin: 12px 0 0;
  font-size: 13px;
  max-width: 34ch;
  line-height: 1.6;
}
.io-footer-legal {
  max-width: 1180px;
  margin: 32px auto 0;
  padding: 20px 32px 0;
  border-top: 1px solid var(--io-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.io-footer-legal p {
  margin: 0;
}

/* ---------------------------------------------------- footer social ---- */
.io-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
}
.io-footer .io-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--io-line);
  background: var(--io-surface);
  color: var(--io-text-dim);
}
.io-footer-social svg {
  width: 18px;
  height: 18px;
  display: block;
}
.io-footer .io-footer-social a:hover {
  background: var(--io-surface-2);
  border-color: currentColor;
}
.io-footer .io-footer-social .io-social-email:hover { color: var(--io-accent); }
.io-footer .io-footer-social .io-social-youtube:hover { color: #FF0033; }
.io-footer .io-footer-social .io-social-linkedin:hover { color: #0A66C2; }
.io-footer .io-footer-social .io-social-github:hover { color: var(--io-text); }
:root[data-theme="dark"] .io-footer .io-footer-social .io-social-linkedin:hover { color: #70B5F9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .io-footer .io-footer-social .io-social-linkedin:hover { color: #70B5F9; }
}

/* ------------------------------------------------------------ focus ---- */
.io-shell a:focus-visible,
.io-shell button:focus-visible,
.io-shell summary:focus-visible,
.io-footer a:focus-visible,
.io-skip:focus-visible {
  outline: 2px solid var(--io-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ----------------------------------------------------------- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .io-nav a,
  .io-ctx-links a,
  .io-footer a,
  .io-theme-toggle,
  .io-menu > summary {
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  }
}

/* ------------------------------------------------------------ print ---- */
@media print {
  .io-shell,
  .io-ctx,
  .io-footer,
  .io-skip {
    display: none !important;
  }
}