/*
 * Baiki — the three server-rendered pages (design 0031)
 *
 * city.html, corridor.html and vs.html have no client render path at all: what
 * server.py prints is the final DOM. Tailwind is a build step here and the
 * server prints plain tags with plain class names, so these rules are what
 * dress the block — never a Tailwind utility, which would have to exist in the
 * compiled app.css and cannot, and never an icon name, which would have to be
 * in the built subset or render as its own word.
 *
 * This file lives here rather than in design.css because only these three pages
 * have an SSR block to dress, and design.css is downloaded by all nine.
 * It used to be an 11-line <style> block copy-pasted into each of the three.
 *
 * The page stays readable if this never arrives: every block below is a
 * heading, a paragraph or a list in document order, which is the same
 * guarantee these pages already have with JavaScript off.
 */

:root {
  --hub-ink: #0f172a;         /* headings */
  --hub-body: #475569;        /* slate-600, body copy */
  --hub-muted: #94a3b8;       /* slate-400, meta */
  --hub-primary: #ff8c00;
  --hub-line: rgba(15, 23, 42, 0.08);        /* hairline between rows */
  --hub-edge: rgba(255, 140, 0, 0.14);       /* card border, as explore.html */
  --hub-shadow: 0 10px 24px -14px rgba(255, 140, 0, 0.45);
}

/* ── Type ── */

#app { color: var(--hub-ink); }

#app h1 {
  font-size: 1.6rem; line-height: 1.2; font-weight: 800;
  letter-spacing: -0.02em; margin: 0.25rem 0 0.7rem;
}

/* A section heading, with the air and the rule that make eleven <h2> read as
   eleven sections rather than eleven bold lines. */
#app h2 {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  margin: 1.9rem 0 0.7rem; padding-top: 1.2rem;
  border-top: 1px solid var(--hub-line);
}

#app h3 { font-size: 0.98rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.2rem; }
#app p  { color: var(--hub-body); line-height: 1.6; margin: 0 0 0.6rem; }
#app a  { color: var(--hub-primary); text-decoration: none; }
#app a:hover { text-decoration: underline; }
#app img { border-radius: 0.75rem; }

/* The human-written intro — §A.4's extraction window, and the first thing a
   person reads. One step up in size, one step down in contrast. */
#app h1 + p { font-size: 1.02rem; color: #334155; margin-bottom: 1rem; }
#app h1 + p.pagenote {
  font-size: 0.82rem; color: var(--hub-muted); font-weight: 600; margin-bottom: 1rem;
}

/* Lists carry no marker (Tailwind's preflight removes it) so they carry no
   indent either. The 1.25rem that used to be here left every list on these
   pages sitting in an empty gutter, 20px right of the heading above it. */
#app ul, #app ol { list-style: none; margin: 0 0 1rem; padding: 0; }
#app li { margin: 0; color: var(--hub-body); }

/* ── Breadcrumbs ── */

#app .crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; color: var(--hub-muted); margin: 0.25rem 0 0.6rem;
}
#app .crumbs a { color: var(--hub-muted); }
#app .crumbs a:hover { color: var(--hub-primary); text-decoration: none; }

/* ── The measured facts: one panel, hairline rows ── */

#app .facts {
  background: #fff; border: 1px solid var(--hub-edge); border-radius: 14px;
  box-shadow: var(--hub-shadow); padding: 0 0.9rem; margin-bottom: 1.2rem;
}
#app .facts li {
  padding: 0.62rem 0; font-size: 0.9rem; font-weight: 500; color: #334155;
  border-top: 1px solid var(--hub-line);
}
#app .facts li:first-child { border-top: 0; }

/* ── A walk, a story, a corridor stop: one card each ── */

#app .walks, #app .stories, #app .stops {
  display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem;
}
#app .walks > li, #app .stories > li, #app .stops > li {
  background: #fff; border: 1px solid var(--hub-edge); border-radius: 16px;
  box-shadow: var(--hub-shadow); padding: 0.9rem 1rem;
}
#app .walks h3, #app .stories h3, #app .stops h3 { margin: 0 0 0.25rem; }
#app .walks p, #app .stories p, #app .stops p {
  font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.35rem;
}
#app .walks p:last-child, #app .stories p:last-child, #app .stops p:last-child {
  margin-bottom: 0;
}
/* The gap inside an item is now smaller than the gap between items, which is
   the whole difference between a list of cards and a wall of paragraphs. */
#app .walks .meta, #app .stories .place, #app .stops .place {
  color: var(--hub-muted); font-size: 0.78rem; font-weight: 600;
}
#app .stories .place, #app .stops .place { font-weight: 500; }

/* ── Row lists: themes, routes, the lengths, the streets ── */

#app .rows {
  background: #fff; border: 1px solid var(--hub-edge); border-radius: 14px;
  box-shadow: var(--hub-shadow); overflow: hidden; margin-bottom: 1rem;
}
#app .rows li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; min-height: 44px; padding: 0 0.9rem;
  border-top: 1px solid var(--hub-line);
}
#app .rows li:first-child { border-top: 0; }
#app .rows li a {
  flex: 1 1 auto; padding: 0.7rem 0; font-size: 0.92rem; font-weight: 600;
}
/* A row that is not a link (the street list) keeps the row's own side padding
   — a `padding` shorthand here would zero it and push the text to the edge. */
#app .rows li.plain { padding-top: 0.7rem; padding-bottom: 0.7rem; font-size: 0.92rem; }
#app .rows .n {
  flex: 0 0 auto; color: var(--hub-muted); font-size: 0.78rem; font-weight: 500;
  white-space: nowrap;
}

/* ── Pagination: a tap target, and a visible "you are here" ── */

#app .pager { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 1rem; }
#app .pager a, #app .pager .cur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 0.5rem; border-radius: 10px;
  font-size: 0.85rem; font-weight: 700;
}
#app .pager a { background: #fff; border: 1px solid var(--hub-edge); color: var(--hub-primary); }
#app .pager a:hover { background: rgba(255, 140, 0, 0.08); text-decoration: none; }
#app .pager .cur { background: var(--hub-primary); border: 1px solid var(--hub-primary); color: #fff; }

/* ── The tail of a corridor or comparison page ── */

#app .links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; }
#app .links a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 0.9rem;
  background: #fff; border: 1px solid var(--hub-edge); border-radius: 999px;
  box-shadow: var(--hub-shadow); font-size: 0.85rem; font-weight: 600;
}
#app .links a:hover { background: rgba(255, 140, 0, 0.06); text-decoration: none; }

/* ── The map ──
   Its height stays inline in the markup: Leaflet needs a measurable box before
   it initialises, and that must not wait on a stylesheet. */
#app .map {
  border: 1px solid var(--hub-edge); border-radius: 16px; overflow: hidden;
  margin: 0.25rem 0 1.25rem;
}

/* ── Questions and answers, told apart from the sections above them ── */

#app .faq { margin-top: 1.9rem; }
#app .faq h2 {
  font-size: 1rem; font-weight: 700; color: var(--hub-ink);
  margin: 0; padding: 1rem 0 0.35rem; border-top: 1px solid var(--hub-line);
}
#app .faq h2:first-child { border-top: 0; padding-top: 0; }
#app .faq p { font-size: 0.92rem; margin: 0 0 0.2rem; }

/* ── /vs/{competitor}: prose and nothing else ── */

#app .prose p { font-size: 0.98rem; }