/* =========================================================================
   netex · /workflow-xray/ (templates/xray.php) · page layout
   Shared components live in xray-common.css; the meter in engines/cost-meter.css.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s2b why --------------------------------------------------------------- */
.xr-why__body { margin-top: var(--s-7); max-width: 52ch; }

/* ---- s3 days: a ten-day ruler with the stages as bars ---------------------- */
.xr-tierbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-6); }
.js .xr-tierbar [data-tier-switch] { display: inline-flex; }
.xr-tierbar .nx-seg a { display: inline-flex; align-items: center; gap: .3em; padding: 0 var(--s-4); text-decoration: none; color: var(--fg); border-left: var(--bw) solid var(--rule); min-height: 40px; font: 500 var(--t-label)/1 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.xr-sched { --days: 10; margin-bottom: var(--s-8); }
.xr-sched__name { margin-bottom: var(--s-4); font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.js .xr-sched__name { display: none; }
.js [data-xr-tiers]:not([data-tier="compact"]) .xr-sched[data-tier-panel="compact"],
.js [data-xr-tiers][data-tier="compact"] .xr-sched[data-tier-panel="standard"] { display: none; }
.xr-sched__headrow { display: none; }
.xr-sched__rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.xr-sched__row { position: relative; display: grid; gap: var(--s-2); padding: var(--s-5) 0 var(--s-5) var(--s-6); border-top: var(--bw) solid var(--rule); }
.xr-sched__row::before { content: ""; position: absolute; left: 6px; top: var(--s-5); width: 1.5px; height: 18px; background: var(--sig); transform: rotate(43deg); transform-origin: 50% 100%; }
.xr-sched__head { display: grid; gap: var(--s-1); }
.xr-sched__bar { display: none; }
.xr-sched__card { display: grid; gap: var(--s-3); }
.xr-sched__day { justify-self: start; font: 600 .75rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sig); }
.xr-sched__title { font-size: var(--t-h4); line-height: 1.25; max-width: 26ch; }
.xr-sched__body { color: var(--fg-2); max-width: 62ch; font-size: .9375rem; line-height: 1.55; }
.xr-sched__out .nx-tag { color: var(--sig); }

@media (min-width: 900px) {
	.xr-sched__headrow, .xr-sched__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gutter); }
	.xr-sched__ruler {
		display: grid;
		grid-template-columns: repeat(var(--days), minmax(0, 1fr));
		border-bottom: var(--bw) solid var(--rule);
		font: 500 .6875rem/1 var(--f-mono);
		letter-spacing: var(--tr-label);
		color: var(--fg-2);
	}
	.xr-sched__ruler span { position: relative; padding: 0 0 var(--s-3) var(--s-3); }
	.xr-sched__ruler span::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 14px; background: var(--fg-2); transform: rotate(43deg); transform-origin: 50% 100%; }
	.xr-sched__row { padding: var(--s-5) 0; }
	.xr-sched__row::before { display: none; }
	.xr-sched__head { align-content: start; padding-right: var(--s-4); }
	.xr-sched__track {
		display: grid;
		grid-template-columns: repeat(var(--days), minmax(0, 1fr));
		row-gap: var(--s-3);
		align-content: start;
		background-image: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc(100% / var(--days)));
	}
	.xr-sched__bar {
		display: block;
		grid-column: var(--bar);
		grid-row: 1;
		height: 14px;
		margin-top: 4px;
		/* a plain bar: the −47° hatch is reserved for hidden cost (bible R1) */
		background: color-mix(in srgb, var(--sig) 45%, var(--bg));
		border-left: 2px solid var(--sig);
		clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
	}
	.xr-sched__card { grid-column: var(--card); grid-row: 2; padding: var(--s-1) var(--s-3) var(--s-2); background: var(--bg); justify-self: start; }
}

.xr-days__foot { row-gap: var(--s-4); }
.xr-days__note { font-family: var(--f-serif); font-size: var(--t-lead); line-height: var(--lh-lead); max-width: 52ch; }
.xr-days__plant { align-self: end; }
@media (min-width: 1024px) {
	.xr-days__note { grid-column: 1 / span 7; }
	.xr-days__plant { grid-column: 9 / -1; justify-self: end; }
}

/* ---- s4 deliverables -------------------------------------------------------- */
.xr-sheets { margin: 0 0 var(--s-8); padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); container-type: inline-size; }
.xr-sheets__item { display: grid; gap: var(--s-2) var(--gutter); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); align-items: baseline; }
.xr-sheets__code { font: 600 .75rem/1.3 var(--f-mono); letter-spacing: .06em; color: var(--sig); }
.xr-sheets__title { font-size: var(--t-h4); line-height: 1.2; }
.xr-sheets__body { color: var(--fg-2); max-width: 56ch; }
@container (min-width: 760px) {
	.xr-sheets__item { grid-template-columns: 9rem minmax(0, 5fr) minmax(0, 7fr); }
}
.xr-deliv__method { margin-top: var(--s-5); }

/* ---- s4b films -------------------------------------------------------------- */
.xr-films__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-7); }
.xr-films__line { font-family: var(--f-serif); font-style: italic; font-size: var(--t-lead); }

/* ---- s5 price sheet ------------------------------------------------------------ */
.xr-price { padding-inline: var(--s-6); container-type: inline-size; }
.xr-price__rows { margin: 0; padding: 0; list-style: none; }
.xr-price__row { position: relative; display: grid; gap: var(--s-3) var(--s-5); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); align-items: start; }
.xr-price__row:first-child { border-top: 0; }
.xr-price__tier { font-size: var(--t-h4); line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.xr-price__badge { display: inline-flex; align-items: center; padding: 3px 8px; background: var(--indigo); color: var(--paper); font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.xr-price__row.is-rec::before { content: ""; position: absolute; left: -24px; top: calc(var(--s-5) + 2px); width: 1.5px; height: 24px; background: var(--indigo); transform: rotate(43deg); transform-origin: 50% 100%; } /* the 47° hairline stays in the margin, clear of the tier name */
.xr-price__meta { display: grid; gap: var(--s-1); margin: var(--s-3) 0 0; font-size: var(--t-small); }
.xr-price__meta div { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.xr-price__meta dt { font: 500 .6875rem/1.6 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.xr-price__meta dd { margin: 0; }
.xr-price__price { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1 var(--f-mono); letter-spacing: -.02em; white-space: nowrap; }
.xr-price__more summary { list-style: none; display: inline-flex; align-items: center; min-height: 40px; font: 500 .8125rem/1.3 var(--f-mono); color: var(--link); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.xr-price__more summary::-webkit-details-marker { display: none; }
.xr-price__off { display: none; }
.xr-price__more[open] .xr-price__on { display: none; }
.xr-price__more[open] .xr-price__off { display: inline; }
.xr-price__more p { margin-top: var(--s-2); max-width: 52ch; color: var(--fg); }
.xr-price__cta { justify-self: start; }
@container (min-width: 820px) {
	.xr-price__row { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); grid-template-areas: "main price cta" "more more cta"; row-gap: var(--s-1); }
	.xr-price__main { grid-area: main; }
	.xr-price__price { grid-area: price; padding-top: .2rem; }
	.xr-price__more { grid-area: more; }
	.xr-price__cta { grid-area: cta; justify-self: end; }
}
.xr-tiers__notes { display: grid; gap: var(--s-2); margin-top: var(--s-6); max-width: 70ch; font-size: var(--t-small); color: var(--fg-2); }

/* ---- s7 signs: paper tags on a board ----------------------------------------------- */
.xr-board { margin: 0; }
.xr-board__tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-5) var(--s-5); margin: 0; padding: 0; list-style: none; }
.xr-board__item { transform: rotate(var(--tilt, 0deg)); }
html.rm .xr-board__item { transform: none; }
.xr-sign {
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: var(--s-3);
	align-items: start;
	min-height: 100%;
	padding: var(--s-5) var(--s-4) var(--s-4);
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--rule-light);
	cursor: pointer;
	transition: background-color var(--dur-ui) var(--ease-mech), transform var(--dur-ui) var(--ease-mech);
}
.xr-sign::before { content: ""; position: absolute; left: 50%; top: 7px; width: 9px; height: 9px; margin-left: -4.5px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper-2); }
.xr-sign input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.xr-sign__box { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border: 1.5px solid var(--ink); }
.xr-sign__box .nx-icon { width: 16px; height: 16px; opacity: 0; transition: opacity 120ms var(--ease-mech); }
.xr-sign__text { font-family: var(--f-serif); font-style: italic; font-size: 1.125rem; line-height: 1.38; }
.xr-sign:has(input:checked) { background: var(--paper-2); }
.xr-sign:has(input:checked) .xr-sign__box { background: var(--indigo); border-color: var(--indigo); color: var(--paper); }
.xr-sign:has(input:checked) .xr-sign__box .nx-icon { opacity: 1; }
.xr-sign:has(input:focus-visible) { outline: var(--bw-focus) solid var(--cyan); outline-offset: 4px; }
@media (hover: hover) { .xr-sign:hover { transform: translateY(-2px); } }
.xr-signs__out { display: grid; gap: var(--s-4); margin-top: var(--s-8); max-width: 46rem; }
.xr-signs__count { font: 600 1.375rem/1.2 var(--f-mono); color: var(--sig); }
.xr-signs__verdict { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.45; }
html:not(.js) .xr-signs__out { display: none; }

} /* end @layer pages */