/*
  Visual language follows the "Perplexity AI — Style Reference" on Refero: one warm canvas for every
  surface, charcoal text, a single teal accent kept for active and interactive states, weights 400 and
  500 only, compact spacing, 16px cards with one faint shadow, and pills for tags and small actions.
  The reference is light-only, so this site is too.
*/
:root {
  color-scheme: light;
  --canvas: #faf8f5;
  --text: #27251e;
  --text-secondary: #72706b;
  --text-subtle: #92918b;
  --border: #d1d1cd;
  --border-soft: rgba(39, 26, 0, 0.14);
  --tint: rgba(39, 26, 0, 0.05);
  --accent: #016a71;
  --shadow-card: rgba(0, 0, 0, 0.08) 0 1px 2px 0;
  --radius-card: 16px;
  --radius-field: 12px;
  --radius-button: 6px;
  --radius-pill: 9999px;
  --gap: 8px;
  --section-gap: 32px;
  --sidebar: 224px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Layout rules below set display on some elements, so the hidden attribute needs to win. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 400 14px/1.43 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

strong, b { font-weight: 500; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-button); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--canvas); padding: 8px 12px; border-radius: var(--radius-button); z-index: 10; }
.skip:focus { left: 8px; }

/* Shell: fixed sidebar, centred main column */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 12px;
  border-right: 1px solid var(--border-soft);
}
.brand { display: flex; align-items: center; gap: 8px; padding: 4px 12px; color: var(--text); font-size: 16px; font-weight: 500; }
.brand:hover { text-decoration: none; }
.mark { width: 16px; height: 16px; border-radius: 4px; background: var(--text); flex: none; }

nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-button);
  color: var(--text); font-size: 14px; white-space: nowrap;
}
.nav-item svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.nav-item:hover { background: var(--tint); text-decoration: none; }
.nav-item[aria-current="true"] { background: var(--accent); color: var(--canvas); }

.sidebar-note { margin: 8px 0 0; padding: 0 12px; color: var(--text-subtle); font-size: 12px; line-height: 1.5; }

main { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 24px 48px; }

/* Hero: a centred stack around one large field */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 96px 0 48px; }
h1 { margin: 0 0 8px; font-size: 40px; line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; }
.lead { margin: 0 0 24px; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }

.field {
  display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap;
  width: 100%; max-width: 640px; padding: 12px 12px 12px 16px;
  background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-field);
  box-shadow: var(--shadow-card); text-align: left;
}
.field-label { flex: 1 0 100%; font-size: 12px; line-height: 1.25; color: var(--text-subtle); }
.field code { flex: 1 1 240px; background: none; padding: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }

.pills { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin: 16px 0 0; padding: 0; }
.pills li { padding: 4px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); font-size: 14px; }

.hero-note { margin: 24px 0 0; max-width: 560px; color: var(--text-secondary); }
.status { margin: 16px 0 0; color: var(--text-secondary); font-size: 12px; }

/* Sections are separated by space alone */
section { padding: var(--section-gap) 0 0; }
section + section { margin-top: var(--section-gap); }
h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.33; font-weight: 500; }
h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.5; font-weight: 500; }
.section-lead { margin: 0 0 16px; max-width: 640px; color: var(--text-secondary); }
.muted { color: var(--text-subtle); }

code, pre { font-family: var(--mono); font-size: 12px; }
code { background: var(--tint); padding: 2px 6px; border-radius: var(--radius-button); }
pre { margin: 8px 0; padding: 12px; background: var(--tint); border-radius: var(--radius-field); overflow-x: auto; }
pre code { background: none; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }

/* Small filled action: charcoal on canvas, never a brand colour */
button.copy {
  font: 500 14px/1.43 var(--font);
  padding: 6px 14px; border: 0; border-radius: var(--radius-pill);
  background: var(--text); color: var(--canvas); cursor: pointer;
}
button.copy:hover { background: #000000; }

/* Cards: same canvas, 16px corners, one faint shadow */
.card { background: var(--canvas); border: 1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cards .card { padding: 16px; }
.card ol, .card ul { margin: 0; padding-left: 18px; }
.card li { margin-bottom: 4px; }
.card p { margin: 0 0 8px; color: var(--text-secondary); }
.mono-list { list-style: none; padding: 0 !important; }
.mono-list li { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; padding: 6px 0; margin: 0; color: var(--text); }
.mono-list li + li { border-top: 1px solid var(--border-soft); }

/* Tables */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; }
th { font-size: 12px; line-height: 1.25; font-weight: 400; color: var(--text-secondary); white-space: nowrap; padding-top: 12px; }
tbody tr { border-top: 1px solid var(--border-soft); }
td code { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag { display: inline-block; padding: 2px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); font-size: 12px; line-height: 1.5; color: var(--text); white-space: nowrap; }

/* Tools */
.tool-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tool-grid li { padding: 12px 16px; background: var(--canvas); border: 1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.tool-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tool-grid p { margin: 0; color: var(--text-secondary); }

.try-title { margin-top: 24px; }
.prompts { justify-content: flex-start; margin-top: 0; }
.prompts li { border-radius: var(--radius-field); padding: 8px 12px; }

footer { margin-top: 64px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
footer p { max-width: 640px; margin: 0 0 8px; }
footer strong { color: var(--text); }

/* How it works: an animated walk through one request */
.flow { padding: 16px; display: grid; gap: 16px; }
.flow-map { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1.25fr 24px 1.5fr 24px 1fr; align-items: center; }
.flow-node {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-field);
  font-size: 12px; line-height: 1.5; color: var(--text-secondary);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.flow-node strong { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.flow-kicker { color: var(--text-subtle); }
.flow-node.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.flow-node.is-active .flow-kicker { color: var(--accent); }
.flow-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.flow-chip { padding: 1px 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--text); white-space: nowrap; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.flow-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--canvas); }

.flow-link { position: relative; height: 1px; background: var(--border); }
.flow-link i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; }
.flow-link.is-active i { animation: flow-travel 1s linear infinite; }
.flow-link.is-active.is-reverse i { animation-direction: reverse; }
@keyframes flow-travel {
  0% { left: 0; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}

.flow-stage { display: grid; gap: 12px; }
.flow-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.flow-step {
  font: 400 14px/1.43 var(--font); padding: 6px 12px; border: 0; border-radius: var(--radius-button);
  background: none; color: var(--text); cursor: pointer; white-space: nowrap;
}
.flow-step:hover { background: var(--tint); }
.flow-step[aria-current="step"] { background: var(--accent); color: var(--canvas); }
.flow-panel { min-height: 268px; }
.flow-title { margin: 0 0 2px; font-size: 16px; line-height: 1.5; font-weight: 500; }
.flow-text { margin: 0 0 12px; max-width: 640px; color: var(--text-secondary); }
.flow-output > * { animation: flow-in .35s ease both; }
@keyframes flow-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.flow-quote { margin: 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-field); font-size: 16px; line-height: 1.5; max-width: 640px; }
.flow-code { margin: 0; max-height: 204px; overflow: auto; }
.flow-code span { display: block; white-space: pre; opacity: 0; animation: flow-in .3s ease forwards; }
.flow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.flow-list li { display: flex; gap: 8px; align-items: baseline; opacity: 0; animation: flow-in .3s ease forwards; }
.flow-list li::before { content: "✓"; color: var(--accent); font-weight: 500; }
.flow-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.flow-timeline li { display: flex; align-items: center; gap: 8px; opacity: 0; animation: flow-in .3s ease forwards; }
.flow-timeline li + li::before { content: "→"; color: var(--text-subtle); }
.flow-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; }
.flow-facts dt { color: var(--text-secondary); }
.flow-facts dd { margin: 0; overflow-wrap: anywhere; }
.flow-controls { display: flex; align-items: center; gap: 12px; }
.flow-count { font-size: 12px; }

@media (max-width: 1100px) {
  .flow-map { grid-template-columns: 1fr; justify-items: stretch; }
  .flow-link { width: 1px; height: 16px; margin-left: 24px; }
  .flow-link i { top: 0; left: -3px; }
  .flow-link.is-active i { animation-name: flow-travel-down; }
  .flow-panel { min-height: 300px; }
}
@keyframes flow-travel-down {
  0% { top: 0; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { top: calc(100% - 7px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-link.is-active i { animation: none; opacity: 1; left: calc(50% - 3px); }
  .flow-output > *, .flow-code span, .flow-list li, .flow-timeline li { animation: none; opacity: 1; }
}

/* Account area */
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
button.nav-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; color: var(--text-secondary); }
.tile:hover { text-decoration: none; border-color: var(--accent); }
.tile strong { font-size: 24px; line-height: 1.25; font-weight: 400; color: var(--text); }
.empty { margin: 0; padding: 24px 16px; border: 1px dashed var(--border); border-radius: var(--radius-card); color: var(--text-secondary); text-align: center; }
.empty-action { display: grid; gap: 12px; justify-items: center; margin-top: 16px; }
.empty-action .empty { width: 100%; }
.card-note { margin: 12px 0 0 !important; font-size: 12px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.timeline li { margin: 0; }
.flow-code.tall { max-height: 420px; }
.flow-code code { white-space: pre; }
.flow-list.static li { opacity: 1; animation: none; }
button.copy:disabled { opacity: .6; cursor: default; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
button.copy.small { padding: 3px 10px; font-size: 12px; }
.row-actions { display: inline-flex; gap: 6px; white-space: nowrap; }
.admin-summary { margin: 0 0 12px; }
button.copy.secondary { background: none; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
button.copy.secondary:hover { background: var(--tint); }

/* Narrow screens: the sidebar becomes a top bar with a scrolling row of items */
@media (max-width: 820px) {
  .shell { display: block; }
  .sidebar {
    position: sticky; height: auto; z-index: 5;
    flex-direction: column; gap: 8px; padding: 12px 12px 8px;
    background: var(--canvas); border-right: 0; border-bottom: 1px solid var(--border-soft);
  }
  nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  .nav-item { padding: 6px 10px; }
  .sidebar-note { display: none; }
  .sidebar-foot { margin-top: 0; flex-direction: row; flex-wrap: wrap; }
  button.nav-item { width: auto; }
  html { scroll-padding-top: 108px; }
  main { padding: 0 16px 40px; }
  .hero { padding: 48px 0 24px; }
  h1 { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}