/* =========================================================================
   netex · engines/tuesday-lens.css · the «Μια συνηθισμένη Τρίτη» board (bible S4)
   Day on Paper · film on Ink inside the 47° lens · Molten hatch on hidden blocks.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.ai-board {
	--who: 176px;
	--lane-h: 70px;
	position: relative;
	overflow: hidden;
	background: var(--paper);
	color: var(--ink);
	border: var(--bw) solid var(--rule-light);
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	container-type: inline-size;
}
.ai-board.is-drag { cursor: grabbing; }
.ai-board:focus-visible { outline: var(--bw-focus) solid var(--indigo); outline-offset: var(--focus-offset); }
.ai-board__day, .ai-board__film { padding: 10px 14px 14px; }
.ai-board__film {
	position: absolute;
	inset: 0;
	background: var(--ink);
	color: var(--paper);
	pointer-events: none;
	will-change: clip-path;
}

/* hour ruler */
.ai-board__hours { display: grid; grid-template-columns: var(--who) minmax(0, 1fr); height: 22px; }
.ai-board__ruler { position: relative; }
.ai-board__ruler span {
	position: absolute;
	left: calc(var(--p) * 100%);
	top: 0;
	transform: translateX(-50%);
	font: 500 .6875rem/1 var(--f-mono);
	letter-spacing: .02em;
	color: var(--steel-dark);
}
.ai-board__film .ai-board__ruler span { color: var(--steel); }
.ai-board__ruler span:first-child { transform: none; }
.ai-board__ruler span:last-child { transform: translateX(-100%); }

/* lanes */
.ai-lane { display: grid; grid-template-columns: var(--who) minmax(0, 1fr); height: var(--lane-h); border-top: var(--bw) solid var(--rule-light); }
.ai-board__film .ai-lane { border-top-color: var(--rule-dark); }
.ai-lane.is-dim .ai-lane__who { color: var(--steel-dark); }
.ai-lane.is-dim .ai-lane__who .nx-glyph { opacity: .5; }
.ai-lane.is-dim .ai-blk { background: transparent; border-color: var(--rule-light); }
.ai-board__film .ai-lane.is-dim .ai-lane__who { color: var(--steel); }
.ai-board__film .ai-lane.is-dim .ai-blk.is-filler { border-color: color-mix(in srgb, var(--paper) 7%, transparent); }
.ai-board__film .ai-lane.is-dim .ai-blk.is-leak { background: var(--ink-2); border-color: color-mix(in srgb, var(--molten) 45%, var(--ink)); }
.ai-board.is-ai .ai-lane.is-dim .ai-blk.is-leak { border-color: color-mix(in srgb, var(--cyan) 45%, var(--ink)); }
.ai-board.is-ai .ai-lane.is-dim .ai-blk__back { color: color-mix(in srgb, var(--cyan) 45%, var(--ink)); }
.ai-lane__who { display: flex; align-items: center; gap: var(--s-2); padding-right: var(--s-3); min-width: 0; }
.ai-lane__who .nx-glyph { width: 24px; height: 24px; }
.ai-lane__who span { display: grid; min-width: 0; }
.ai-lane__who b { font: 640 .9375rem/1.15 var(--f-sans); }
.ai-lane__who small { font: 500 .625rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--steel-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-board__film .ai-lane__who small { color: var(--steel); }
.ai-lane__track {
	position: relative;
	background-image: repeating-linear-gradient(90deg, var(--rule-light) 0 1px, transparent 1px 12.5%);
}
.ai-board__film .ai-lane__track { background-image: repeating-linear-gradient(90deg, var(--rule-dark) 0 1px, transparent 1px 12.5%); }

/* blocks */
.ai-blk {
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: calc(var(--s) * 100% + 1px);
	width: calc((var(--e) - var(--s)) * 100% - 2px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 3px 5px;
	overflow: hidden;
	background: var(--paper-2);
	border: var(--bw) solid var(--paper-3);
	font: 500 .5625rem/1.1 var(--f-mono);
	color: var(--steel-dark);
}
.ai-blk small { font: inherit; white-space: nowrap; }
.ai-board__film .ai-blk.is-filler { background: transparent; border-color: var(--rule-dark); color: var(--steel); }
.ai-board__film .ai-blk.is-leak {
	color: var(--molten);
	background: var(--hatch), var(--ink-2);
	border: var(--bw-2) solid var(--molten);
}
.ai-blk__verb, .ai-blk.is-leak small {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	padding: 1px 3px;
	background: var(--ink);
	color: var(--paper);
	font: 600 .5625rem/1.15 var(--f-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ai-blk.is-leak small { color: var(--molten); text-transform: none; letter-spacing: 0; font-weight: 500; }
.ai-blk__review, .ai-blk__back { display: none; position: absolute; top: 0; bottom: 0; }
.ai-blk.is-narrow small, .ai-blk.is-narrow .ai-blk__verb { display: none; }

/* «Με AI»: each leak splits into «stays with the person» and «handed back» (hatched) */
.ai-board.is-ai .ai-blk.is-leak { background: var(--ink-2); border-color: var(--cyan); color: var(--cyan); }
.ai-board.is-ai .ai-blk__review, .ai-board.is-ai .ai-blk__back { display: block; }
.ai-board.is-ai .ai-blk__review { left: 0; width: calc((1 - var(--back)) * 100%); background: var(--ink-3); border-right: var(--bw-2) solid var(--cyan); }
.ai-board.is-ai .ai-blk__back { right: 0; width: calc(var(--back) * 100%); background: var(--hatch); color: var(--cyan); }
.ai-board.is-ai .ai-blk.is-leak small, .ai-board.is-ai .ai-blk__verb { color: var(--paper); }

/* the lens */
.ai-board__lens {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--lw, 140px);
	margin-left: calc(var(--lw, 140px) / -2);
	transform-origin: 50% 50%;
	pointer-events: none;
	transition: opacity var(--dur-cut) var(--ease-cut);
}
.ai-board__lens.is-off { opacity: 0; }
.ai-board__edge { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--n-grad); }
.ai-board__edge.is-a { left: 0; }
.ai-board__edge.is-b { right: 0; }
.ai-board__tag {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	padding: 3px 8px;
	background: var(--cyan);
	color: var(--ink);
	font: 600 .625rem/1.2 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity var(--dur-cut) var(--ease-cut);
}
.ai-board__tag.is-off { opacity: 0; }

/* 11:47 */
.ai-board__egg {
	position: absolute;
	z-index: 5;
	display: grid;
	gap: 4px;
	width: 232px;
	padding: 10px 12px 12px;
	background: var(--paper);
	color: var(--ink);
	border: var(--bw) solid var(--paper-3);
	box-shadow: 4px 4px 0 var(--ink);
	transform: rotate(-3deg);
	cursor: pointer;
}
.ai-board__egg b { font: 700 1rem/1 var(--f-mono); color: var(--molten-deep); }
.ai-board__eggt { font: 640 .9375rem/1.25 var(--f-sans); }
.ai-board__eggb { font: italic 400 .8125rem/1.4 var(--f-serif); }

/* readout log (beside the board) */
.ai-readout__big.is-empty { visibility: hidden; }
.ai-readout__log { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
@media (min-width: 1024px) { .ai-readout__log { max-height: 360px; overflow: auto; overscroll-behavior: contain; } }
.ai-readout__log li { display: grid; grid-template-columns: auto auto 1fr; gap: 2px var(--s-2); align-items: baseline; padding: var(--s-2) 0; border-top: var(--bw) solid var(--rule); font-size: .8125rem; line-height: 1.4; }
.ai-readout__log time { font: 500 .6875rem/1.3 var(--f-mono); color: var(--fg-2); }
.ai-readout__log i { font: 600 .625rem/1.3 var(--f-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--leak); }
.ai-readout__log b { justify-self: end; font: 600 .75rem/1.3 var(--f-mono); color: var(--leak); }
.ai-readout__log b.is-back { color: var(--sig); }
.ai-readout__log span { grid-column: 1 / -1; }
.ai-log__ai { font: 600 .625rem/1 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sig); }

/* Nobody lane opens with a 47° wipe */
.ai-nobody.is-wiping { animation: ai-wipe var(--dur-wipe) var(--ease-cut) both; }
@keyframes ai-wipe {
	from { clip-path: polygon(0 0, 0 0, -60px 100%, -60px 100%); }
	to { clip-path: polygon(0 0, calc(100% + 60px) 0, 100% 100%, -60px 100%); }
}
.ai-nobody__ghost.is-focus { border-color: var(--fg); }
.ai-tuesday__astext { justify-self: start; }

/* vertical board (narrow): 4 day columns, time running down; the lens moves by its handle */
.ai-board.is-vert { --who: 0px; touch-action: pan-y; cursor: default; }
.ai-board.is-vert .ai-board__day, .ai-board.is-vert .ai-board__film { display: grid; grid-template-columns: 38px minmax(0, 1fr); padding: 8px 8px 12px 4px; }
.ai-board.is-vert .ai-board__hours { grid-column: 1; height: auto; display: block; position: relative; margin-top: 64px; }
.ai-board.is-vert .ai-board__corner { display: none; }
.ai-board.is-vert .ai-board__ruler { position: absolute; inset: 0; }
.ai-board.is-vert .ai-board__ruler span { left: 0; top: calc(var(--p) * 100%); transform: translateY(-50%); font-size: .5625rem; }
.ai-board.is-vert .ai-board__ruler span:first-child { transform: none; }
.ai-board.is-vert .ai-board__ruler span:last-child { transform: translateY(-100%); }
.ai-board.is-vert .ai-board__lanes { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ai-board.is-vert .ai-lane { height: auto; grid-template-columns: none; grid-template-rows: 64px 520px; border-top: 0; border-left: var(--bw) solid var(--rule-light); }
.ai-board.is-vert .ai-board__film .ai-lane { border-left-color: var(--rule-dark); }
.ai-board.is-vert .ai-lane__who { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; padding: 0 4px 6px; }
.ai-board.is-vert .ai-lane__who .nx-glyph { width: 20px; height: 20px; }
.ai-board.is-vert .ai-lane__who b { font-size: .8125rem; }
.ai-board.is-vert .ai-lane__who small { font-size: .5rem; white-space: normal; }
.ai-board.is-vert .ai-lane__track { background-image: repeating-linear-gradient(180deg, var(--rule-light) 0 1px, transparent 1px 12.5%); }
.ai-board.is-vert .ai-board__film .ai-lane__track { background-image: repeating-linear-gradient(180deg, var(--rule-dark) 0 1px, transparent 1px 12.5%); }
.ai-board.is-vert .ai-blk { top: calc(var(--s) * 100% + 1px); height: calc((var(--e) - var(--s)) * 100% - 2px); bottom: auto; left: 4px; width: auto; right: 4px; padding: 2px 3px; }
.ai-board.is-vert .ai-blk small { display: none; }
.ai-board.is-vert .ai-blk__verb { font-size: .5rem; letter-spacing: .02em; }
.ai-board.is-vert.is-ai .ai-blk__review { left: 0; right: 0; top: 0; width: auto; height: calc((1 - var(--back)) * 100%); border-right: 0; border-bottom: var(--bw-2) solid var(--cyan); }
.ai-board.is-vert.is-ai .ai-blk__back { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: calc(var(--back) * 100%); }
.ai-board.is-vert .ai-board__tag { padding: 8px 10px; touch-action: none; min-height: 32px; display: inline-flex; align-items: center; pointer-events: auto; cursor: grab; }

/* reduced motion: everything instant */
html.rm .ai-board__film { will-change: auto; }
html.rm .ai-board__lens, html.rm .ai-lane { transition: none; }

} /* end @layer pages */