/* OXL Multimedia — component styles.
 * Extracted verbatim from the design-system React components (Button, Card,
 * Stat, PixelMark, Badge, Tag, Input, Select, Tabs) plus page-level helpers,
 * so the static pages render identically without the React runtime. */

/* ---------- Page layout helpers ---------- */
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--surface-card); }
.oxl-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.oxl-ico { display: inline-flex; }
.oxl-ico svg { width: 100%; height: 100%; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 10px; }

/* ---------- Button ---------- */
.oxlBtn{
  --_h: var(--control-h-md);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:var(--_h); padding:0 var(--space-5);
  font:var(--fw-bold) var(--text-sm)/1 var(--font-display);
  letter-spacing:var(--tracking-snug);
  border:var(--border-width-strong) solid transparent; border-radius:var(--radius-md);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.oxlBtn:focus-visible{ outline:none; box-shadow:var(--ring); }
.oxlBtn:active{ transform:translateY(1px); }
.oxlBtn[disabled]{ opacity:.45; pointer-events:none; }
.oxlBtn[data-size="sm"]{ --_h:var(--control-h-sm); padding:0 var(--space-4); font-size:var(--text-xs); }
.oxlBtn[data-size="lg"]{ --_h:var(--control-h-lg); padding:0 var(--space-6); font-size:var(--text-base); }
.oxlBtn[data-full="true"]{ width:100%; }
.oxlBtn[data-variant="primary"]{ background:var(--brand-primary); color:var(--text-on-brand); }
.oxlBtn[data-variant="primary"]:hover{ background:var(--brand-primary-strong); }
.oxlBtn[data-variant="accent"]{ background:var(--brand-accent); color:var(--text-on-accent); }
.oxlBtn[data-variant="accent"]:hover{ background:var(--brand-accent-strong); }
.oxlBtn[data-variant="secondary"]{ background:var(--surface-card); color:var(--text-strong); border-color:var(--border-strong); }
.oxlBtn[data-variant="secondary"]:hover{ border-color:var(--ink-900); background:var(--surface-sunken); }
.oxlBtn[data-variant="ghost"]{ background:transparent; color:var(--text-strong); }
.oxlBtn[data-variant="ghost"]:hover{ background:var(--surface-sunken); }
.oxlBtn[data-variant="inverse"]{ background:var(--ink-0); color:var(--ink-900); }
.oxlBtn[data-variant="inverse"]:hover{ background:var(--ink-100); }
.oxlBtn .oxlBtn__ic{ display:inline-flex; width:1.1em; height:1.1em; }
.oxlBtn .oxlBtn__ic svg{ width:100%; height:100%; }

/* ---------- Card ---------- */
.oxlCard{
  display:flex; flex-direction:column;
  background:var(--surface-card); border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-card); overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.oxlCard[data-pad="md"]{ padding:var(--space-5); }
.oxlCard[data-pad="lg"]{ padding:var(--space-6); }
.oxlCard[data-elevation="sm"]{ box-shadow:var(--shadow-sm); }
.oxlCard[data-elevation="md"]{ box-shadow:var(--shadow-md); }
.oxlCard[data-elevation="lg"]{ box-shadow:var(--shadow-lg); }
.oxlCard[data-interactive="true"]{ cursor:pointer; }
.oxlCard[data-interactive="true"]:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--border-default); }
.oxlCard[data-accent="true"]{ border-top:3px solid var(--brand-accent); }
.oxlCard[data-tone="brand"]{ background:var(--gradient-brand); color:var(--text-on-brand); border-color:transparent; }
.oxlCard[data-tone="ink"]{ background:var(--gradient-ink); color:var(--text-inverse); border-color:transparent; }

/* ---------- Stat ---------- */
.oxlStat{ display:flex; flex-direction:column; gap:var(--space-1); }
.oxlStat__value{ font:var(--fw-bold) var(--text-3xl)/1 var(--font-display);
  letter-spacing:var(--tracking-tight); color:var(--text-strong); display:flex; align-items:baseline; gap:.1em; }
.oxlStat__value em{ font-style:normal; color:var(--brand-primary); }
.oxlStat[data-accent="true"] .oxlStat__value em{ color:var(--brand-accent-strong); }
.oxlStat__label{ font:var(--fw-medium) var(--text-sm)/1.3 var(--font-body); color:var(--text-muted); }
.oxlStat[data-size="sm"] .oxlStat__value{ font-size:var(--text-xl); }
.oxlStat[data-size="lg"] .oxlStat__value{ font-size:var(--text-4xl); }
.oxlStat[data-invert="true"] .oxlStat__value{ color:var(--text-inverse); }
.oxlStat[data-invert="true"] .oxlStat__value em{ color:var(--brand-accent); }
.oxlStat[data-invert="true"] .oxlStat__label{ color:rgba(255,255,255,.7); }

/* ---------- PixelMark ---------- */
.oxlPixelMark{ display:inline-grid; grid-template-columns:repeat(3,1fr); gap:var(--_g,3px);
  width:var(--_s,32px); height:var(--_s,32px); flex:0 0 auto; }
.oxlPixelMark span{ display:block; border-radius:1px; background:transparent; }
.oxlPixelMark span:nth-child(2),
.oxlPixelMark span:nth-child(4),
.oxlPixelMark span:nth-child(6),
.oxlPixelMark span:nth-child(8){ background:var(--_c1,var(--brand-primary)); }
.oxlPixelMark span:nth-child(5){ background:var(--_c2,var(--brand-accent)); }
.oxlPixelMark[data-shape="blocks"] span:nth-child(1),
.oxlPixelMark[data-shape="blocks"] span:nth-child(5),
.oxlPixelMark[data-shape="blocks"] span:nth-child(9){ background:var(--_c1,var(--brand-primary)); }
.oxlPixelMark[data-shape="blocks"] span:nth-child(2),
.oxlPixelMark[data-shape="blocks"] span:nth-child(4),
.oxlPixelMark[data-shape="blocks"] span:nth-child(6),
.oxlPixelMark[data-shape="blocks"] span:nth-child(8){ background:transparent; }
.oxlPixelMark[data-shape="blocks"] span:nth-child(7){ background:var(--_c2,var(--brand-accent)); }
.oxlPixelMark[data-shape="blocks"] span:nth-child(3){ background:var(--_c2,var(--brand-accent)); }

/* ---------- Badge ---------- */
.oxlBadge{
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:0 var(--space-2); height:1.5rem;
  font:var(--fw-bold) var(--text-2xs)/1 var(--font-mono);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  border-radius:var(--radius-xs); white-space:nowrap;
}
.oxlBadge[data-tone="brand"]{ background:var(--brand-primary-soft); color:var(--blue-700); }
.oxlBadge[data-tone="accent"]{ background:var(--brand-accent-soft); color:var(--lime-700); }
.oxlBadge[data-tone="neutral"]{ background:var(--ink-100); color:var(--ink-700); }
.oxlBadge[data-tone="success"]{ background:var(--success-soft); color:var(--success-ink); }
.oxlBadge[data-tone="warning"]{ background:var(--warning-soft); color:var(--warning-ink); }
.oxlBadge[data-tone="danger"]{ background:var(--danger-soft); color:var(--danger-ink); }
.oxlBadge[data-solid="true"][data-tone="brand"]{ background:var(--brand-primary); color:var(--text-on-brand); }
.oxlBadge[data-solid="true"][data-tone="accent"]{ background:var(--brand-accent); color:var(--text-on-accent); }
.oxlBadge[data-dot]::before{ content:""; width:.4rem; height:.4rem; border-radius:1px; background:currentColor; }

/* ---------- Tag ---------- */
.oxlTag{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-1) var(--space-3); height:2rem;
  font:var(--fw-medium) var(--text-sm)/1 var(--font-body);
  color:var(--text-body); background:var(--surface-card);
  border:var(--border-width) solid var(--border-default); border-radius:var(--radius-pill);
  cursor:default; transition:all var(--dur-fast) var(--ease-standard);
}

/* ---------- Input ---------- */
.oxlField{ display:flex; flex-direction:column; gap:var(--space-2); font-family:var(--font-body); }
.oxlField__label{ font:var(--role-label); color:var(--text-strong); display:flex; gap:var(--space-1); align-items:center; }
.oxlField__label em{ color:var(--danger); font-style:normal; }
.oxlField__hint{ font:var(--role-body-sm); color:var(--text-muted); }
.oxlField__err{ font:var(--role-body-sm); color:var(--danger-ink); }
.oxlInputWrap{ position:relative; display:flex; align-items:center; }
.oxlInput{
  width:100%; height:var(--control-h-md); padding:0 var(--space-4);
  font:var(--role-body); color:var(--text-strong);
  background:var(--surface-card); border:var(--border-width-strong) solid var(--border-default);
  border-radius:var(--radius-md); transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.oxlInput::placeholder{ color:var(--text-subtle); }
.oxlInput:hover{ border-color:var(--border-strong); }
.oxlInput:focus{ outline:none; border-color:var(--brand-primary); box-shadow:var(--ring); }
.oxlInput:disabled{ background:var(--surface-sunken); color:var(--text-subtle); cursor:not-allowed; }

/* ---------- Select ---------- */
.oxlSelectField{ display:flex; flex-direction:column; gap:var(--space-2); font-family:var(--font-body); }
.oxlSelectField__label{ font:var(--role-label); color:var(--text-strong); }
.oxlSelectWrap{ position:relative; display:flex; align-items:center; }
.oxlSelectWrap::after{ content:""; position:absolute; right:var(--space-4); width:.55rem; height:.55rem;
  border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted);
  transform:translateY(-25%) rotate(45deg); pointer-events:none; }
.oxlSelect{
  width:100%; height:var(--control-h-md); padding:0 var(--space-7) 0 var(--space-4);
  font:var(--role-body); color:var(--text-strong); appearance:none; -webkit-appearance:none;
  background:var(--surface-card); border:var(--border-width-strong) solid var(--border-default);
  border-radius:var(--radius-md); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.oxlSelect:hover{ border-color:var(--border-strong); }
.oxlSelect:focus{ outline:none; border-color:var(--brand-primary); box-shadow:var(--ring); }

/* ---------- Tabs ---------- */
.oxlTabs{ display:flex; gap:var(--space-1); font-family:var(--font-display); }
.oxlTab{ appearance:none; border:none; background:none; cursor:pointer;
  font:var(--fw-semibold) var(--text-sm)/1 var(--font-display); color:var(--text-muted);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap;
  transition:all var(--dur-fast) var(--ease-standard); }
.oxlTab:hover{ color:var(--text-strong); }
.oxlTab:focus-visible{ outline:none; box-shadow:var(--ring); }
.oxlTabs[data-variant="solid"]{ background:var(--surface-sunken); padding:var(--space-1); border-radius:var(--radius-md); }
.oxlTabs[data-variant="solid"] .oxlTab[data-active="true"]{ background:var(--surface-card); color:var(--text-strong); box-shadow:var(--shadow-xs); }

/* ---------- Sticky site nav (scroll-solidify) ---------- */
#siteNav{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,0); border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s; }
#siteNav[data-solid="true"]{ background:rgba(255,255,255,.86); backdrop-filter:blur(12px); border-bottom-color:var(--border-subtle); }

/* ---------- FAQ accordion ---------- */
.oxl-faq-row{ border-bottom:1px solid var(--border-default); }
.oxl-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:none; border:none; cursor:pointer; text-align:left; padding:24px 4px; }
.oxl-faq-q > span:first-child{ font:var(--fw-bold) 20px/1.3 var(--font-display); color:var(--text-strong); }
.oxl-faq-icon{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-sunken); color:var(--text-muted); transition:all .2s; }
.oxl-faq-row.open .oxl-faq-icon{ background:var(--brand-primary); color:#fff; }
.oxl-faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease-out); }
.oxl-faq-row.open .oxl-faq-a{ max-height:240px; }
.oxl-faq-a p{ font:17px/1.65 var(--font-body); color:var(--text-body); margin:0; padding:0 4px 26px; max-width:760px; }

/* ---------- Apply modal ---------- */
.oxl-modal{ position:fixed; inset:0; z-index:60; background:var(--surface-overlay); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.oxl-modal[hidden]{ display:none; }
.oxl-modal__panel{ width:min(520px,100%); background:var(--surface-card); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl); overflow:hidden; max-height:92vh; overflow-y:auto; }

/* ---------- Tab panels ---------- */
[data-panel]{ display:none; }
[data-panel].active{ display:block; }