/* OpenFlow free tools — shared stylesheet.
   Mirrors the design tokens of the main landing page (docs/index.html). */

:root{
  --bg:        oklch(0.15 0.021 275);
  --bg-2:      oklch(0.18 0.024 274);
  --surface:   oklch(0.215 0.027 274);
  --surface-2: oklch(0.255 0.030 274);
  --border:    oklch(0.42 0.03 274 / 0.35);
  --border-lit:oklch(0.55 0.06 270 / 0.55);
  --ink:       oklch(0.97 0.006 270);
  --muted:     oklch(0.76 0.021 274);
  --faint:     oklch(0.62 0.02 274);
  --indigo:    oklch(0.58 0.20 274);
  --azure:     oklch(0.70 0.15 240);
  --teal:      oklch(0.81 0.115 195);
  --good:      oklch(0.82 0.15 160);
  --warn:      oklch(0.83 0.14 85);
  --bad:       oklch(0.68 0.19 25);
  --cta:       oklch(0.53 0.20 273);
  --cta-hi:    oklch(0.60 0.20 273);
  --grad: linear-gradient(115deg, var(--indigo) 0%, var(--azure) 52%, var(--teal) 100%);

  --z-nav:100; --z-glow:-1;
  --maxw: 1120px;
  --maxw-narrow: 860px;
  --ease: cubic-bezier(0.22,1,0.36,1);
  --radius: 16px;

  --step--2: clamp(0.72rem, 0.69rem + 0.12vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.8rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.3rem, 1.14rem + 0.6vw, 1.65rem);
  --step-2:  clamp(1.75rem, 1.4rem + 1.3vw, 2.6rem);
  --step-3:  clamp(2.35rem, 1.75rem + 2.6vw, 3.9rem);
  --step-4:  clamp(3rem, 1.95rem + 4.6vw, 5.6rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:"General Sans", system-ui, -apple-system, sans-serif;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Clash Display", "General Sans", system-ui, sans-serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-0.02em;
  text-wrap:balance;
  margin:0;
}
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
mark{ background:none; color:var(--teal); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.2rem,4vw,2rem); }
.wrap-narrow{ width:100%; max-width:var(--maxw-narrow); margin-inline:auto; padding-inline:clamp(1.2rem,4vw,2rem); }

code, .mono{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:0.92em; }
kbd{ font-family:ui-monospace,"SF Mono",monospace; font-size:.85em; background:var(--surface-2); border:1px solid var(--border-lit); border-bottom-width:2px; border-radius:6px; padding:.15em .5em; color:var(--ink); }

/* ---------- gradient atmosphere ---------- */
.glow{ position:fixed; inset:0; z-index:var(--z-glow); pointer-events:none; overflow:hidden; }
.glow::before{
  content:""; position:absolute; top:-24vh; left:50%; width:120vw; height:90vh;
  transform:translateX(-50%);
  background:
    radial-gradient(42% 55% at 30% 30%, oklch(0.58 0.20 274 / 0.30), transparent 70%),
    radial-gradient(40% 50% at 72% 42%, oklch(0.72 0.15 220 / 0.20), transparent 70%),
    radial-gradient(38% 48% at 52% 68%, oklch(0.80 0.12 195 / 0.12), transparent 70%);
  filter:blur(28px);
}

/* ---------- nav ---------- */
header.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  backdrop-filter:saturate(160%) blur(14px);
  background:oklch(0.15 0.021 275 / 0.72);
  border-bottom:1px solid var(--border);
}
.nav-inner{ display:flex; align-items:center; gap:1.5rem; height:64px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:var(--step-0); letter-spacing:-0.01em; }
.brand .logo{ width:30px; height:30px; border-radius:8px; box-shadow:0 2px 10px oklch(0.58 0.2 274 / .5); }
.nav-links{ display:flex; gap:1.75rem; margin-left:auto; font-size:var(--step--1); color:var(--muted); }
.nav-links a{ transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ margin-left:1.5rem; }
@media (max-width:720px){ .nav-links{ display:none; } .nav-cta{ margin-left:auto; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:inherit; font-weight:600; font-size:var(--step-0);
  padding:.72em 1.3em; border-radius:11px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease), background .2s, box-shadow .25s, border-color .2s, color .2s;
  white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn-primary{ background:var(--cta); color:#fff; box-shadow:0 6px 22px oklch(0.53 0.2 273 / .42); }
.btn-primary:hover{ background:var(--cta-hi); transform:translateY(-2px); box-shadow:0 10px 30px oklch(0.53 0.2 273 / .55); }
.btn-ghost{ background:oklch(0.97 0.006 270 / 0.05); color:var(--ink); border-color:var(--border-lit); }
.btn-ghost:hover{ background:oklch(0.97 0.006 270 / 0.1); transform:translateY(-2px); }
.btn-sm{ padding:.5em 1em; font-size:var(--step--1); border-radius:9px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* ---------- tool page scaffolding ---------- */
.crumbs{ font-size:var(--step--1); color:var(--faint); padding-top:1.6rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.crumbs a{ color:var(--muted); } .crumbs a:hover{ color:var(--ink); }
.crumbs .sep{ color:var(--border-lit); }

.tool-hero{ padding-top:clamp(1.6rem,4vw,2.8rem); padding-bottom:clamp(1.6rem,3vw,2.4rem); }
.tool-hero h1{ font-size:var(--step-3); letter-spacing:-0.03em; max-width:22ch; }
.tool-hero .sub{ margin-top:1rem; color:var(--muted); font-size:var(--step-1); font-weight:400; max-width:58ch; line-height:1.5; }

.panel{
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 140%);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2.2rem);
}
.panel + .panel{ margin-top:1.2rem; }
.panel h2{ font-size:var(--step-1); letter-spacing:-0.015em; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:820px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:var(--step--1); font-weight:600; color:var(--muted); letter-spacing:.01em; }
.field .hint{ font-size:var(--step--2); color:var(--faint); font-weight:400; }
input[type="text"], input[type="number"], select, textarea{
  font-family:inherit; font-size:var(--step-0); color:var(--ink);
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:.6em .8em; width:100%; transition:border-color .2s;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--azure); outline-offset:1px; }
textarea{ resize:vertical; min-height:9rem; line-height:1.6; }
select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.4em; }

input[type="range"]{ width:100%; accent-color:var(--azure); }

/* segmented control */
.seg{ display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:11px; padding:4px; gap:4px; flex-wrap:wrap; }
.seg button{
  font-family:inherit; font-size:var(--step--1); font-weight:600; color:var(--muted);
  background:none; border:none; border-radius:8px; padding:.45em 1em; cursor:pointer;
  transition:background .2s, color .2s;
}
.seg button:hover{ color:var(--ink); }
.seg button[aria-pressed="true"], .seg button.active{ background:var(--surface-2); color:var(--ink); }

/* ---------- results ---------- */
.big-num{
  font-family:"Clash Display","General Sans",sans-serif; font-weight:600;
  font-size:var(--step-4); line-height:1; letter-spacing:-0.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.big-label{ font-size:var(--step--1); color:var(--faint); margin-top:.4rem; }

.stat-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.stat{
  flex:1 1 140px; background:var(--bg); border:1px solid var(--border); border-radius:12px;
  padding:1rem 1.1rem;
}
.stat .n{ font-family:"Clash Display",sans-serif; font-size:var(--step-2); font-weight:600; letter-spacing:-0.02em; line-height:1.1; }
.stat .l{ font-size:var(--step--2); color:var(--faint); margin-top:.25rem; }
.stat.accent .n{ color:var(--teal); }
.stat.warn .n{ color:var(--warn); }
.stat.bad .n{ color:var(--bad); }
.stat.good .n{ color:var(--good); }

.notice{
  display:flex; gap:.7rem; align-items:flex-start;
  background:oklch(0.58 0.2 274 / .1); border:1px solid oklch(0.58 0.2 274 / .3);
  border-radius:12px; padding: .9rem 1.1rem; font-size:var(--step--1); color:var(--muted);
}
.notice b{ color:var(--ink); }
.notice.warn{ background:oklch(0.83 0.14 85 / .08); border-color:oklch(0.83 0.14 85 / .3); }

.chip{ font-size:var(--step--2); padding:.35em .75em; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--muted); display:inline-flex; gap:.45rem; align-items:center; }
.chip b{ color:var(--ink); font-weight:600; }

/* ---------- comparison tables ---------- */
.table-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; }
table.cmp{ width:100%; border-collapse:collapse; font-size:var(--step--1); min-width:560px; }
table.cmp th, table.cmp td{ text-align:left; padding:.75rem 1rem; border-bottom:1px solid var(--border); }
table.cmp thead th{ background:var(--bg-2); color:var(--muted); font-weight:600; font-size:var(--step--2); text-transform:uppercase; letter-spacing:.07em; }
table.cmp tbody tr:last-child td{ border-bottom:none; }
table.cmp td.good{ color:var(--good); } table.cmp td.bad{ color:var(--bad); } table.cmp td.warn{ color:var(--warn); }
table.cmp tr.hl{ background:oklch(0.58 0.2 274 / .09); }
table.cmp tr.hl td:first-child{ font-weight:600; }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:.8rem; }
.faq details{
  background:var(--bg-2); border:1px solid var(--border); border-radius:12px;
  padding:1rem 1.2rem;
}
.faq summary{ cursor:pointer; font-weight:600; font-size:var(--step-0); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--azure); font-weight:600; font-size:1.2em; flex:none; }
.faq details[open] summary::after{ content:"\2212"; }
.faq details p{ margin-top:.7rem; color:var(--muted); font-size:var(--step--1); }
.faq details a{ color:var(--teal); }

/* ---------- section headers ---------- */
.band{ padding-block:clamp(2.4rem,6vw,4rem); }
.section-head h2{ font-size:var(--step-2); letter-spacing:-0.02em; }
.section-head p{ margin-top:.7rem; color:var(--muted); font-size:var(--step-0); }
.section-head{ margin-bottom:1.6rem; max-width:60ch; }

/* ---------- OpenFlow CTA band ---------- */
.of-cta{
  position:relative; overflow:hidden; text-align:center;
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.2rem) clamp(1.4rem,4vw,2.4rem);
}
.of-cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% 0%, oklch(0.58 0.2 274 / .2), transparent 65%); pointer-events:none; }
.of-cta > *{ position:relative; }
.of-cta h2{ font-size:var(--step-2); letter-spacing:-0.02em; max-width:26ch; margin-inline:auto; }
.of-cta p{ color:var(--muted); margin-top:.8rem; max-width:52ch; margin-inline:auto; font-size:var(--step-0); }
.of-cta .btns{ display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }
.of-cta .fine{ margin-top:1rem; font-size:var(--step--2); color:var(--faint); }

/* waveform motif */
.wave{ display:inline-flex; align-items:center; gap:3px; height:1em; }
.wave i{ width:3px; border-radius:2px; background:var(--grad); background-size:100% 300%; animation:eq 1.1s ease-in-out infinite; }
.wave i:nth-child(1){ height:35%; animation-delay:-.9s } .wave i:nth-child(2){ height:70%; animation-delay:-.6s }
.wave i:nth-child(3){ height:100%; animation-delay:-.3s } .wave i:nth-child(4){ height:55%; animation-delay:-.75s }
.wave i:nth-child(5){ height:80%; animation-delay:-.15s }
@keyframes eq{ 0%,100%{ transform:scaleY(.4) } 50%{ transform:scaleY(1) } }

/* big record button for mic tools */
.rec-btn{
  width:88px; height:88px; border-radius:50%; border:1px solid var(--border-lit);
  background:var(--cta); color:#fff; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 6px 30px oklch(0.53 0.2 273 / .5);
  transition:transform .18s var(--ease), background .2s, box-shadow .25s;
}
.rec-btn:hover{ background:var(--cta-hi); transform:scale(1.04); }
.rec-btn.recording{ background:var(--bad); animation:pulse 1.6s ease-in-out infinite; }
.rec-btn svg{ width:34px; height:34px; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 oklch(0.68 0.19 25 / .5); } 50%{ box-shadow:0 0 0 16px oklch(0.68 0.19 25 / 0); } }

/* ---------- tools hub grid ---------- */
.tools-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
@media (max-width:760px){ .tools-grid{ grid-template-columns:1fr; } }
.tool-card{
  display:flex; flex-direction:column; gap:.55rem;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 140%);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(1.2rem,2.4vw,1.7rem);
  transition:border-color .3s, transform .3s var(--ease);
}
.tool-card:hover{ border-color:var(--border-lit); transform:translateY(-3px); }
.tool-card .kicker{ font-size:var(--step--2); text-transform:uppercase; letter-spacing:.08em; color:var(--azure); font-weight:600; }
.tool-card h3{ font-family:"General Sans",sans-serif; font-size:var(--step-1); font-weight:600; letter-spacing:-0.015em; }
.tool-card p{ color:var(--muted); font-size:var(--step--1); }
.tool-card .go{ margin-top:auto; padding-top:.5rem; color:var(--teal); font-size:var(--step--1); font-weight:600; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--border); padding-block:2.5rem; margin-top:clamp(3rem,7vw,5rem); }
.foot-inner{ display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; color:var(--faint); font-size:var(--step--1); }
.foot-inner a{ color:var(--muted); } .foot-inner a:hover{ color:var(--ink); }
.foot-inner .brand{ font-size:1rem; }
.foot-links{ margin-left:auto; display:flex; gap:1.4rem; flex-wrap:wrap; }

:focus-visible{ outline:2px solid var(--azure); outline-offset:3px; border-radius:4px; }