/* ═══════════════════════════════════════════════════════════════
   foot.io — Highlighter design system
   ═══════════════════════════════════════════════════════════════
   Palette: pale lime cream + hot pink + cyan + ink
   Fonts:   Space Grotesk · Instrument Serif italic · JetBrains Mono
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f7ffe0;
  --ink:#0d1a00;
  --sub:rgba(13,26,0,0.6);
  --line:rgba(13,26,0,0.18);
  --acc:#FF1D8E;        /* hot pink — CTAs, live, italic accents */
  --acc2:#D0FF14;       /* lime — top bar, highlights, btn text */
  --acc3:#00E5FF;       /* cyan — italic accents in some headers */
  --dbg:#0d1a00;        /* dark panel */
  --dfg:#f7ffe0;        /* text on dark */
  --panel:#fff3ff;      /* lavender panel behind schema section */
  --btnbg:#0d1a00;
  --btnfg:#D0FF14;
  --top:#D0FF14;
  --hi-bg:#FF1D8E;
  --hi-fg:#fff;
  --hero-em:#FF1D8E;
  --idx-em:#00E5FF;
  --dm-em:#FF1D8E;
  --hover:#D0FF14;

  /* Code syntax colors */
  --ck:#FF7FC3;   /* keys */
  --cs:#D0FF14;   /* strings */
  --cn:#00E5FF;   /* numbers */
  --cu:#FFEE00;   /* underlined verbs */
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:"Space Grotesk","Inter",ui-sans-serif,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.serif{font-family:"Instrument Serif",Georgia,serif;font-style:italic}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* ─── TOP BAR ───────────────────────── */
.top{border-bottom:1px solid var(--ink);padding:12px 32px;display:flex;justify-content:space-between;align-items:center;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;background:var(--top);color:var(--ink)}
.top .l{display:flex;gap:20px;flex-wrap:wrap}
.top .l span{display:inline-flex;align-items:center;gap:6px}
.top .l span.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);display:inline-block;animation:pulse 1.4s infinite}
.top .r{opacity:.8}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}

/* ─── NAV ───────────────────────────── */
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--ink);gap:16px;background:var(--bg)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;letter-spacing:-0.02em}
.logo-mark{width:32px;height:32px;border-radius:50%;background:var(--ink);position:relative;overflow:hidden;flex-shrink:0}
.logo-mark::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 50% 40%,var(--acc2) 0 20%,transparent 20%),
  conic-gradient(from 45deg,transparent 0 30deg,var(--acc2) 30deg 60deg,transparent 60deg 90deg,var(--acc2) 90deg 120deg,transparent 120deg 150deg,var(--acc2) 150deg 180deg,transparent 180deg);
  mix-blend-mode:screen;opacity:0.6}
.logo-io{color:var(--acc)}
.badge{font-family:"JetBrains Mono",monospace;font-size:11px;background:var(--acc2);border:1px solid var(--ink);padding:2px 6px;border-radius:4px;margin-left:8px;font-weight:500;color:var(--ink)}
.nav-mid{display:flex;align-items:center;gap:6px;font-family:"JetBrains Mono",monospace;font-size:13px;background:#fff;border:1px solid var(--ink);border-radius:999px;padding:8px 16px;min-width:320px;flex:1;max-width:560px;color:var(--ink)}
.nav-mid input{border:0;outline:0;flex:1;font-family:inherit;font-size:inherit;background:transparent;color:var(--ink)}
.nav-mid input::placeholder{color:var(--sub)}
.nav-mid .kbd{font-size:11px;color:var(--sub);border:1px solid var(--line);border-radius:4px;padding:2px 6px}
.nav-right{display:flex;gap:14px;align-items:center;font-size:14px;flex-wrap:wrap}

/* ─── BUTTONS ───────────────────────── */
.btn{padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:var(--btnbg);color:var(--btnfg);transition:all 0.15s;font-family:inherit;display:inline-block;text-align:center}
.btn:hover{background:var(--acc);color:var(--hi-fg);text-decoration:none}
.btn-outline{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--acc2);border-color:var(--ink)}
.btn-pink{background:var(--acc);color:var(--hi-fg)}
.btn-pink:hover{background:var(--ink);color:var(--acc2)}

/* ─── PAGE HEADER (sub-page pattern) ── */
.page-head{padding:56px 40px 32px;border-bottom:1px solid var(--ink);background:var(--bg);position:relative}
.page-head .eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--sub);margin-bottom:20px}
.page-head h1{font-size:clamp(42px,7vw,88px);font-weight:500;letter-spacing:-0.04em;line-height:0.95;max-width:1100px;color:var(--ink)}
.page-head h1 em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;color:var(--hero-em);font-weight:400}
.page-head h1 em.cyan{color:var(--acc3)}
.page-head .lede{font-size:18px;color:var(--sub);max-width:720px;margin-top:18px;line-height:1.5}

/* ─── GENERIC SECTION ───────────────── */
.section{padding:48px 40px;border-bottom:1px solid var(--ink);background:var(--bg)}
.section.panel{background:var(--panel)}
.section.dark{background:var(--dbg);color:var(--dfg)}
.section.lime{background:var(--acc2);color:var(--ink)}
.section h2{font-size:clamp(32px,4.5vw,56px);font-weight:500;letter-spacing:-0.03em;line-height:1;max-width:780px;margin-bottom:24px;color:inherit}
.section h2 em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;color:var(--hero-em);font-weight:400}
.section h2 em.cyan{color:var(--acc3)}
.section h3{font-size:22px;font-weight:600;margin-bottom:14px;letter-spacing:-0.01em}
.section .section-label{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--sub);margin-bottom:20px}
.section p{color:var(--sub);line-height:1.6;max-width:720px}
.section.dark p{color:rgba(247,255,224,0.7)}

/* ─── GRID CARDS ────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;border:1px solid var(--ink);background:var(--ink)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--ink);background:var(--ink)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--ink);background:var(--ink)}
.cell{background:var(--bg);padding:24px 22px}
.cell h4{font-size:16px;font-weight:600;margin-bottom:10px;color:var(--ink)}
.cell p{font-size:14px;color:var(--sub);line-height:1.55;margin-bottom:0;max-width:none}
.cell .ic{font-size:28px;margin-bottom:10px}
.cell ul{list-style:none;padding:0;margin:0;font-family:"JetBrains Mono",monospace;font-size:12px;line-height:1.7;color:var(--sub)}
.cell ul li::before{content:"→ ";color:var(--acc)}
.cell .big-num{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:46px;line-height:1;font-weight:400;color:var(--ink)}
.cell .big-num.pink{color:var(--acc)}
.cell .big-num.cyan{color:var(--acc3)}
.cell .big-num.ink{color:var(--ink)}

/* ─── LISTS (directory pattern) ─────── */
.list-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);align-items:center;font-size:14px;transition:background 0.08s,padding 0.08s,margin 0.08s;cursor:pointer}
.list-row:hover{background:var(--hover);padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px}
.list-row .i{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--sub);opacity:0.7}
.list-row .nm{font-weight:500;color:var(--ink)}
.list-row .sub-s{font-size:11px;color:var(--sub);font-family:"JetBrains Mono",monospace;display:block;margin-top:1px}
.list-row .meta{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--sub)}

/* ─── TABLES ────────────────────────── */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;padding:12px 14px;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--sub);border-bottom:1px solid var(--ink);font-weight:500}
.table td{padding:10px 14px;border-bottom:1px dashed var(--line);color:var(--ink)}
.table tr:hover td{background:var(--hover)}
.table .mono{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--sub)}

/* ─── CODE BLOCKS ───────────────────── */
pre,code{font-family:"JetBrains Mono",monospace}
pre{background:var(--dbg);color:var(--dfg);border-radius:12px;padding:20px;font-size:12.5px;line-height:1.7;overflow-x:auto;white-space:pre;margin:16px 0}
pre.light{background:#fff;color:var(--ink);border:1px solid var(--ink)}
:not(pre) > code{background:var(--panel);padding:2px 6px;border-radius:4px;font-size:0.9em;color:var(--ink);border:1px solid var(--line)}
pre .k,.code-k{color:var(--ck)}
pre .s,.code-s{color:var(--cs)}
pre .n,.code-n{color:var(--cn)}
pre .c,.code-c{color:rgba(247,255,224,0.45)}
pre .u,.code-u{color:var(--cu)}

/* ─── INLINE BADGES ─────────────────── */
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-family:"JetBrains Mono",monospace;font-size:11px;background:var(--acc2);color:var(--ink);border:1px solid var(--ink);font-weight:500}
.chip.pink{background:var(--acc);color:#fff;border-color:var(--acc)}
.chip.cyan{background:var(--acc3);color:var(--ink);border-color:var(--ink)}
.chip.ghost{background:transparent;border:1px dashed var(--line);color:var(--sub)}
.score-ft{color:var(--acc);font-size:16px;font-family:"Instrument Serif",Georgia,serif;font-style:italic;padding:0 4px}

/* ─── FOOTER ────────────────────────── */
.foot{padding:72px 40px 32px;background:var(--dbg);color:var(--dfg);border-top:1px solid var(--ink)}
.giant{font-size:clamp(72px,18vw,260px);font-weight:500;letter-spacing:-0.05em;line-height:0.85;display:flex;align-items:flex-end;gap:16px;color:var(--dfg);flex-wrap:wrap}
.giant em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;color:var(--acc2);font-weight:400}
.giant .ball{width:clamp(56px,13vw,140px);height:clamp(56px,13vw,140px);border-radius:50%;background:var(--acc2);margin:0 8px 20px 0;position:relative;flex-shrink:0}
.giant .ball::before{content:"";position:absolute;inset:16px;border-radius:50%;background:
  radial-gradient(circle at 50% 40%,var(--dbg) 0 18%,transparent 18%),
  repeating-linear-gradient(60deg,var(--dbg) 0 2px,transparent 2px 14px);
  mix-blend-mode:multiply;opacity:0.85}
.foot-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:36px;padding-top:36px;border-top:1px solid rgba(255,255,255,0.15)}
.foot-col h6{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin:0 0 12px}
.foot-col a{display:block;color:var(--dfg);font-size:14px;padding:3px 0}
.foot-col a:hover{color:var(--acc2)}
.foot-bot{display:flex;justify-content:space-between;margin-top:36px;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);gap:20px;flex-wrap:wrap}

/* ball cursor removed */
.ball-cursor{display:none !important}

/* ─── RESPONSIVE ────────────────────── */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  /* Typography — WCAG minimums + readable scale */
  body{font-size:16px;line-height:1.55}
  .top{padding:10px 16px;font-size:10.5px}
  .top .l{gap:12px}
  .nav{flex-wrap:wrap;padding:14px 18px;gap:12px}
  .nav-mid{order:3;min-width:0;width:100%;padding:10px 14px}
  .nav-mid input{font-size:15px}  /* ≥16 prevents iOS zoom-on-focus */
  .nav-right{gap:10px;font-size:15px}
  /* Touch targets — iOS HIG says 44×44, Android says 48×48 */
  .btn,.nav-right > a{padding:12px 18px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .list-row{padding:14px 0;min-height:48px;align-items:center}
  .dir-col h4 a,.foot-col a{padding:10px 0;display:inline-block;min-height:44px;line-height:24px}
  .tabs span{padding:10px 14px;min-height:40px;display:inline-flex;align-items:center}
  .tabs{padding:4px}
  /* Layout */
  .page-head,.section,.foot{padding-left:20px;padding-right:20px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  /* Tables horizontal-scroll on overflow rather than break layout */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{min-width:520px}
  /* Hide the decorative logo mark on narrow screens to free nav space */
  .logo-mark{width:28px;height:28px}
}
@media(max-width:480px){
  .top .l span:nth-child(n+3){display:none}  /* hide tertiary badge */
  .foot-cols{grid-template-columns:1fr 1fr;gap:16px}
  .nav-right a{font-size:14px}
  .btn{padding:12px 16px;font-size:13px}
}