/* Quilt Ecosystem — shared design system
 * One CSS file, dark navy + amber accent, monospace code.
 * Used by every page in the collection.
 */
:root {
  --bg: #0F172A;
  --bg-2: #111B33;
  --bg-3: #18233F;
  --bg-4: #1F2A47;
  --line: #243049;
  --line-2: #2D3A5C;
  --ink: #E5E7EB;
  --ink-2: #94A3B8;
  --ink-3: #64748B;
  --amber: #F59E0B;
  --amber-bg: rgba(245, 158, 11, 0.10);
  --amber-2: #FBBF24;
  --green: #34D399;
  --green-bg: rgba(52, 211, 153, 0.10);
  --red: #F87171;
  --red-bg: rgba(248, 113, 113, 0.10);
  --blue: #60A5FA;
  --blue-bg: rgba(96, 165, 250, 0.10);
  --purple: #A78BFA;
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --r: 10px;
  --r-2: 14px;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
code, pre, .mono, kbd, samp { font-family: var(--mono); }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.1rem 4rem; }
main.narrow { max-width: 720px; }
main.wide { max-width: 1400px; }
section { margin: 2.4rem 0; }
section h2 {
  font-size: 1.3rem;
  margin: 0 0 0.9rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
section h2 .num {
  font-family: var(--mono);
  color: var(--amber);
  font-size: 0.85rem;
  font-weight: 600;
}
section h2 .rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  margin-left: 0.4rem;
}
section h3 { font-size: 1.05rem; margin: 1.5rem 0 0.6rem; }
section p.lead { color: var(--ink-2); margin: 0 0 1rem; max-width: 72ch; }
section p.lead code { color: var(--ink); background: var(--bg-3); padding: 0.05em 0.35em; border-radius: 4px; }

/* Code blocks */
pre {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0.8rem 0 1.2rem;
}
pre code { color: var(--ink); }
code.lang { color: var(--amber); }
code.op { color: var(--blue); }
code.id { color: var(--purple); }
code.str { color: var(--green); }
code.num { color: var(--amber-2); }
code.kw { color: var(--red); }

/* Header / nav */
header.quilt {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 1.1rem;
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(8px);
}
header.quilt .row {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
}
header.quilt .brand {
  font-family: var(--mono); font-size: 1.05rem; font-weight: 700;
  color: var(--ink);
}
header.quilt .brand .dot { color: var(--amber); }
header.quilt nav { display: flex; gap: 1.2rem; flex: 1; }
header.quilt nav a {
  color: var(--ink-2);
  font-size: 0.92rem;
}
header.quilt nav a:hover, header.quilt nav a.active { color: var(--amber); text-decoration: none; }
header.quilt .right { color: var(--ink-3); font-size: 0.85rem; font-family: var(--mono); }

/* Hero */
.hero {
  padding: 3rem 0 1.5rem;
  text-align: left;
}
.hero h1 {
  font-size: 2.4rem;
  margin: 0 0 0.4rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero .lede { color: var(--ink-2); font-size: 1.1rem; max-width: 60ch; margin: 0.5rem 0 0; }
.hero .meta { color: var(--ink-3); font-size: 0.85rem; margin-top: 1.4rem; font-family: var(--mono); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--amber); transform: translateY(-2px); }
.card h3 { margin: 0 0 0.4rem; font-size: 1.0rem; color: var(--ink); }
.card p { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
.card .tag {
  display: inline-block;
  background: var(--bg-3);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  margin-top: 0.6rem;
}

/* Buttons */
button, .btn {
  display: inline-block;
  background: var(--amber);
  color: var(--bg);
  font-family: var(--sans);
  font-weight: 600;
  border: none;
  border-radius: var(--r);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s;
}
button:hover, .btn:hover { background: var(--amber-2); }
button.secondary, .btn.secondary {
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--line);
}
button.secondary:hover { background: var(--bg-4); }
button.ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
button.ghost:hover { color: var(--ink); border-color: var(--ink-2); }

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}
th, td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
th { color: var(--ink-2); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
td code { background: var(--bg-3); padding: 0.05em 0.35em; border-radius: 4px; font-size: 0.85rem; }

/* Tags / pills */
.pill {
  display: inline-block;
  background: var(--bg-3);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.15em 0.55em;
  border-radius: 999px;
}
.pill.amber { background: var(--amber-bg); color: var(--amber); }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.blue { background: var(--blue-bg); color: var(--blue); }
.pill.red { background: var(--red-bg); color: var(--red); }

/* Footer */
footer.quilt {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding: 2rem 1.1rem;
  color: var(--ink-3);
  font-size: 0.85rem;
}
footer.quilt .row { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem; }
footer.quilt a { color: var(--ink-2); }
footer.quilt a:hover { color: var(--amber); }
footer.quilt .col { flex: 1; min-width: 200px; }
footer.quilt .col h4 { color: var(--ink-2); margin: 0 0 0.6rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
footer.quilt .col ul { list-style: none; padding: 0; margin: 0; }
footer.quilt .col li { margin-bottom: 0.35rem; }

/* REPL / playground specific */
.repl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 480px; }
.repl-grid > .editor, .repl-grid > .journal { min-width: 0; }
.editor {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0;
  display: flex; flex-direction: column;
}
.editor .toolbar {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
  display: flex; gap: 0.5rem; align-items: center;
  background: var(--bg-2);
  border-radius: var(--r) var(--r) 0 0;
}
.editor .toolbar .file { color: var(--ink-3); font-size: 0.82rem; font-family: var(--mono); flex: 1; }
.editor textarea {
  flex: 1;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.88rem;
  border: none;
  outline: none;
  padding: 1rem 1.2rem;
  resize: none;
  line-height: 1.5;
  tab-size: 2;
}
.journal {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.journal .toolbar {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  display: flex; gap: 0.8rem; align-items: center;
}
.journal .toolbar .title { font-size: 0.85rem; color: var(--ink-2); flex: 1; }
.journal .events {
  flex: 1; overflow-y: auto;
  padding: 0.6rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
}
.journal .event { padding: 0.3rem 0.5rem; border-radius: 4px; margin-bottom: 0.15rem; }
.journal .event .op { color: var(--blue); margin-right: 0.5rem; font-weight: 600; }
.journal .event .t { color: var(--ink-3); font-size: 0.72rem; margin-right: 0.5rem; }
.journal .event .id { color: var(--purple); }
.journal .event.BIND { background: var(--amber-bg); }
.journal .event.LINK { background: var(--blue-bg); }
.journal .event.EFFECT { background: var(--green-bg); }
.journal .event.VIEW { background: var(--bg-2); }
.journal .event.TICK { background: var(--red-bg); }

/* App-specific */
.app-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.app-form input, .app-form select, .app-form textarea {
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.88rem;
  outline: none;
}
.app-form input:focus, .app-form select:focus, .app-form textarea:focus { border-color: var(--amber); }
.app-output {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
}
.saved-banner {
  position: fixed;
  bottom: 1.2rem; right: 1.2rem;
  background: var(--green-bg);
  border: 1px solid var(--green);
  color: var(--green);
  padding: 0.6rem 1rem;
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 0.85rem;
  z-index: 100;
  display: none;
}
.saved-banner.show { display: block; }

/* Mobile */
@media (max-width: 700px) {
  .repl-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.8rem; }
  header.quilt nav { display: none; }
}