/* Venture design kit. Copy kit.css, kit.js and fonts/ into your site as site/kit/ and set the brand in
   your own stylesheet: :root { --brand: #hex; --brand-ink: #fff; }  Usage and examples: README.md. */

/* Fonts: self-hosted because the edge's CSP allows fonts from 'self' only. */
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-grotesque.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fonts/atkinson-hyperlegible-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(fonts/atkinson-hyperlegible-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Brand: every venture overrides these two, and may override --accent. */
  --brand: #2f5bea;
  --brand-ink: #ffffff;
  --accent: #ff7a45;

  /* Surfaces and text. */
  --bg: #f7f6f2;
  --surface: #ffffff;
  --surface-2: #efede7;
  --ink: #17181c;
  --ink-2: #565a63;
  --line: #e2dfd7;
  --brand-soft: color-mix(in oklab, var(--brand) 12%, var(--bg));
  --brand-text: color-mix(in oklab, var(--brand) 85%, black);

  /* Feedback: each state also carries a glyph and a pattern, so colour is never the only signal. */
  --hit: #0e8f7e;
  --hit-ink: #ffffff;
  --near: #e8892b;
  --near-ink: #1d1206;
  --miss: #d9d6ce;
  --miss-ink: #3b3e45;

  /* Type. Pick a pairing with a class on <html>: font-play, font-clean or font-editorial. */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.7vw, 2.9rem);
  --step-4: clamp(2.2rem, 1.6rem + 3vw, 4rem);

  /* Space, shape, depth. */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --radius-s: 8px; --radius: 14px; --radius-l: 22px; --pill: 999px;
  --shadow-1: 0 1px 2px rgb(20 20 30 / 0.06), 0 1px 1px rgb(20 20 30 / 0.04);
  --shadow-2: 0 2px 6px rgb(20 20 30 / 0.06), 0 10px 30px -10px rgb(20 20 30 / 0.18);
  --shadow-3: 0 4px 12px rgb(20 20 30 / 0.08), 0 30px 60px -20px rgb(20 20 30 / 0.3);
  --max: 72rem;
  --narrow: 40rem;
  color-scheme: light dark;
}
.font-play { --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-body: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif; }
.font-clean { --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; }
.font-editorial { --font-display: "Fraunces", ui-serif, Georgia, serif; --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121317; --surface: #1b1d22; --surface-2: #24262d; --ink: #f1f0ec; --ink-2: #a6a9b1; --line: #2f323a;
    --brand-soft: color-mix(in oklab, var(--brand) 22%, var(--bg));
    --brand-text: color-mix(in oklab, var(--brand) 55%, white);
    --hit: #19a893; --near: #f09a45; --miss: #3a3d45; --miss-ink: #d6d7db;
    --shadow-2: 0 2px 6px rgb(0 0 0 / 0.3), 0 10px 30px -10px rgb(0 0 0 / 0.6);
    --shadow-3: 0 30px 60px -20px rgb(0 0 0 / 0.7);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 var(--step-0)/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
main { flex: 1; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--s3); font-weight: 750; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { margin: 0 0 var(--s4); }
a { color: var(--brand-text); text-underline-offset: 0.18em; }
img, svg { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand); color: var(--brand-ink); }
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--s4); }
.narrow { max-width: var(--narrow); }
.stack > * + * { margin-top: var(--s4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }
.center { text-align: center; }
.eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-text); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: logo mark + name, optional nav. The edge injects the footer; it is styled below. */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; gap: var(--s3); min-height: 3.5rem; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font: 750 1.15rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand img, .brand svg { width: 2rem; height: 2rem; border-radius: 9px; }
.site-header nav { margin-left: auto; display: flex; gap: var(--s4); font-size: var(--step--1); }
.site-header nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.site-header nav a:hover { color: var(--ink); }
.icon-btn { margin-left: auto; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 1rem/1 var(--font-body); cursor: pointer; text-decoration: none; }
body > footer { margin-top: var(--s7); padding: var(--s5) var(--s4) var(--s6); border-top: 1px solid var(--line); text-align: center; color: var(--ink-2); font-size: var(--step--1); }
body > footer p { margin: 0; }
body > footer a { color: inherit; }

/* Hero: name, one-line promise, primary action, visual. Stacks on phones with the action first. */
.hero { padding-block: var(--s5) var(--s6); }
.hero .container { display: grid; gap: var(--s4); align-items: center; }
.hero-title { font-size: var(--step-4); margin-bottom: var(--s2); }
.promise { font-size: var(--step-1); color: var(--ink-2); max-width: 32ch; margin-bottom: var(--s5); line-height: 1.35; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.hero-visual { position: relative; }
.hero-compact { padding-block: var(--s4) var(--s3); }
.hero-compact .hero-title { font-size: var(--step-3); }
.hero-compact .promise { margin-bottom: var(--s3); font-size: var(--step-0); }
@media (min-width: 860px) {
  .hero { padding-block: var(--s8); }
  .hero .container { grid-template-columns: 1fr 1.1fr; gap: var(--s7); }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 2.9rem; padding: 0.7rem 1.25rem; border-radius: var(--pill); border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font: 700 var(--step-0)/1.1 var(--font-body);
  text-decoration: none; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.btn:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--brand) 70%, transparent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--brand-text); }
.btn-ghost:hover { background: var(--brand-soft); box-shadow: none; }
.btn-lg { min-height: 3.4rem; padding-inline: 1.75rem; font-size: var(--step-1); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* Inputs. The edge refuses form elements, so handle Enter in script (Kit.suggest does). */
.input {
  width: 100%; min-height: 3rem; padding: 0.7rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: 400 1rem/1.3 var(--font-body);
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.field { display: grid; gap: var(--s1); font-weight: 700; font-size: var(--step--1); }
.input-row { display: flex; gap: var(--s2); }
.input-row .input { flex: 1; min-width: 0; }
.suggest { position: relative; flex: 1; min-width: 0; }
.suggest-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: var(--s1); list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-3); max-height: 16rem; overflow: auto;
}
.suggest-list li { padding: 0.6rem 0.75rem; border-radius: var(--radius-s); cursor: pointer; }
.suggest-list li[aria-selected="true"], .suggest-list li:hover { background: var(--brand-soft); }
.suggest-list mark { background: none; color: var(--brand-text); font-weight: 700; }

/* Cards and sections */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--s5); box-shadow: var(--shadow-1); }
.card-raised { box-shadow: var(--shadow-3); border-color: transparent; }
.section { padding-block: var(--s7); }
.section-alt { background: var(--surface-2); }
.grid-3 { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.feature h3 { margin-bottom: var(--s2); }
.feature p { color: var(--ink-2); margin: 0; }
.feature .icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); font-size: 1.25rem; margin-bottom: var(--s3); }
.badge { display: inline-flex; align-items: center; gap: var(--s1); padding: 0.2rem 0.65rem; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand-text); font-size: var(--step--1); font-weight: 700; }
details.more { border-top: 1px solid var(--line); padding-block: var(--s3); }
details.more summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
details.more summary::after { content: "+"; font-size: 1.3em; line-height: 1; color: var(--ink-2); }
details.more[open] summary::after { content: "\2212"; }
details.more > :not(summary) { margin-top: var(--s3); color: var(--ink-2); }

/* Game board. Each guess is a row: a name, then one tile per clue. Tiles wrap into a grid on
   phones instead of overflowing the way a six-column table does. */
.game { max-width: 36rem; margin-inline: auto; }
.pips { display: flex; gap: 6px; align-items: center; }
.pips i { width: 0.7rem; height: 0.7rem; border-radius: var(--pill); background: var(--line); }
.pips i.used { background: var(--brand); }
.board { display: grid; gap: var(--s2); margin: var(--s4) 0; padding: 0; list-style: none; }
.board-head, .guess-tiles { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 6px; }
.board-head span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.guess { display: grid; gap: 6px; }
.guess-name { font: 700 var(--step-0)/1.2 var(--font-display); display: flex; justify-content: space-between; gap: var(--s2); }
.guess-name small { color: var(--ink-2); font: 400 var(--step--1) var(--font-body); }
.guess-empty .guess-tiles .tile { background: transparent; border: 2px dashed var(--line); min-height: 2.75rem; }
.tile {
  position: relative; display: grid; place-items: center; align-content: center; min-height: 3.6rem; padding: 0.35rem 0.2rem;
  border-radius: var(--radius-s); background: var(--surface-2); color: var(--ink); text-align: center;
  font: 700 0.95rem/1.1 var(--font-body); border: 2px solid transparent;
}
.tile small { display: block; font-size: 0.68rem; font-weight: 400; opacity: 0.85; margin-top: 2px; }
.tile::after { position: absolute; top: 3px; right: 5px; font-size: 0.7rem; line-height: 1; }
.tile[data-state="hit"] { background: var(--hit); color: var(--hit-ink); }
.tile[data-state="hit"]::after { content: "\2713"; }
.tile[data-state="near"] { background: repeating-linear-gradient(-45deg, var(--near) 0 8px, color-mix(in oklab, var(--near) 82%, white) 8px 14px); color: var(--near-ink); }
.tile[data-state="near"]::after { content: "\2248"; }
.tile[data-state="miss"] { background: var(--surface); border-color: var(--miss); color: var(--miss-ink); }
.tile[data-state="miss"]::after { content: "\2715"; opacity: 0.7; }
.tile[data-dir="up"]::before, .tile[data-dir="down"]::before { font-size: 1.2rem; line-height: 1; margin-bottom: 1px; }
.tile[data-dir="up"]::before { content: "\2191"; }
.tile[data-dir="down"]::before { content: "\2193"; }
.guess.reveal .tile { animation: tile-in 0.42s cubic-bezier(.2,.8,.3,1.2) both; }
.guess.reveal .tile:nth-child(2) { animation-delay: 0.07s; } .guess.reveal .tile:nth-child(3) { animation-delay: 0.14s; }
.guess.reveal .tile:nth-child(4) { animation-delay: 0.21s; } .guess.reveal .tile:nth-child(5) { animation-delay: 0.28s; }
.guess.reveal .tile:nth-child(6) { animation-delay: 0.35s; }
@keyframes tile-in { from { transform: rotateX(80deg) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--step--1); color: var(--ink-2); }
.legend .tile { display: inline-grid; min-height: 1.6rem; width: 2.2rem; vertical-align: middle; margin-right: 4px; }
@media (min-width: 600px) { .tile { min-height: 4rem; font-size: 1rem; } }

/* Results and share */
.result { text-align: center; }
.result-title { font-size: var(--step-3); margin-bottom: var(--s1); }
.result .answer { font: 700 var(--step-1) var(--font-display); color: var(--brand-text); }
.share-text { font: 400 1.1rem/1.35 var(--font-mono); white-space: pre; background: var(--surface-2); border-radius: var(--radius); padding: var(--s3) var(--s4); display: inline-block; text-align: left; margin: var(--s4) 0; max-width: 100%; overflow-x: auto; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: var(--s4) 0; }
.stat { text-align: center; padding: var(--s2); border-radius: var(--radius); background: var(--surface-2); }
.stat b { display: block; font: 800 var(--step-1)/1.1 var(--font-display); white-space: nowrap; }
.stat span { font-size: 0.75rem; color: var(--ink-2); }
.bars { display: grid; gap: 4px; margin-bottom: var(--s4); text-align: left; font-size: var(--step--1); }
.bars div { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s2); align-items: center; }
.bars i { display: block; height: 1.3rem; min-width: 1.6rem; border-radius: 6px; background: var(--miss); color: var(--miss-ink); font: 700 0.75rem/1.3rem var(--font-body); text-align: right; padding-right: 6px; font-style: normal; }
.bars i.on { background: var(--brand); color: var(--brand-ink); }
.toast { position: fixed; left: 50%; bottom: var(--s6); z-index: 50; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 0.7rem 1.1rem; border-radius: var(--pill); background: var(--ink); color: var(--bg); font-weight: 700; box-shadow: var(--shadow-3); transition: 0.2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Tool panel with a drop zone */
.tool { padding: var(--s4); }
.dropzone {
  position: relative; display: grid; place-items: center; gap: var(--s2); text-align: center; min-height: 13rem; padding: var(--s5);
  border: 2px dashed color-mix(in oklab, var(--brand) 45%, var(--line)); border-radius: var(--radius); background: var(--brand-soft); cursor: pointer; transition: 0.15s;
}
.dropzone:hover, .dropzone.over { border-style: solid; border-color: var(--brand); transform: scale(1.01); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .drop-icon { width: 3.5rem; height: 3.5rem; border-radius: 16px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-size: 1.6rem; box-shadow: var(--shadow-2); }
.dropzone strong { font: 700 var(--step-1) var(--font-display); }
.assure { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s3) 0 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--ink-2); }
.assure li::before { content: "\2713"; color: var(--hit); font-weight: 800; margin-right: 6px; }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; text-align: center; }
.compare b { font: 800 var(--step-2) var(--font-display); display: block; }
.compare .arrow { font-size: 1.5rem; color: var(--ink-2); }

/* Product: a real preview of the file, what's included, the price */
.preview { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-3); background: var(--surface); border: 1px solid var(--line); }
.preview-bar { display: flex; gap: 6px; align-items: center; padding: 0.55rem 0.8rem; background: var(--surface-2); font-size: 0.75rem; color: var(--ink-2); }
.preview-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line); }
.preview-bar span { margin-left: var(--s2); }
.sheet { width: 100%; border-collapse: collapse; font: 400 0.78rem/1.2 var(--font-body); font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { border: 1px solid var(--line); padding: 0.35rem 0.45rem; text-align: left; white-space: nowrap; }
.sheet thead th { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.sheet td.n { text-align: right; }
.sheet tr.total td { font-weight: 700; background: var(--brand-soft); }
.sheet-wrap { overflow: hidden; }
.sheet-tabs { display: flex; gap: 2px; padding: 0 0.5rem; background: var(--surface-2); font-size: 0.72rem; }
.sheet-tabs span { padding: 0.35rem 0.7rem; color: var(--ink-2); }
.sheet-tabs span.on { background: var(--surface); color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--brand); }
.checks { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s2); }
.checks li { display: flex; gap: var(--s2); }
.checks li::before { content: "\2713"; flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); font-size: 0.8rem; font-weight: 800; margin-top: 0.1rem; }
.price { font: 800 var(--step-3)/1 var(--font-display); }
.price small { font: 400 var(--step--1) var(--font-body); color: var(--ink-2); margin-left: var(--s1); }

/* Responsive table: give each td a data-label; under 480px every row becomes a card. */
.rtable { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.rtable th { text-align: left; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding: var(--s2) var(--s3); border-bottom: 2px solid var(--line); }
.rtable td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 480px) {
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s3); margin-bottom: var(--s3); }
  .rtable td { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s2); padding: var(--s2) 0; border: 0; }
  .rtable td + td { border-top: 1px solid var(--line); }
  .rtable td::before { content: attr(data-label); font-weight: 700; color: var(--ink-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}