/* Documentation pages (public/docs) — long-form layer on top of the map app's
   design tokens.

   Loaded after css/style.css, which owns the tokens (--sp-*, --surface, --fg,
   --brand, …), the [data-theme] palettes and the shared shell components the
   top bar reuses (.topbar, .brand, .iconbtn, .topbar-menu). Nothing here
   redefines a token: if a colour is needed, it comes from there, so the docs
   and /m stay one product in all three colour modes.

   Reference implementation for the token-native, Bootstrap-free approach:
   public/kb/map-blueprint.html. */

/* ---- Page shell ----------------------------------------------------------- */

/* style.css locks the viewport for the map app; documentation is a scrolling
   document, so both rules are released here. */
html, body { height: auto; }
body { overflow: auto; }

.docs-topbar {
	position: sticky; top: 0;
	height: var(--topbar-h);
	gap: var(--sp-3);
}
.docs-topbar .brand small {
	font-size: .8rem; color: var(--fg-muted); font-weight: 400;
}
.docs-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.docs-auth {
	display: flex; align-items: center; gap: var(--sp-1);
	font-size: .85rem; white-space: nowrap;
}
.docs-auth a {
	display: inline-flex; align-items: center; gap: var(--sp-1);
	padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm);
	color: var(--fg-muted); text-decoration: none;
}
.docs-auth a:hover { background: var(--surface-2); color: var(--fg); }

/* ---- Navigation ----------------------------------------------------------- */

.docs-tabs {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1);
	margin: 0; padding: var(--sp-2) var(--sp-3);
	list-style: none;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}
.docs-tabs a {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-sm);
	color: var(--fg-muted); text-decoration: none; font-size: .9rem;
	transition: background var(--transition), color var(--transition);
}
.docs-tabs a:hover { background: var(--surface-2); color: var(--fg); }
.docs-tabs a.active { background: var(--brand); color: var(--brand-fg); }

.docs-subnav {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1);
	margin: var(--sp-5) 0 var(--sp-4); padding: var(--sp-1);
	list-style: none;
}
.docs-subnav a {
	display: inline-block; padding: var(--sp-1) var(--sp-4);
	border: 1px solid var(--border); border-radius: 999px;
	color: var(--fg-muted); text-decoration: none; font-size: .85rem;
}
.docs-subnav a:hover { background: var(--surface-2); color: var(--fg); }
.docs-subnav a.active {
	background: var(--brand); border-color: var(--brand); color: var(--brand-fg);
}

/* ---- Layout --------------------------------------------------------------- */

/* One measure for prose and screenshots alike, so the page has a single right
   edge. 74ch is the readability convention (~45-75 characters per line); past
   it the eye loses the line start on the return sweep. Full-window shots opt
   out with `.wide`, where the detail is the point. */
:root { --docs-measure: 74ch; }

.docs-main {
	max-width: 62rem; margin: 0 auto;
	padding: var(--sp-4) var(--sp-4) var(--sp-6);
}

/* Sticky table of contents: a side column when there is room, an expandable
   summary below the heading when there is not. */
.docs-toc { margin: var(--sp-4) 0; }
.docs-toc > summary {
	cursor: pointer; font-size: .85rem; color: var(--fg-muted);
	padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.docs-toc ul { list-style: none; margin: var(--sp-2) 0 0; padding-left: var(--sp-3); }
.docs-toc li { margin: var(--sp-1) 0; }
.docs-toc a { color: var(--fg-muted); text-decoration: none; font-size: .85rem; }
.docs-toc a:hover { color: var(--brand); }
.docs-toc .lvl-4 { padding-left: var(--sp-4); }

/* Wide layout: the prose and the TOC become two columns.
   The content is wrapped in .docs-body so a wide figure sits *beside* the TOC
   instead of being pushed below it — which is what a float would do. The TOC is
   a flex item with `align-self: flex-start`, so `position: sticky` tracks the
   whole article. */
@media (min-width: 1180px) {
	.docs-main.has-toc {
		max-width: 78rem;
		display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); align-items: flex-start;
	}
	.docs-main.has-toc > h2,
	.docs-main.has-toc > .docs-subnav { flex: 1 1 100%; }
	.docs-main.has-toc > .docs-body { flex: 1 1 0; min-width: 0; order: 1; }
	.docs-main.has-toc > .docs-toc {
		flex: 0 0 15rem; order: 2; margin: 0;
		position: sticky; top: calc(var(--topbar-h) + var(--sp-4));
		max-height: calc(100vh - var(--topbar-h) - var(--sp-6));
		overflow-y: auto;
		padding-left: var(--sp-3);
		border-left: 1px solid var(--border);
	}
	.docs-main.has-toc > .docs-toc > summary {
		list-style: none; border: none; padding: 0 0 var(--sp-2);
		font-weight: 600; color: var(--fg); cursor: default; pointer-events: none;
	}
	.docs-main.has-toc > .docs-toc > summary::-webkit-details-marker { display: none; }
	.docs-main.has-toc > .docs-toc ul { padding-left: 0; }
}

/* ---- Typography ----------------------------------------------------------- */

.docs-main h2, .docs-main h3, .docs-main h4, .docs-main h5, .docs-main h6 {
	line-height: 1.25; scroll-margin-top: calc(var(--topbar-h) + var(--sp-3));
}
.docs-main h2 { font-size: 1.6rem; margin: var(--sp-5) 0 var(--sp-3); font-weight: 300; }
.docs-main h3 {
	font-size: 1.3rem; margin: var(--sp-6) 0 var(--sp-3); font-weight: 600;
	padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border);
}
.docs-main h4 { font-size: 1.1rem; margin: var(--sp-5) 0 var(--sp-2); font-weight: 600; }
.docs-main h5 { font-size: .98rem; margin: var(--sp-4) 0 var(--sp-2); font-weight: 600; }
.docs-main h6 { font-size: .9rem; margin: var(--sp-3) 0 var(--sp-2); font-weight: 600; color: var(--fg-muted); }
.docs-main p, .docs-main li, .docs-main dd { line-height: 1.65; }
.docs-main p { margin: 0 0 var(--sp-3); max-width: var(--docs-measure); }
.docs-main ul, .docs-main ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.docs-main li { margin: var(--sp-1) 0; }
.docs-main a { color: var(--brand); }

.docs-main dl { margin: 0 0 var(--sp-4); }
.docs-main dt {
	font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .9rem; color: var(--fg); margin-top: var(--sp-3);
}
.docs-main dd { margin: 0 0 var(--sp-1); padding-left: var(--sp-4); color: var(--fg-muted); }

.docs-main code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em;
	background: var(--surface-2); padding: .1em .35em; border-radius: 3px;
	/* example URLs have no break opportunities and would push the page sideways */
	overflow-wrap: anywhere;
}

/* Embedded videos ship fixed pixel dimensions; scale them to the column and keep
   their shape rather than letting them overflow on a phone. */
.docs-main iframe {
	display: block; max-width: 100%; height: auto; aspect-ratio: 16 / 9;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	margin: 0 0 var(--sp-4);
}
.docs-main pre {
	background: var(--surface-2); border: 1px solid var(--border);
	border-radius: var(--radius-sm); padding: var(--sp-3);
	overflow-x: auto; font-size: .82rem; line-height: 1.4;
}

/* Wide content must scroll inside its own box, never the page. */
.docs-table-wrap { overflow-x: auto; margin: 0 0 var(--sp-4); }
.docs-main table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.docs-main th, .docs-main td {
	border: 1px solid var(--border); padding: var(--sp-2); text-align: left; vertical-align: top;
}
.docs-main th { background: var(--surface-2); font-weight: 600; }

/* ---- Figures -------------------------------------------------------------- */

.docs-figures {
	display: grid; gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	align-items: start;
	margin: 0 0 var(--sp-4);
}
.docs-figures.single { grid-template-columns: 1fr; }

/* Shrink to the image so the caption sits under the picture rather than being
   centred across the whole column — most screenshots are far narrower than the
   measure. Grid children keep their cell width. */
.docs-main figure {
	margin: 0 0 var(--sp-4);
	width: fit-content; max-width: min(100%, var(--docs-measure));
}
.docs-figures > figure { width: auto; max-width: 100%; }
.docs-main figure a { display: block; text-decoration: none; }
.docs-main figure img, .screencapture {
	/* centred so a small screenshot lines up with its caption, which is often
	   the wider of the two and sets the figure's width */
	display: block; margin-inline: auto; max-width: 100%; height: auto;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--surface);
	box-shadow: var(--shadow);
}
.screencapture { margin: 0 0 var(--sp-4); max-width: var(--docs-measure); }

/* Full-window captures: the anatomy hero and the whole-screen shots, where
   shrinking to the text measure would cost the detail they exist to show. */
.docs-main figure.wide { max-width: 100%; }
.docs-main figure.wide figcaption { max-width: var(--docs-measure); margin-inline: auto; }

.docs-main figcaption {
	margin-top: var(--sp-2); text-align: center;
	font-size: .82rem; color: var(--fg-muted);
}

/* The numbered legend that pairs with the generated anatomy figure.
   Do NOT set `counter-reset` here: an <ol> carries an implicit
   `counter-reset: list-item`, and overriding it makes the list continue the
   document-wide counter instead of restarting at 1 (Firefox honours this,
   Chromium does not — it numbered from 4 in Firefox only).
   The padding leaves room for a two-digit marker. */
.anatomy-legend { padding-left: var(--sp-6); }
.anatomy-legend li { margin: var(--sp-2) 0; }
.anatomy-legend li::marker { font-weight: 700; color: var(--brand); }

/* Inline icon keys (the search-ordering legend). */
.docs-key { color: var(--brand); white-space: nowrap; }

/* Images that only make sense at one end of the size range (the desktop vs.
   mobile screenshot pair on the landing page). */
.narrow-only { display: block; }
.wide-only { display: none; }
@media (min-width: 768px) {
	.narrow-only { display: none; }
	.wide-only { display: block; }
}

/* ---- Social links --------------------------------------------------------- */

.docs-social {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
	list-style: none; padding: 0; margin: 0 0 var(--sp-4);
}
.docs-social a {
	display: inline-flex; padding: var(--sp-2);
	border-radius: var(--radius-sm);
	transition: background var(--transition);
}
.docs-social a:hover { background: var(--surface-2); }
.docs-social img { display: block; border: none; border-radius: 0; box-shadow: none; }

/* ---- Call-out ------------------------------------------------------------- */

.docs-callout {
	display: flex; gap: var(--sp-3); align-items: flex-start;
	max-width: 62rem; margin: var(--sp-5) auto; padding: var(--sp-4);
	background: color-mix(in srgb, var(--brand) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
	border-radius: var(--radius);
}
.docs-callout i { color: var(--brand); margin-top: .2rem; }
.docs-callout p { margin: 0 0 var(--sp-1); }
.docs-callout small { color: var(--fg-muted); }
.docs-new { color: #1f8a4c; font-weight: 600; }
[data-theme="dark"] .docs-new { color: #58c98a; }

/* ---- Footer --------------------------------------------------------------- */

.docs-footer {
	background: var(--surface); border-top: 1px solid var(--border);
	padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
.docs-footer nav {
	display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}
.docs-footer nav a {
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	color: var(--fg-muted); text-decoration: none; font-size: .88rem;
}
.docs-footer nav a:hover { background: var(--surface-2); color: var(--fg); }
.docs-footer p { text-align: center; margin: 0; color: var(--fg-muted); font-size: .85rem; }
.docs-footer .name { font-family: "Fira Sans", var(--font); font-weight: 300; }
.docs-footer .name b { font-weight: 400; }

/* ---- Small screens -------------------------------------------------------- */

@media (max-width: 640px) {
	.docs-tabs a span { display: none; }
	.docs-tabs a { padding: var(--sp-2); }
	.docs-main { padding: var(--sp-3) var(--sp-3) var(--sp-6); }
	.docs-topbar .brand small { display: none; }
}

/* Below 400px the sign-in labels no longer fit next to the brand (the Spanish
   ones are the longest); the icons still carry the meaning. Matches the <400
   breakpoint the map app uses. */
@media (max-width: 400px) {
	.docs-auth a span { display: none; }
	.docs-auth a { padding: var(--sp-1); }
}