/* =========================================================================
   netex · pages/web-shared.css · shared by the web-proof views (web-apps, web-sub, proof,
   single-nx_work): the code-drawn line art (drawing register, bible §8.1), source chips and the
   order-journey drawing states. Enqueued by netex_web_proof_use_css( 'web-shared' ).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- drawing register ---------------------------------------------------- */
.wpd { display: block; width: 100%; height: auto; color: var(--line-art, var(--ink)); overflow: visible; }
.wpd :is(path, line, rect, circle, ellipse, polyline) { vector-effect: non-scaling-stroke; }
.wpd text { fill: currentColor; font-family: var(--f-mono); font-size: 22px; font-weight: 500; letter-spacing: .02em; }
.wpd .wpd-paper { fill: var(--paper); stroke: currentColor; stroke-width: 1.5; }
.wpd .wpd-shadow { fill: currentColor; opacity: .08; }
.wpd .wpd-obj, .wpd .wpd-device, .wpd .wpd-frame, .wpd .wpd-box, .wpd .wpd-stop__box, .wpd .wpd-layer__edge, .wpd .wpd-clamp { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.wpd .wpd-screen { fill: var(--paper); stroke: currentColor; stroke-width: 1.5; }
.wpd .wpd-device { fill: var(--paper-2); }
.wpd .wpd-line, .wpd .wpd-rule, .wpd .wpd-leader, .wpd .wpd-tick, .wpd .wpd-dim, .wpd .wpd-rail, .wpd .wpd-arrow, .wpd .wpd-sign { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.wpd .wpd-line { stroke-width: 6; opacity: .22; stroke-linecap: butt; }
.wpd .wpd-line--num { opacity: .4; }
.wpd .wpd-rule--soft { opacity: .3; }
.wpd .wpd-thin, .wpd .wpd-mesh { fill: none; stroke: currentColor; stroke-width: 1; opacity: .45; }
.wpd .wpd-hatchline { fill: none; stroke: currentColor; stroke-width: 1.5; }
.wpd .wpd-photo { fill: var(--paper-2); stroke: currentColor; stroke-width: 1.5; }
.wpd .wpd-bar { fill: currentColor; opacity: .85; }
.wpd .wpd-btn { fill: var(--molten); }
.wpd .wpd-chip { fill: none; stroke: var(--cyan-deep); stroke-width: 1.5; }
.wpd .wpd-tickmark { fill: none; stroke: var(--cyan-deep); stroke-width: 2.5; stroke-linecap: square; }
.wpd .wpd-box.is-on { fill: var(--cyan-deep); stroke: var(--cyan-deep); }
.wpd .wpd-box.is-on + .wpd-tickmark { stroke: var(--paper); }
.wpd .wpd-stockbar { fill: var(--cyan-deep); opacity: .75; }
.wpd .wpd-stockbar.is-low { fill: var(--molten-deep); opacity: 1; }
.wpd .wpd-code { font-size: 64px; font-weight: 700; }
.wpd .wpd-aa { font-family: var(--f-sans); font-size: 104px; font-weight: 760; letter-spacing: -.02em; }
.wpd .wpd-label { font-size: 34px; font-weight: 600; letter-spacing: .02em; }
.wpd .wpd-dimlabel { font-size: 26px; opacity: .7; }
/* phones: the drawing is ~330 px wide, so its layer names grow to stay legible (they still end inside
   the trimmed viewBox: «περιεχόμενο» at 45 units ends near x 1637, "content" at 58 near 1582) */
@media (max-width: 767px) {
	.wpd--section .wpd-label { font-size: 45px; }
	html[lang="en"] .wpd--section .wpd-label { font-size: 58px; }
	.wpd--section .wpd-dimlabel { font-size: 34px; }
}
.wpd .wpd-rails line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 4 6; opacity: .45; }
.wpd .wpd-sheet--content .wpd-paper { fill: var(--paper); }
.wpd .wpd-sheet--type .wpd-paper, .wpd .wpd-sheet--code .wpd-paper { fill: var(--paper-2); }
.wpd .wpd-sheet--images .wpd-paper { fill: var(--paper); }

/* Websites hero: the scan line passes once, the layer labels stamp (motion only on .is-play) */
.wpd--section .wpd-tag { opacity: 1; }
html:not(.rm) .wpd--section.is-play .wpd-tag { animation: wpd-stamp var(--dur-stamp) var(--ease-stamp) both; }
html:not(.rm) .wpd--section.is-play .wpd-tag[data-layer="images"] { animation-delay: 120ms; }
html:not(.rm) .wpd--section.is-play .wpd-tag[data-layer="type"] { animation-delay: 240ms; }
html:not(.rm) .wpd--section.is-play .wpd-tag[data-layer="content"] { animation-delay: 360ms; }
@keyframes wpd-stamp { from { opacity: 0; } to { opacity: 1; } }

/* Care log */
.wpd--log .wpd-head { font-family: var(--f-sans); font-size: 30px; font-weight: 640; letter-spacing: -.005em; }
.wpd--log .wpd-date { font-size: 24px; opacity: .8; }
.wpd--log .wpd-entry { font-size: 27px; }
.wpd--log .wpd-tickmark { stroke: var(--cyan-deep); }
.wpd--log .wpd-faded { opacity: .45; }
.wpd--log .wpd-leakring { fill: none; stroke: var(--molten); stroke-width: 2.5; }

/* Care wall section */
.wpd--wall .wpd-hatch { stroke: var(--indigo); stroke-width: 1.2; }
.wpd--wall .wpd-layer.is-inner .wpd-hatch { stroke: var(--cyan-deep); }
.wpd--wall .wpd-layer__fill { stroke: none; }
.wpd--wall .wpd-layer__edge { stroke: var(--ink); }
.wpd--wall .wpd-layer__name { font-family: var(--f-sans); font-size: 21px; font-weight: 600; letter-spacing: 0; fill: var(--ink); }
.wpd--wall .wpd-side { font-size: 18px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.wpd--wall .wpd-layer { transition: opacity var(--dur-ui) var(--ease-mech); }
.wpd--wall.has-focus .wpd-layer:not(.is-focus) { opacity: .28; }

/* Order journey: off = five Molten hand-offs on dashed links; on = cyan connectors, one exception */
.wpd--journey { color: var(--line-art, var(--ink)); }
.wpd--journey .wpd-rail { opacity: 0; }
.wpd--journey .wpd-stop__box { fill: var(--paper); }
.wpd--journey .wpd-stop__glyph * { fill: none; stroke: currentColor; stroke-width: .62; stroke-linecap: square; stroke-linejoin: miter; vector-effect: none; }
.wpd--journey .wpd-stop__name { font-family: var(--f-sans); font-size: 21px; font-weight: 600; letter-spacing: 0; }
.wpd--journey .wpd-link-off { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 5 7; fill: none; }
.wpd--journey .wpd-link-on { stroke: var(--cyan-deep); stroke-width: 3; fill: none; opacity: 0; }
.wpd--journey .wpd-hand__head, .wpd--journey .wpd-hand__body { fill: var(--molten); stroke: none; }
.wpd--journey .wpd-hand__drop { stroke: var(--molten); stroke-width: 2; stroke-dasharray: 3 4; }
.wpd--journey .wpd-exception { opacity: 0; }
.wpd--journey .wpd-exception__ring { fill: none; stroke: var(--cyan-deep); stroke-width: 2.5; }
.wpd--journey .wpd-exception__head, .wpd--journey .wpd-exception__body { fill: var(--ink); }
.wpd--journey.is-on .wpd-link-off, .wpd--journey.is-on .wpd-hand { opacity: 0; }
.wpd--journey.is-on .wpd-link-on, .wpd--journey.is-on .wpd-exception { opacity: 1; }
html:not(.rm) .wpd--journey.is-on .wpd-link-on { animation: wpd-stamp var(--dur-stamp) var(--ease-stamp) both; }
html:not(.rm) .wpd--journey.is-on .wpd-gap[data-gap="1"] .wpd-link-on { animation-delay: 160ms; }
html:not(.rm) .wpd--journey.is-on .wpd-gap[data-gap="2"] .wpd-link-on { animation-delay: 320ms; }
html:not(.rm) .wpd--journey.is-on .wpd-gap[data-gap="3"] .wpd-link-on { animation-delay: 480ms; }
html:not(.rm) .wpd--journey.is-on .wpd-gap[data-gap="4"] .wpd-link-on { animation-delay: 640ms; }
html:not(.rm) .wpd--journey.is-on .wpd-gap[data-gap="5"] .wpd-link-on { animation-delay: 800ms; }
.wpd--journey .wpd-stop.is-current .wpd-stop__box { stroke-width: 3; }
:is(.f-ink, .f-ink-2, .f-indigo) .wpd--journey .wpd-stop__box { fill: var(--ink-2); }
:is(.f-ink, .f-ink-2, .f-indigo) .wpd--journey .wpd-link-on, :is(.f-ink, .f-ink-2, .f-indigo) .wpd--journey .wpd-exception__ring { stroke: var(--cyan); }
:is(.f-ink, .f-ink-2, .f-indigo) .wpd--journey .wpd-exception__head, :is(.f-ink, .f-ink-2, .f-indigo) .wpd--journey .wpd-exception__body { fill: var(--paper); }

/* Apps: one beat per drawing (a field stamps in), on the viewer's active item */
.wpd--app .wpd-beat { opacity: 1; }
html:not(.rm) .is-active > .wpd--app .wpd-beat, html:not(.rm) .wa-app:is(:hover, :focus-visible) .wpd--app .wpd-beat { animation: wpd-beat 560ms steps(4, jump-end) both; }
@keyframes wpd-beat { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }

/* ---- long text links (file names, «Δείτε τις κεφαλίδες…») wrap ragged-right, never centred --------- */
:is(.wa-apps__links, .wc-wall__link, .we-cta__files, .pf-files__endcta, .bbf__actions, .pf-case__actions, .bbc-close__actions, .wa-spec__meta) .nx-btn--text { justify-content: flex-start; text-align: left; }

/* ---- the pillar tag on a case: which hemisphere lights (bible S15) ------------------------ */
.wp-pillar { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.wp-pillar__brain { width: 30px; height: auto; flex: none; color: var(--fg-3); }
.wp-pillar__brain :is(path, line, circle) { vector-effect: non-scaling-stroke; stroke-width: 1.1; }
.wp-pillar__brain .bm-const { display: none; }
.wp-pillar__brain .bm-l > g + g, .wp-pillar__brain .bm-r > g + g { opacity: .5; }
.wp-pillar__brain.is-left .bm-l, .wp-pillar__brain.is-right .bm-r, .wp-pillar__brain.is-both :is(.bm-l, .bm-r) { color: var(--sig); }
.wp-pillar__brain.is-left .bm-l path, .wp-pillar__brain.is-right .bm-r path, .wp-pillar__brain.is-both path { stroke-width: 1.5; }

/* ---- source chips: «Socialinsider» + the proof label ---------------------------------- */
.wp-src { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .03em; color: var(--fg-2); }
.wp-src__name { text-transform: none; }
.wp-src__kind { text-transform: uppercase; letter-spacing: var(--tr-label); }

} /* end @layer pages */
