/* Blog listings (filter bar, results) and articles (contents widget).
   Loaded on the posts page, category/tag archives and single articles only. */

/* ---------- Filter bar ---------- */
.blog-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 auto 40px; max-width: 900px; }
.blog-filters__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
.blog-filters__search { position: relative; display: block; }
.blog-filters__search-icon { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.blog-filters input[type="search"],
.blog-filters select {
	width: 100%; height: 48px; border: 1px solid var(--c-border-strong); border-radius: 10px;
	background: var(--c-surface-2); color: var(--c-text); font: inherit; font-size: 16px;
}
.blog-filters input[type="search"] { padding: 0 16px 0 44px; }
.blog-filters select { padding: 0 40px 0 14px; appearance: none; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.blog-filters input:focus-visible, .blog-filters select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.blog-filters__submit { height: 48px; }
.js .blog-filters__submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Enter still submits. */
.blog-filters__topics ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.topic-chip {
	display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
	border: 1px solid var(--c-border-strong); background: var(--c-surface-2); font-size: 15px;
	transition: background var(--t-swap) var(--ease-out), color var(--t-swap) var(--ease-out), border-color var(--t-swap) var(--ease-out);
}
.topic-chip:hover { border-color: var(--c-text); }
.topic-chip[aria-current="page"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); } /* selected: orange, never black */

/* ---------- Results ---------- */
.blog-results { transition: opacity var(--t-swap) var(--ease-out); }
.blog-results.is-loading { opacity: 0.45; pointer-events: none; }
.blog-results__status { margin-bottom: 20px; text-align: center; color: var(--c-muted); font-size: 15px; }
.post-card__meta { color: var(--c-muted); font-size: 12px; margin-bottom: 4px; }
.post-card:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.post-card:hover .post-card__arrow { background: var(--c-accent); color: var(--c-white); }
.archive__empty { display: grid; gap: 16px; justify-items: center; padding: 40px 0; }

@media (max-width: 767px) {
	.blog-filters__row { grid-template-columns: minmax(0, 1fr); }
	.blog-filters__search { grid-column: 1 / -1; }
	.blog-filters__topics ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
	.topic-chip { white-space: nowrap; }
}

/* Heading offset below the sticky header: html { scroll-padding-top } in base.css. */

/* ---------- Contents widget ---------- */
/* Without JavaScript: a plain contents card above the article. */
.toc { max-width: 760px; margin: 48px auto 0; }
.toc__panel { padding: 24px 28px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.toc__title { font-family: var(--f-display); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }
.toc__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.toc__link { display: block; padding: 6px 10px; border-radius: 8px; color: var(--c-text); font-size: 15px; line-height: 1.4; border-left: 2px solid transparent; }
.toc__link:hover { background: var(--c-surface-2); }
.toc__item--1 .toc__link { font-weight: 600; }
.toc__item--2 .toc__link { padding-left: 14px; }
.toc__item--3 .toc__link { padding-left: 30px; font-size: 14px; color: var(--c-muted); }
.toc__link.is-active { background: var(--c-surface-2); color: var(--c-text); font-weight: 600; }
.toc__cta { margin-top: 16px; }
.toc__close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.toc__close:hover { background: var(--c-surface-2); }
.toc__close .icon { width: 20px; height: 20px; }

/* Enhanced (toc.js) */
.toc.is-enhanced { position: fixed; z-index: 90; margin: 0; max-width: none; opacity: 0; visibility: hidden; transition: opacity var(--t-swap) var(--ease-out), visibility 0s linear var(--t-swap); }
.toc.is-enhanced.is-visible, .toc.is-enhanced.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.toc.is-enhanced .toc__panel { visibility: hidden; opacity: 0; transition: opacity var(--t-swap) var(--ease-out), transform var(--t-swap) var(--ease-out), visibility 0s linear var(--t-swap); }
.toc.is-enhanced.is-open .toc__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.toc__trigger { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
/* Trigger: a Zulu drum seen from above (zs_toc_drum()); the blue rim ring fills as you read. */
.toc__icon { display: block; width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 12px 30px -12px rgba(255, 92, 0, 0.7); transition: transform var(--t-hover) var(--ease-out); }
.toc__drum { display: block; width: 100%; height: 100%; }
.toc__progress { stroke-dasharray: 188.5px; stroke-dashoffset: calc(188.5px - var(--toc-progress, 0) * 188.5px); /* 2πr, r = 30 */ transition: stroke-dashoffset 0.2s linear; }
.toc__trigger:hover .toc__icon, .toc.is-open .toc__icon { transform: scale(1.06) rotate(-8deg); }
.toc__trigger:focus-visible { outline: none; }
.toc__trigger:focus-visible .toc__icon { outline: 3px solid var(--c-text); outline-offset: 3px; }

/* Desktop: round trigger on the left edge with a projecting "Contents" tab; panel opens beside it. */
@media (min-width: 1024px) {
	/* Left edge lines up with the logo (toc.js sets --toc-left); docked bottom-left when that would cover the text. */
	.toc.is-enhanced { left: var(--toc-left, 16px); top: 28vh; }
	.toc.is-enhanced.is-docked { top: auto; bottom: 24px; }
	.toc.is-enhanced.is-docked .toc__panel { top: auto; bottom: calc(100% + 12px); transform: translateY(6px); }
	.toc.is-enhanced.is-docked.is-open .toc__panel { transform: none; }
	.toc__label {
		position: absolute; left: calc(100% + 10px); top: 50%; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
		background: var(--c-bg); border: 1px solid var(--c-border-strong); color: var(--c-text); font-size: 13px; font-weight: 600;
		opacity: 0; transform: translate(-4px, -50%); pointer-events: none; transition: opacity var(--t-swap) var(--ease-out), transform var(--t-swap) var(--ease-out);
	}
	.toc__trigger:hover .toc__label, .toc__trigger:focus-visible .toc__label { opacity: 1; transform: translate(0, -50%); }
	.toc.is-open .toc__label { opacity: 0; }
	/* Beadwork strip along the top of the open panel. */
	.toc.is-enhanced .toc__panel { padding-top: 32px; overflow: hidden; }
	.toc.is-enhanced .toc__panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 16px; background: #f6e3c8 url("../images/beadwork-h.svg?v=3") space no-repeat 0 -1px / 64px 16px; }
	.toc.is-enhanced .toc__panel { position: absolute; left: 0; top: calc(100% + 12px); width: 320px; max-height: min(62vh, 560px); display: flex; flex-direction: column; padding: 20px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.35); transform: translateY(-6px); background: var(--c-bg); }
	.toc.is-enhanced .toc__list { overflow-y: auto; overscroll-behavior: contain; }
	.toc.is-enhanced .toc__close { width: 32px; height: 32px; }
	.toc.is-enhanced .toc__title { font-size: 20px; }
}
/* Desktop widths where the side margin is narrow: keep the panel from covering text until opened. */


/* Mobile & tablet: orange button bottom-left, bottom sheet. */
@media (max-width: 1023px) {
	.toc.is-enhanced { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
	.toc__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.toc__icon { width: 60px; height: 60px; }
	.toc.is-enhanced .toc__panel {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; max-height: 78vh; display: flex; flex-direction: column;
		padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border: 0;
		background: var(--c-bg); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.35); transform: translateY(100%);
		transition: transform 320ms var(--ease-out), visibility 0s linear 320ms;
	}
	.toc.is-enhanced.is-open .toc__panel { transform: none; transition: transform 320ms var(--ease-out), visibility 0s; }
	.toc.is-enhanced .toc__panel::before { content: ""; align-self: center; width: 40px; height: 4px; margin-bottom: 8px; border-radius: 2px; background: var(--c-border-strong); }
	.toc.is-enhanced .toc__list { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
	.toc.is-enhanced .toc__link { padding-block: 10px; font-size: 16px; }
	.toc.is-enhanced .toc__item--3 .toc__link { font-size: 15px; }
	.toc__backdrop { position: fixed; inset: 0; z-index: 1; background: rgba(30, 30, 30, 0.45); }
	.toc.is-enhanced.is-open .toc__trigger { visibility: hidden; }
	.is-toc-sheet { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.toc.is-enhanced, .toc.is-enhanced .toc__panel, .toc__icon, .toc__label, .blog-results { transition: none !important; }
}

/* ---------- Development blog extras: branded tables, diagrams, quiet source footnotes ---------- */
/* Comparison tables: a beadwork strip on top, the caption as the table's title, a sky header row. */
.prose .zs-table { position: relative; display: flex; flex-direction: column; margin-block: 1.8em; padding-top: 18px; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--c-border-strong); background: color-mix(in srgb, var(--c-surface) 35%, #fff); }
.prose .zs-table::before { content: ""; position: absolute; inset: 0 0 auto; height: 18px; background: #f6e3c8 url("../images/beadwork-h.svg?v=3") space no-repeat 0 0 / 72px 18px; }
.prose .zs-table figcaption { order: -1; margin: 0; padding: 16px 18px 4px; font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--c-text); text-align: left; }
.prose .zs-table table { min-width: 560px; margin: 0; font-size: 15.5px; line-height: 1.5; }
.prose .zs-table th, .prose .zs-table td { padding: 12px 16px; border-bottom: 1px solid var(--c-border-strong); }
.prose .zs-table thead th { background: #d9eaf7; border-bottom: 3px solid var(--c-blue); font-size: 16px; }
.prose .zs-table tbody th { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.prose .zs-table tbody tr:last-child > * { border-bottom: 0; }
.prose .zs-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-surface) 40%, transparent); }
@media (max-width: 767px) { .prose .zs-table { overflow-x: auto; } .prose .zs-table tbody th { white-space: normal; } }
/* Diagrams: rendered artwork with its own beadwork strip, so only a soft frame here. */
.prose .zs-diagram img { border-radius: var(--radius-lg); border: 1px solid var(--c-border); }
/* Sources: small, quiet footnotes at the end of the article; links open in a new tab. */
.prose sup.fn { font-size: 0.68em; line-height: 0; margin-left: 1px; }
.prose sup.fn a { padding: 0 2px; color: var(--c-muted); text-decoration: none; }
.prose sup.fn a:hover, .prose sup.fn a:focus-visible { color: var(--c-accent); }
.article-sources { margin-top: 3em; padding-top: 1.1em; border-top: 1px solid var(--c-border-strong); font-size: 14px; line-height: 1.55; color: var(--c-muted); }
.prose .article-sources__title { margin: 0 0 0.6em; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.prose .article-sources__list { margin: 0; padding-left: 1.4em; list-style: decimal; }
.prose .article-sources__list li { scroll-margin-top: calc(var(--header-h, 80px) + 24px); }
.prose .article-sources__list li + li { margin-top: 0.35em; }
.prose .article-sources__list li:target { color: var(--c-text); }
.prose .article-sources a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.prose .article-sources a:hover, .prose .article-sources a:focus-visible { color: var(--c-accent); text-decoration-color: currentColor; }

/* Orange-dot pointers inside articles: a quiet grey tag (like .tag) linking to a case study, service or related post. */
.prose .zs-pointer { position: relative; margin: 1.9em 0; padding: 12px 16px 12px 36px; border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-border); font-size: 15.5px; line-height: 1.55; color: var(--c-text); }
.prose .zs-pointer::before { content: ""; position: absolute; left: 17px; top: calc(12px + 0.775em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
.prose .zs-pointer a { font-weight: 600; }

/* Related resources: the same footnote style as the sources, with orange dots. */
.article-resources { margin-top: 3em; padding-top: 1.1em; border-top: 1px solid var(--c-border-strong); font-size: 14px; line-height: 1.55; color: var(--c-muted); }
.article-resources + .article-sources { margin-top: 1.8em; }
.prose .article-resources__title { margin: 0 0 0.6em; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.prose .article-resources__list { margin: 0; padding: 0; list-style: none; }
.prose .article-resources__list li { position: relative; padding-left: 1.3em; }
.prose .article-resources__list li + li { margin-top: 0.35em; }
.prose .article-resources__list li::before { content: ""; position: absolute; left: 0.2em; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.prose .article-resources a { color: var(--c-text); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.prose .article-resources a:hover, .prose .article-resources a:focus-visible { color: var(--c-accent); text-decoration-color: currentColor; }

/* ---------- Contents list as a spear: sections are beads on the shaft; the current one gets the spearhead ---------- */
.toc__list { position: relative; padding-left: 22px; }
.toc__list::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: #d99a4e; }
.toc__item { position: relative; }
.toc__item::before {
	content: ""; position: absolute; left: -13.5px; top: 17px; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%);
	background: var(--c-bg); border: 2px solid #1d1712; transition: width var(--t-swap) var(--ease-out), height var(--t-swap) var(--ease-out), border-radius var(--t-swap);
}
.toc__item--3::before { width: 7px; height: 7px; border-width: 1.5px; }
.toc__item:has(.is-active)::before {
	width: 20px; height: 12px; border: 0; border-radius: 0; background: var(--c-accent); transform: translate(-40%, -50%);
	clip-path: polygon(0 50%, 38% 0, 100% 50%, 38% 100%); /* leaf-shaped spearhead pointing at the section */
}
@media (prefers-reduced-motion: reduce) { .toc__item::before, .toc__progress, .toc__icon { transition: none; } }