/* nyc-311-mcp site. Colors, fonts and header follow SLAM (slam.beta.nyc). */
:root {
  --blue: #2359a8;
  --blue-secondary: #b8d6ff;
  --ink: #414141;
  --line: #949494;
  --bg-soft: #eef4ff;
  --red: #b3261e;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-head: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.5;
}
body { margin: 0; }
a { color: var(--blue); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: .5rem; background: #fff; padding: .25rem .5rem; z-index: 10; }

header.site { background: var(--blue); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; padding: .75rem 1.25rem; }
header.site a { color: #fff; }
header.site .brand { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
header.site .tag { color: var(--blue); background: #fff; border-radius: 3px; margin-left: .5rem; padding: .1rem .5rem; font-size: .875rem; }
header.site .site-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-left: auto; }
header.site .site-nav a { font-weight: 600; text-decoration: none; }
header.site .site-nav a:hover, header.site .site-nav a:focus, header.site .site-nav a[aria-current=page] { text-decoration: underline; }

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
main { padding: 1rem 0 2rem; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.25; }
h1 { font-size: 1.9rem; margin: 1rem 0 .5rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.1rem; margin: 1.25rem 0 .25rem; }
.lede { font-size: 1.1rem; max-width: 46rem; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-soft); padding: .05rem .3rem; border-radius: 3px; }
pre { background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: .75rem 1rem; overflow-x: auto; }
pre code { background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; margin: .75rem 0; font-size: .95rem; }
th, td { border: 1px solid #d0d7de; padding: .4rem .6rem; text-align: left; vertical-align: top; }
th { background: var(--bg-soft); }

.safety { border-left: 4px solid var(--red); background: #fdf2f1; padding: .75rem 1rem; margin: 1rem 0; }
.note { border-left: 4px solid var(--blue); background: var(--bg-soft); padding: .75rem 1rem; margin: 1rem 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.card { border: 1px solid #d0d7de; border-radius: 8px; padding: 1rem; }
.card h3 { margin-top: 0; }
.card .count { font-family: var(--font-head); font-weight: 700; color: var(--blue); }
.button { display: inline-block; background: var(--blue); color: #fff; padding: .5rem 1rem; border-radius: 6px; text-decoration: none; font-weight: 600; }
.button.secondary { background: #fff; color: var(--blue); border: 2px solid var(--blue); }

/* Tool listing */
.toc { columns: 2 16rem; padding-left: 1.25rem; }
.tool { border-top: 1px solid #d0d7de; padding-top: .5rem; margin-top: 1.5rem; }
.tool h3 code { font-size: 1.05rem; }
.badges { display: flex; gap: .4rem; flex-wrap: wrap; margin: .25rem 0 .5rem; }
.badge { font-size: .8rem; border-radius: 999px; padding: .05rem .6rem; border: 1px solid var(--line); }
.badge.key { border-color: #9a6700; color: #7a5200; }
.badge.nokey { border-color: #1a7f37; color: #1a7f37; }
.badge.new { background: var(--blue); color: #fff; border-color: var(--blue); }
.asks { margin: .25rem 0 .75rem; }
.asks li { margin: .15rem 0; }

/* Demo: a replay of a real question and answer */
.demo { border: 1px solid #c8d3e6; border-radius: 10px; background: #fff; margin: .75rem 0 1rem; overflow: hidden; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--bg-soft); padding: .35rem .75rem; font-size: .8rem; }
.demo-bar button { font: inherit; background: #fff; border: 1px solid var(--blue); color: var(--blue); border-radius: 4px; padding: .1rem .5rem; cursor: pointer; }
.demo-body { padding: .75rem; }
.msg-user { margin-left: auto; max-width: 85%; width: fit-content; background: var(--blue); color: #fff; border-radius: 12px 12px 2px 12px; padding: .5rem .75rem; }
.msg-user .typed::after { content: "▍"; animation: blink 1s steps(1) infinite; }
.demo.done .msg-user .typed::after, .demo.static .msg-user .typed::after { content: ""; }
.call { margin: .6rem 0 .4rem; font-family: var(--font-mono); font-size: .8rem; color: #555; }
.call .name { background: #eef1f5; border: 1px solid #d0d7de; border-radius: 4px; padding: .05rem .35rem; color: #1f2328; }
.answer { font-family: var(--font-mono); font-size: .8rem; background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: .5rem .75rem; margin: 0; white-space: pre-wrap; word-break: break-word; }
.answer .gap { color: #8c959f; }
.answer .closing { color: var(--red); }
.caption { font-size: .9rem; margin: .5rem 0 0; }
.demo .step { opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.demo .step.shown, .demo.static .step { opacity: 1; transform: none; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .demo .step { transition: none; }
  .msg-user .typed::after { animation: none; content: ""; }
}

footer.site { border-top: 1px solid var(--line); font-size: .85rem; padding: 1rem 0 2rem; margin-top: 2rem; }
footer.site p { margin: .35rem 0; }
@media (max-width: 40rem) { header.site .site-nav { margin-left: 0; width: 100%; } }