/* ==========================================================================
   TFL Partners — developer examples site
   Shared stylesheet for the examples index + individual example pages.
   Design: design_handoff_developer_examples. Colors authored in oklch.
   ========================================================================== */

:root {
  --paper: oklch(0.975 0.003 265);
  --surface: oklch(1 0 0);
  --stage: oklch(0.985 0.003 265);
  --line: oklch(0.91 0.006 265);
  --line-soft: oklch(0.94 0.005 265);
  --line-dashed: oklch(0.86 0.008 265);
  --ink: oklch(0.2 0.015 265);
  --ink-2: oklch(0.35 0.012 265);
  --muted: oklch(0.52 0.012 265);
  --muted-2: oklch(0.5 0.012 265);
  --muted-3: oklch(0.62 0.012 265);
  --ink-dark: oklch(0.19 0.02 265);
  --code-bg: oklch(0.15 0.018 265);
  --code-line: oklch(0.31 0.02 265);
  --code-fg: oklch(0.87 0.01 265);
  --accent: oklch(0.55 0.19 258);
  --accent-hover: oklch(0.45 0.19 258);
  --accent-ink: oklch(0.42 0.03 258);
  --accent-tint: oklch(0.96 0.012 258);
  --accent-tint-line: oklch(0.91 0.02 258);
  --success: oklch(0.72 0.17 155);
  --sans: 'Instrument Sans', Helvetica, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- base ---------------------------------------------------------------- */
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: oklch(0.55 0.19 258 / 0.2); }
section[id] { scroll-margin-top: 88px; }

.ex-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.ex-wrap--page { max-width: 1280px; }

/* ---- sticky header ------------------------------------------------------- */
.exh {
  position: sticky; top: 0; z-index: 50; height: 64px;
  background: oklch(0.975 0.003 265 / 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.exh-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; }
.ex-wrap--page ~ * .exh-inner, .exh--page .exh-inner { max-width: 1280px; }
.exh-brand { display: flex; align-items: center; gap: 10px; }
.exh-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--ink); display: block; object-fit: contain; }
.exh-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.exh-sub { font-size: 13px; font-weight: 400; color: var(--muted); }
.exh-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.exh-link { font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 8px 12px; border-radius: 8px; transition: background-color .12s, color .12s; }
.exh-link:hover { background: oklch(0.93 0.006 265); color: var(--ink); }
.exh-btn {
  font-size: 14px; font-weight: 600; color: oklch(0.98 0 0); background: var(--ink);
  padding: 9px 16px; border-radius: 9px; margin-left: 8px; border: 0; cursor: pointer;
  font-family: var(--sans); transition: background-color .12s;
}
.exh-btn:hover { background: oklch(0.3 0.015 265); color: oklch(0.98 0 0); }

/* ---- hero (dark band) ---------------------------------------------------- */
.exhero {
  background: var(--ink-dark);
  background-image: radial-gradient(circle at 84% -20%, oklch(0.55 0.19 258 / 0.4), transparent 58%);
  border-bottom: 1px solid var(--line);
}
.exhero-grid {
  max-width: 1240px; margin: 0 auto; padding: 84px 32px 92px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px; align-items: center;
}
.exhero-left { animation: riseIn .5s ease both; }
.exhero-right { animation: riseIn .6s ease .08s both; }
.exhero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: oklch(0.8 0.08 258); border: 1px solid oklch(0.4 0.05 258); border-radius: 999px; padding: 6px 12px;
}
.exhero-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success); }
.exhero-h1 {
  font-size: 58px; line-height: 1.03; letter-spacing: -0.032em; font-weight: 600;
  margin: 24px 0 20px; color: oklch(0.98 0.004 265); text-wrap: balance;
}
.exhero-body { font-size: 19px; line-height: 1.55; color: oklch(0.78 0.012 265); max-width: 52ch; text-wrap: pretty; margin: 0 0 32px; }
.exhero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.exhero-actions a { font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 10px; transition: background-color .14s, color .14s; }
.exhero-btn-primary { background: oklch(0.97 0.004 265); color: var(--ink-dark); }
.exhero-btn-primary:hover { background: oklch(1 0 0); color: var(--ink-dark); }
.exhero-btn-ghost { background: transparent; border: 1px solid oklch(0.4 0.02 265); color: oklch(0.97 0.004 265); }
.exhero-btn-ghost:hover { background: oklch(0.26 0.02 265); color: oklch(0.97 0.004 265); }

/* ---- code card (hero + demo embed) -------------------------------------- */
.excode { background: var(--code-bg); border: 1px solid var(--code-line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -20px oklch(0.1 0.02 265 / 0.8); }
.excode-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid oklch(0.27 0.02 265); }
.excode-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: oklch(0.64 0.012 265); }
.excode-copy { font-family: var(--mono); font-size: 11px; color: oklch(0.88 0.01 265); background: oklch(0.24 0.02 265); border: 1px solid oklch(0.34 0.02 265); border-radius: 7px; padding: 5px 10px; cursor: pointer; transition: background-color .12s; }
.excode-copy:hover { background: oklch(0.3 0.02 265); }
.excode pre { margin: 0; padding: 18px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.85; color: var(--code-fg); overflow-x: auto; }
.tok-c { color: oklch(0.62 0.012 265); }
.tok-t { color: oklch(0.75 0.13 258); }
.tok-a { color: oklch(0.82 0.11 95); }
.tok-s { color: oklch(0.78 0.13 155); }

/* hero stat row */
.exstats { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.exstat { border: 1px solid var(--code-line); border-radius: 11px; padding: 14px; }
.exstat-num { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: oklch(0.97 0.004 265); }
.exstat-label { font-size: 12px; color: oklch(0.7 0.012 265); margin-top: 2px; }

/* ---- catalog ------------------------------------------------------------- */
.excat { padding: 56px 32px 24px; max-width: 1240px; margin: 0 auto; }
.excat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 26px; }
.excat-h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.024em; margin: 0 0 8px; }
.excat-sub { font-size: 16px; color: var(--muted); max-width: 62ch; text-wrap: pretty; margin: 0; }
.exsearch { flex: 0 1 320px; min-width: 260px; position: relative; }
.exsearch-glyph { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 13px; color: var(--muted-3); pointer-events: none; }
.exsearch-input { width: 100%; font-size: 14.5px; font-family: var(--sans); background: var(--surface); border: 1px solid oklch(0.89 0.006 265); border-radius: 10px; padding: 12px 14px 12px 32px; outline: none; color: var(--ink); }
.exsearch-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.55 0.19 258 / 0.14); }
.exchips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.exchip { font-size: 13.5px; font-weight: 500; font-family: var(--sans); padding: 8px 14px; border-radius: 999px; border: 1px solid oklch(0.89 0.006 265); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: border-color .12s, background-color .12s, color .12s; }
.exchip:hover { border-color: oklch(0.78 0.04 258); }
.exchip.is-active { background: var(--ink); color: oklch(0.98 0 0); border-color: var(--ink); }

.exgroup { padding: 38px 0 6px; }
.exgroup[hidden] { display: none; }
.exgroup-label { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.exgroup-h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: oklch(0.45 0.012 265); margin: 0; }
.exgroup-rule { flex: 1; height: 1px; background: var(--line); }
.exgroup-count { font-family: var(--mono); font-size: 11.5px; color: var(--muted-3); }
.excards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.excard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: inherit; transition: transform .18s, box-shadow .18s, border-color .18s; }
.excard[hidden] { display: none; }
.excard:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -18px oklch(0.2 0.02 265 / 0.35); border-color: oklch(0.78 0.04 258); color: inherit; }
.excard-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.excard-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.excard-title { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.excard-arrow { font-size: 15px; color: var(--muted-3); }
.excard-desc { font-size: 14px; line-height: 1.5; color: var(--muted-2); text-wrap: pretty; margin: 0; }
.excard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.extag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); background: oklch(0.955 0.005 265); border-radius: 999px; padding: 4px 9px; }

.exempty { padding: 72px 0; text-align: center; }
.exempty[hidden] { display: none; }
.exempty-1 { font-size: 17px; font-weight: 600; color: oklch(0.3 0.012 265); }
.exempty-2 { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ---- footer -------------------------------------------------------------- */
.exfoot { border-top: 1px solid var(--line); margin-top: 60px; padding: 40px 32px 64px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; max-width: 1240px; margin-left: auto; margin-right: auto; }
.ex-wrap--page + .exfoot, .exfoot--page { max-width: 1280px; }
.exfoot-code { font-family: var(--mono); font-size: 12.5px; color: oklch(0.4 0.012 265); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }
.exfoot-text { font-size: 14px; color: var(--muted); }
.exfoot-copy { margin-left: auto; font-size: 13px; color: var(--muted-3); }
.exfoot-back { font-size: 14px; font-weight: 600; }

/* ---- breadcrumbs (example page) ----------------------------------------- */
.exbc { padding: 22px 0 0; display: flex; gap: 8px; font-size: 13px; align-items: center; }
.exbc a { color: oklch(0.5 0.012 265); }
.exbc a:hover { color: var(--accent); }
.exbc-mid { color: oklch(0.55 0.012 265); }
.exbc-cur { color: oklch(0.25 0.012 265); font-weight: 500; }
.exbc-sep { color: oklch(0.75 0.012 265); }

/* ---- page header (example page) ----------------------------------------- */
.expage-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: end; padding: 28px 0 40px; border-bottom: 1px solid var(--line); }
.expage-eyebrow { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; color: oklch(0.55 0.13 258); margin-bottom: 14px; }
.expage-h1 { font-size: 46px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; margin: 0; }
.expage-body { font-size: 18px; line-height: 1.55; color: var(--muted-2); max-width: 62ch; text-wrap: pretty; margin: 16px 0 0; }
.expage-body code { font-family: var(--mono); font-size: 15px; color: oklch(0.4 0.03 258); }
.expage-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.expage-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; }
.expage-stat-num { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.expage-stat-label { font-size: 12.5px; color: oklch(0.55 0.012 265); }
.expage-loader { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- body grid + sidebar TOC -------------------------------------------- */
.exbody { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; padding: 40px 0 96px; align-items: start; }
/* Single-column body for demos with no sidebar TOC (e.g. the seat map). */
.exbody--solo { grid-template-columns: 1fr; }
.exside { position: sticky; top: 88px; }
.exside-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted-2); padding: 0 12px 14px; }
.exside-back:hover { color: var(--accent); }
.exside-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: oklch(0.55 0.012 265); padding: 0 12px 12px; }
.extoc { display: flex; flex-direction: column; gap: 1px; }
.extoc-item { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; line-height: 1.35; font-weight: 400; padding: 8px 12px; border-radius: 8px; color: oklch(0.48 0.012 265); transition: background-color .12s; }
.extoc-item:hover { background: oklch(0.94 0.005 265); color: oklch(0.48 0.012 265); }
.extoc-num { font-family: var(--mono); font-size: 10.5px; color: oklch(0.68 0.012 265); }
.extoc-item.is-active { color: var(--ink); background: oklch(0.93 0.006 265); font-weight: 600; }
.extoc-item.is-active .extoc-num { color: var(--accent); }
.exmain { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

/* ---- demo block ---------------------------------------------------------- */
.exdemo { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; position: relative; z-index: 1; transition: margin .22s ease, width .22s ease; }
.exdemo.is-wide { margin-left: -280px; width: calc(100% + 280px); z-index: 20; }
.exdemo-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.exdemo-headleft { flex: 1 1 340px; }
.exdemo-titlerow { display: flex; align-items: baseline; gap: 10px; }
.exdemo-num { font-family: var(--mono); font-size: 11px; color: oklch(0.6 0.012 265); }
.exdemo-h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.018em; margin: 0; }
.exdemo-desc { font-size: 14.5px; line-height: 1.55; color: var(--muted-2); margin: 8px 0 0; text-wrap: pretty; }
.exdemo-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.exattr { font-family: var(--mono); font-size: 11px; color: var(--accent-ink); background: var(--accent-tint); border: 1px solid var(--accent-tint-line); border-radius: 6px; padding: 4px 8px; }
.exwide { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; font-family: var(--sans); border-radius: 7px; padding: 5px 10px; border: 1px solid oklch(0.89 0.006 265); background: var(--surface); color: oklch(0.4 0.012 265); cursor: pointer; transition: border-color .12s, background-color .12s, color .12s; }
.exwide:hover { border-color: oklch(0.72 0.04 258); }
.exwide.is-on { background: var(--accent-tint); color: oklch(0.42 0.11 258); border-color: oklch(0.85 0.05 258); }
.exwide-glyph { font-family: var(--mono); font-size: 12px; letter-spacing: -0.05em; }

.exstage { padding: 24px; background: var(--stage); }
.exmount { border: 1px dashed var(--line-dashed); border-radius: 12px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; padding: 16px; }
.exmount > * { width: 100%; }

.exembed { padding: 0 24px 22px; background: var(--stage); }
.exembed .excode { box-shadow: none; border-radius: 11px; }
.exembed .excode-bar { padding: 9px 14px; border-bottom: 1px solid oklch(0.25 0.02 265); }
.exembed pre { padding: 14px; font-size: 12px; line-height: 1.7; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .exhero-grid { grid-template-columns: 1fr; gap: 40px; padding: 64px 32px 72px; }
  .expage-head { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .exbody { grid-template-columns: 1fr; gap: 24px; }
  .exside { position: static; top: auto; }
  .extoc { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .exwide { display: none; }
  .exdemo.is-wide { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .ex-wrap, .exhero-grid, .excat, .exfoot, .exh-inner { padding-left: 20px; padding-right: 20px; }
  .excards { grid-template-columns: 1fr; }
  .exhero-h1 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .exhero-left, .exhero-right { animation: none; }
  .exdemo { transition: none; }
}

@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }