/* WooCommerce views only (inc/shop.php enqueues it after style.css): the page layouts of the catalogue and the single
   service, ported from the page-only styles of site-fa/design/system/catalogue.html and service.html. Every component
   (rows, price box, strip, signs, chips, notices, crumbs) is in style.css. Template groups bring the flow layout's
   block gap; the components below space their children themselves, so those margins stay out. */

:root :is(.svc, .svc-head) > * { margin-block: 0; }

/* ---------- Single service (templates/single-product.html) ---------- */
.svc { display: grid; grid-template-columns: minmax(0, 1fr); }

/* title block */
.svc-head { display: grid; gap: var(--space-3); padding-block: var(--space-4) var(--space-5); }
.svc-head h1 { max-inline-size: 15em; }
.svc-outcome { font-size: var(--text-md); line-height: var(--lh-md); max-inline-size: 46ch; }
@media (max-width: 599px) {
	.svc-head h1 { line-height: var(--lh-lg); }
}
/* block monshina/service-head: the line, and below the desktop layout the price with a buy action (the buy box is far down) */
.svc-head__more { display: grid; gap: var(--space-3); }
.svc-facts, .svc-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.svc-quick__price { font-size: var(--text-md); font-weight: var(--w-bold); line-height: var(--lh-md); }

/* the buy box (block monshina/price-box): after the line on a phone, sticky beside it on a desktop */
.svc-buy { padding-block: var(--space-6); }
.svc-buy .mn-price { inline-size: 100%; }
.svc-buy h2 { font-size: var(--text-md); line-height: var(--lh-md); }
/* the care option carries two price lines, so its texts keep to the second column */
.svc-buy .mn-option > :not(input) { grid-column: 2; }
.svc-buy__note { margin-block-start: var(--space-2); font-size: var(--text-sm); color: var(--ink-soft); }
.mn-buy-as[data-for="care"], .mn-price:has([data-plan="care"]:checked) .mn-buy-as[data-for="setup"] { display: none; }
.mn-price:has([data-plan="care"]:checked) .mn-buy-as[data-for="care"] { display: inline; }
.mn-price > a:not(.mn-btn) { display: inline-flex; align-items: center; min-block-size: var(--target); justify-self: start; }
@media (min-width: 600px) and (max-width: 1199px) {
	.svc-buy .mn-price { padding: var(--space-4); }
	.svc-buy .mn-price__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the line itself (block monshina/workflow-diagram): strip, then what happens at each stop */
.svc-map { container: svc-map / inline-size; display: grid; gap: var(--space-3); }
.svc-map .mn-diagram { padding-block: var(--space-2); }
.svc-stops { display: grid; gap: var(--space-1); }
.svc-stop {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-4); align-items: start;
	padding: var(--space-4); background: var(--ground-2);
	scroll-margin-block-start: var(--space-2);
}
.svc-stop__text { display: grid; gap: var(--space-2); justify-items: start; }
.svc-stop__you { color: var(--ink-soft); }
.svc-stop__you b { color: var(--ink); font-weight: var(--w-semibold); }
.svc-stop__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--ink-soft); }
@container svc-map (max-width: 759px) {
	.svc-stop { grid-template-columns: minmax(0, 1fr); padding: var(--space-3) var(--space-2); }
}

/* samples of the product's own screens: their own borders, rows and figures */
.svc-card {
	display: grid; gap: var(--space-2); inline-size: min(100%, 440px);
	padding: var(--space-3); background: var(--surface); border: 3px solid var(--ink);
}
.svc-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: var(--w-semibold); }
.svc-card__head .mn-sample { margin-inline-start: auto; }
.svc-card__rows > div {
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2);
	padding-block: var(--space-1); border-block-start: 2px solid var(--ground-2); font-size: var(--text-sm);
}
.svc-card__rows dt { color: var(--ink-soft); }
.svc-card__rows dd { font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; text-align: end; }
.svc-card__draft { padding: var(--space-2); background: var(--ground); }
/* the approval card's buttons only picture the ones in Bale: on the page they are not controls */
.mn-approve__actions > .mn-btn { pointer-events: none; }
.mn-bubble__quote { padding: var(--space-1) 12px; background: var(--ground); border-radius: 8px; }

/* the sample output, on a flat stage in the sign colour (end of block monshina/workflow-diagram) */
.svc-out { margin-block-start: var(--space-6); }
.svc-out__stage { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); background: var(--sign); color: var(--on-dark); }
.svc-out__stage > p { color: var(--sign-sub); }
.svc-out__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); align-items: start; }
.svc-out .mn-chat { inline-size: 100%; color: var(--ink); }
.svc-out .mn-bubble { max-inline-size: 96%; }
@media (max-width: 599px) {
	.svc-out__stage { padding: var(--space-4) var(--space-2); }
}

/* the long description (post content, blocks from site-fa/pages/BLOCKS.md): each H2 opens a section, as svc-sec does in the design */
:root .svc-content > h2 { margin-block-start: calc(var(--section-pad) * 1.5); }
.svc-content { padding-block-end: var(--space-12); }
/* list blocks with these classes; markers are absolute so a list item may hold bold text or links */
:root :is(.svc-dots, .svc-days) { display: grid; padding: 0; list-style: none; }
.svc-dots { gap: var(--space-2); }
.svc-dots li { position: relative; padding-inline-start: calc(18px + var(--space-2)); }
.svc-dots li::before {
	content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc((1lh - 18px) / 2); inline-size: 18px; block-size: 18px;
	border: 3px solid var(--ink); border-radius: var(--radius-round); background: var(--surface);
}
/* the line drawn day to day, ending at the approval square */
.svc-days { gap: var(--space-4); }
.svc-days li { position: relative; padding-inline-start: calc(var(--station) + var(--space-2)); }
.svc-days li::before {
	content: ""; position: absolute; z-index: 1; inset-inline-start: 0; inset-block-start: 6px; inline-size: var(--station); block-size: var(--station);
	background: var(--surface); border: var(--ring-w) solid var(--ink); border-radius: var(--radius-round);
}
.svc-days li:not(:last-child)::after {
	content: ""; position: absolute; inset-inline-start: calc(var(--station) / 2 - 4px); inset-block-start: calc(6px + var(--station) / 2);
	block-size: calc(100% + var(--space-4)); inline-size: 8px; background: var(--line);
}
.svc-days li:last-child::before { inset-inline-start: -3px; inset-block-start: 3px; inline-size: 26px; block-size: 26px; border-radius: var(--radius-mark); background: var(--ink); border-color: var(--ink); }
/* the check never mirrors, so it is a fixed shape (style.css .mn-station--approval::after) */
.svc-days li:last-child::after {
	content: ""; position: absolute; z-index: 1; inset-inline-start: 1px; inset-block-start: 7px; inline-size: 18px; block-size: 18px;
	background: var(--on-dark); clip-path: polygon(12% 50%, 0 64%, 38% 96%, 100% 22%, 86% 8%, 37% 70%);
}
.svc-days strong { display: block; font-weight: var(--w-semibold); }
/* requirements: the sign names the service, in the line's colour; what is needed reads below it */
.svc-req { display: grid; gap: var(--space-4); }
:root .svc-req > *, :root .svc-req > * > * { margin-block: 0; }
.svc-req > * { display: grid; gap: var(--space-1); justify-items: start; }
.svc-req .mn-sign { min-inline-size: 0; margin-block-end: var(--space-1); }
.svc-req .svc-note { color: var(--ink-soft); font-size: var(--text-sm); }

/* block monshina/related: other lines through the same stations */
.svc-related { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block-end: var(--space-12); }
.svc-related__head { display: grid; gap: var(--space-2); }
.svc-shared { font-size: var(--text-sm); color: var(--ink-soft); }
/* long line names would set the column width on phones */
.svc-related .svc-related__all { justify-self: start; max-width: 100%; white-space: normal; }
/* its rows are catalogue rows with the «دیدن» pill, which the base row grid (style.css) has no area for */
.svc-related .mn-row { grid-template-columns: 72px minmax(0, 1fr) auto 170px auto; grid-template-areas: "line main glyphs price go"; }
@container mn-rows (max-width: 899px) {
	.svc-related .mn-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "line line" "main main" "glyphs glyphs" "price go"; }
}

/* desktop: the buy box rides beside the title, the line and the content */
@media (min-width: 1200px) {
	.svc {
		grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--space-6);
		grid-template-areas: "head buy" "map buy" "content buy" "related buy";
	}
	.svc-head { grid-area: head; }
	.svc-map { grid-area: map; }
	.svc-content { grid-area: content; }
	.svc-related { grid-area: related; }
	.svc-buy { grid-area: buy; align-self: start; padding-block: var(--space-2) 0; }
	.svc-quick { display: none; }
}
/* the whole aside sticks, so the placeholder-price note rides under the box; only on screens tall enough for the box
   (about 820px), or its buy button would stay below the fold while the page scrolls */
@media (min-width: 1200px) and (min-height: 900px) {
	.svc-buy { position: sticky; inset-block-start: var(--space-3); }
}

/* ---------- Catalogue (templates/archive-product.html, product-search-results.html; block monshina/catalogue) ---------- */
.cat-head { padding-block: var(--space-4) 0; }
.cat-net { display: grid; gap: var(--space-4); padding-block: var(--space-4) var(--space-6); }
.cat-find { display: grid; gap: var(--space-3); align-content: start; }
.cat-find + .results-bar, .cat-find + .results, .cat-find + .empty { margin-block-start: var(--space-4); }
.cat-lede { font-size: var(--text-md); line-height: var(--lh-md); max-inline-size: 30em; }

/* the map key, beside the search box on wide screens, as on a metro map */
.key { display: none; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--surface); font-size: var(--text-sm); color: var(--ink-soft); }
.key__title { font-weight: var(--w-bold); color: var(--ink); }
.key ul { display: grid; gap: 2px; padding: 0; list-style: none; }
.key li { display: flex; align-items: center; gap: var(--space-2); min-block-size: 40px; }
.key__mark { display: grid; place-items: center; inline-size: 36px; flex: none; }

/* the bundle leaving the search box (physical SVG coordinates from monshina_fan_paths()) */
.net__fan { display: none; }
.net__fan path { fill: none; transition: stroke var(--dur-base) var(--ease-out), stroke-width var(--dur-base) var(--ease-out); }
.net__case { stroke: var(--line-case); stroke-width: var(--w); }
.net__fill { stroke: var(--line); stroke-width: calc(var(--w) - 2 * var(--case-w)); }
.net__seg.is-sel { --w: var(--line-w); }
@media (min-width: 1320px) {
	.key { display: grid; }
	.cat-net { grid-template-columns: 480px minmax(0, 1fr); gap: 0; }
	.cat-net .cat-find { grid-template-rows: minmax(0, 1fr) 96px minmax(0, 1fr); block-size: var(--fan-h); }
	.cat-find .mn-hub { z-index: 1; align-self: center; }
	.cat-find .cat-lede { align-self: end; }
	.cat-find .key { align-self: start; }
	.net { grid-template-columns: 56px minmax(0, 1fr); align-content: start; }
	.net__all { display: none; }
	.net__fan { display: block; inline-size: 80px; max-inline-size: none; block-size: var(--fan-h); margin-inline-start: -24px; overflow: visible; }
}

/* the network: one row per line; stations are services; the chip is the line's filter */
.net { --w: var(--line-w-quiet); display: grid; }
.net__rows { display: grid; grid-auto-rows: 72px; }
.net__all .mn-line-chip { --line: var(--ink); --line-on: var(--on-dark); --line-case: var(--ink); }
.net__row { position: relative; isolation: isolate; display: flex; align-items: flex-start; gap: var(--space-2); }
.net__row::before {
	content: ""; position: absolute; z-index: -1;
	inset-inline: 0 4px; inset-block-start: calc(24px - var(--w) / 2); block-size: var(--w);
	background: var(--line); border: var(--case-w) solid var(--line-case);
	transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), block-size var(--dur-base) var(--ease-out), inset-block-start var(--dur-base) var(--ease-out);
}
.net__row > .mn-line-chip, .net__row > .mn-terminus { margin-block-start: 2px; }
.net__stops { flex: 1; display: flex; justify-content: space-around; }
.net__stop {
	display: flex; flex-direction: column; align-items: center; gap: 4px; min-inline-size: var(--target); min-block-size: var(--target); padding: 12px 6px 0;
	font-size: var(--text-sm); line-height: 1.45; white-space: nowrap; text-decoration: none;
}
.net__stop .mn-station--approval { margin-block: -1px; }
/* a line shows at most five stations; a longer one ends with «+N», a link to the whole line */
.net__plus {
	display: grid; place-items: center; min-inline-size: 36px; block-size: 28px; margin-block: -2px; padding-inline: 6px;
	background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius-round);
	font-size: var(--text-sm); font-weight: var(--w-bold); line-height: 1;
}
.net__stop:hover .net__name { text-decoration: underline; }
.net__stop:hover .mn-station:not(.mn-station--approval) { border-color: var(--line-case); }
.net__row.is-sel { --w: var(--line-w); }
/* selecting a line makes the rest quiet (.is-quiet, drawn by style.css) */
@media (prefers-reduced-motion: no-preference) {
	.net__row::before { transform-origin: right; animation: net-run 700ms var(--ease-out) both; animation-delay: calc(250ms + (sibling-index() - 2) * 70ms); }
}
@keyframes net-run { from { transform: scaleX(0); } }
/* phone: the map becomes two columns of line chips */
@media (max-width: 719px) {
	.net__rows { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: var(--space-1); }
	.net__all { grid-column: 1 / -1; }
	.net__all, .net__row { display: block; }
	.net__row::before, .net__stops, .net__row > .mn-terminus { display: none; }
	.net__rows .mn-line-chip { display: flex; inline-size: 100%; block-size: 100%; margin: 0; padding-inline: 12px; line-height: 1.4; }
}
@media (max-width: 359px) { .net__rows { grid-template-columns: 1fr; } }
/* a long line name wraps in its half-width chip, so under 640px the chip shows the short name (term field); the full
   name stays the link's accessible name */
.mn-line-chip__short { display: none; }
@media (max-width: 639px) {
	.mn-line-chip__full { display: none; }
	.mn-line-chip__short { display: inline; }
}

/* filters: tools and sort, a GET form */
.filters { padding: var(--space-3) var(--space-4); background: var(--surface); }
.filters__more > summary { list-style: none; }
.filters__more > summary::-webkit-details-marker { display: none; }
.filters__body { display: grid; gap: var(--space-1); }
.filters__group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.filters__legend { float: inline-start; display: flex; align-items: center; min-block-size: var(--target); margin-inline-end: var(--space-3); padding: 0; font-weight: var(--w-bold); }
.filters__opts { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); }
.filters__opts .mn-choice { gap: 10px; }
.filters__opts .mn-icon { margin-inline-end: -2px; }
.filters__opts .mn-btn { margin-inline-start: auto; }
/* from 720px the body is always shown and the toggle hidden (summary.mn-btn outranks .mn-btn:not(.wp-block-button));
   a browser without ::details-content keeps the toggle, so the closed panel can still be opened */
@supports selector(::details-content) {
	@media (min-width: 720px) {
		.filters__more > summary.mn-btn { display: none; }
		.filters__more::details-content { display: block; content-visibility: visible; }
	}
}
@media (max-width: 719px) {
	.filters { padding: var(--space-2); }
	.filters__more[open] > summary { margin-block-end: var(--space-2); }
	.filters__legend { float: none; min-block-size: 0; margin-block: var(--space-1) 0; }
}

.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-block-size: 48px; margin-block-start: var(--space-4); }
.results-bar p { font-weight: var(--w-semibold); }
.price-note { margin-block: var(--space-2) 0; font-size: var(--text-sm); color: var(--ink-soft); }

/* results: each line a strip map. One track drops from the line's name pill past every service
   (a station on the track, its card beside it) to the terminus after the last row */
.results { display: grid; gap: var(--space-8); padding-block: var(--space-5) var(--space-6); }
.group {
	--strip: 56px;            /* the track's column; cards and lede start after it */
	--pad: var(--space-3);    /* inside a card; the lede shares it, so the lede and every title start on one edge */
	position: relative; isolation: isolate; display: grid; gap: var(--space-3);
}
.group::before {
	content: ""; position: absolute; z-index: -1;
	inset-block: 24px; inset-inline-start: calc(var(--mark-row) / 2 - var(--line-w) / 2); inline-size: var(--line-w);
	background: var(--line); border: var(--case-w) solid var(--line-case);
}
.group__line { display: flex; align-items: center; gap: var(--space-2); min-block-size: 48px; }
.group__name {
	display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: var(--space-3);
	border: var(--case-w) solid var(--line-case); border-radius: var(--radius-round);
	background: var(--line); color: var(--line-on); font-size: var(--text-md); line-height: 1.3; white-space: nowrap;
}
.group__count { color: var(--ink-soft); white-space: nowrap; }
.group__intro { display: grid; gap: var(--space-3); padding-inline-start: var(--strip); }
.group__lede { padding-inline-start: var(--pad); font-size: var(--text-md); line-height: var(--lh-md); }
.group__sample { position: relative; inline-size: min(100%, 380px); }
.group__sample .mn-chat { inline-size: 100%; }
/* a row: its station on the track, its white card after the track */
.group .mn-row {
	grid-template-columns: var(--strip) minmax(0, 1fr) 170px auto;
	grid-template-areas: "line main price go" "line glyphs price go";
	column-gap: var(--pad); row-gap: var(--space-1);
	padding: var(--pad); padding-inline-start: 0; background: none;
}
.group .mn-row::before {
	content: ""; position: absolute; z-index: -1; inset: 0; inset-inline-start: var(--strip);
	background: var(--surface); transition: background-color var(--dur-fast) var(--ease-out);
}
.group .mn-row:hover::before { background: var(--ground-2); }
.group .mn-row:has(a:focus-visible) { outline: none; }
.group .mn-row:has(a:focus-visible)::before { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
.group .mn-row__line { inline-size: var(--mark-row); }
.group .mn-row__line::before { content: none; }
.mn-row__go { grid-area: go; min-block-size: var(--target); padding-inline: var(--space-2); }
.mn-row:hover .mn-row__go { background: var(--ink); color: var(--on-dark); }
.group__end { inline-size: 40px; block-size: 8px; margin-block: 20px; margin-inline-start: 4px; }
@container mn-rows (max-width: 719px) {
	.group .mn-row {
		grid-template-columns: var(--strip) minmax(0, 1fr) auto;
		grid-template-areas: "line main main" "line glyphs glyphs" "line price go";
	}
}
@media (max-width: 719px) {
	/* a count that does not fit beside the pill wraps to the far end, clear of the track */
	.group__line { flex-wrap: wrap; row-gap: var(--space-1); }
	.group__count { margin-inline-start: auto; }
	.group__name { padding-inline: var(--space-2); }
}
@media (max-width: 599px) {
	.group { --pad: var(--space-2); }
}
/* wide: rows in the start column, the line's sample beside them on its stalk, in view while its rows scroll */
@media (min-width: 1100px) {
	.group:has(.group__sample) { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto auto 1fr; column-gap: var(--space-6); }
	.group:has(.group__sample) > *, .group__intro > * { grid-column: 1; }
	.group:has(.group__sample) .group__intro { display: contents; }
	.group:has(.group__sample) .group__lede { padding-inline-start: calc(var(--strip) + var(--pad)); }
	.group__end { align-self: end; }
	.group__intro > .group__sample { grid-column: 2; grid-row: 1 / -1; position: sticky; inset-block-start: 96px; align-self: start; inline-size: auto; margin-block-start: 72px; }
	.group__sample::before {
		content: ""; position: absolute; inset-block-end: 100%; inset-inline-start: calc(50% - 1px);
		inline-size: 2px; block-size: 48px; background: var(--ink);
	}
	.group__sample::after {
		content: ""; position: absolute; inset-block-start: -60px; inset-inline-start: calc(50% - 12px);
		inline-size: var(--station); block-size: var(--station); background: var(--surface);
		border: var(--ring-w) solid var(--ink); border-radius: var(--radius-round);
	}
}

/* empty state: a planned line, drawn dashed as on a metro map */
.empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; margin-block: var(--space-5) var(--space-6); padding: var(--space-6) var(--space-5); background: var(--surface); }
.empty__text { display: grid; gap: var(--space-3); justify-items: start; }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.empty__map { display: flex; align-items: center; min-block-size: 200px; padding: var(--space-3); background: var(--ground); }
.empty__dash { flex: 1; block-size: 0; border-block-start: 10px dashed var(--ink-soft); margin-inline: -2px; }
.empty__stop { display: grid; justify-items: center; gap: var(--space-2); }
.empty__stop .mn-station { border-style: dashed; border-color: var(--ink-soft); inline-size: 32px; block-size: 32px; }
.empty__stop .mn-sign { --line: var(--ink-soft); }
@media (max-width: 719px) {
	.empty { grid-template-columns: minmax(0, 1fr); padding: var(--space-4) var(--space-2); }
	.empty__map { order: -1; min-block-size: 160px; }
}

/* after the list: the way out for work not on the map */
.after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2) var(--space-12); }
.after__ask { display: inline-flex; align-items: center; min-block-size: var(--target); font-weight: var(--w-semibold); }