/* TURKON — an image proofing desk, paced by the existing workflow clock. */
.workflow { --step-progress:0; position:relative; color:var(--text); border-top:1px solid var(--line-strong); }
.workflow-top { display:flex; align-items:center; flex-wrap:wrap; gap:20px; padding:20px 0 30px; }
.workflow-caption { font:500 16px/1.5 var(--font); letter-spacing:.02em; }
.workflow-caption b { color:var(--muted); font-weight:400; margin-inline-start:6px; }
.workflow-mode { margin-inline-start:auto; color:var(--muted); font-size:14px; }
.flow-control { display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 14px; border:1px solid var(--line-strong); border-radius:24px; background:transparent; color:var(--muted); font-size:13px; transition:color 180ms,border-color 180ms; }
.flow-control:hover:not(:disabled) { color:var(--text); border-color:var(--accent-soft); }
.flow-control:disabled { opacity:.5; }
.flow-control svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.flow-play { display:none; } .flow-control.is-paused .flow-pause { display:none; } .flow-control.is-paused .flow-play { display:block; }
.workbench { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr); gap:44px; align-items:start; }
.flow-network { --scan-y:8%; --scan-opacity:0; --guide-draw:1; --guide-opacity:0; --review-draw:1; --review-opacity:0; --detail-scan:0%; --detail-opacity:0; min-width:0; direction:ltr; }
.study-sheet { margin:0; padding:18px 18px 0; border:1px solid #3b3538; background:#101012; position:relative; }
.study-sheet:before,.study-sheet:after { content:'+'; position:absolute; top:-12px; color:var(--soft); background:var(--bg); font:400 18px/20px var(--mono); width:20px; text-align:center; }
.study-sheet:before { left:-10px; } .study-sheet:after { right:-10px; }
.study-image-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; background:#191719; }
.study-image { display:block; width:100%; height:100%; object-fit:cover; }
.study-scan { position:absolute; inset:0; opacity:var(--scan-opacity); pointer-events:none; }
.study-scan i { position:absolute; inset-inline:0; top:var(--scan-y); height:16%; transform:translateY(-100%); background:linear-gradient(0deg,#f3ddcc22,transparent); border-bottom:1px solid #fff6e1b3; box-shadow:0 2px 12px #ffded32a; }
.study-guides { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; fill:none; stroke:url(#review-stroke); stroke-width:1; }
.study-guides circle,.study-guides path { vector-effect:non-scaling-stroke; stroke-dasharray:1; }
.study-detail-guide { opacity:var(--guide-opacity); }
.study-detail-guide circle,.study-connector { stroke-dashoffset:var(--guide-draw); }
.study-connector { stroke-width:.7; }
.study-review { opacity:var(--review-opacity); stroke-dashoffset:var(--review-draw); }
.study-ruler { position:absolute; top:8%; bottom:8%; left:10px; width:5px; opacity:.35; pointer-events:none; background:repeating-linear-gradient(to bottom,#eee 0 1px,transparent 1px 20px); }
.study-detail { position:absolute; bottom:16px; right:16px; width:32%; max-width:200px; padding:5px 5px 30px; border:1px solid #a69b9d; background:#111214; box-shadow:0 8px 24px #0006; }
.study-detail-image { position:relative; aspect-ratio:4/3; overflow:hidden; }
.study-detail-image img { display:block; width:100%; height:100%; object-fit:cover; transform:translate(var(--detail-x,-55%),var(--detail-y,126%)) scale(var(--detail-scale,10)); }
.detail-scan { position:absolute; top:0; bottom:0; left:var(--detail-scan); width:28%; transform:translateX(-100%); opacity:var(--detail-opacity); background:linear-gradient(90deg,transparent,#fff2e826); border-right:1px solid #f3c5cfaa; }
.study-detail > span,.study-detail > b { position:absolute; bottom:6px; font:400 11px/1.5 var(--font); color:var(--text); }
.study-detail > span { left:9px; } .study-detail > b { right:9px; color:var(--soft); }
.study-caption { display:flex; justify-content:space-between; gap:16px; padding:17px 0; color:var(--muted); font-size:13px; }
.study-caption > span:first-child { display:flex; align-items:center; gap:9px; }
.study-caption i { font-style:normal; font-size:19px; color:var(--accent-text); }
.flow-detail { min-width:0; padding-inline-start:32px; border-inline-start:1px solid var(--line); }
.flow-detail:focus-visible { outline-offset:9px; }
.flow-detail-label { display:flex; flex-wrap:wrap; align-items:baseline; gap:16px; margin:0 0 22px; color:var(--accent-text); font-size:12px; letter-spacing:.06em; }
#flow-step-count { color:var(--text); font:600 46px/1 var(--display); letter-spacing:-.01em; direction:ltr; }
.flow-explanation h3 { margin:0 0 18px; font:600 clamp(34px,3.2vw,48px)/1.08 var(--display); min-height:2.16em; }
.flow-explanation > p:not(.flow-detail-label) { margin:0; min-height:84px; color:var(--muted); font-size:16px; line-height:1.65; }
.flow-tags { display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:20px; }
.flow-tags span { font-size:13px; color:var(--soft); }
.flow-tags span:before { content:'·'; margin-inline-end:8px; color:var(--accent-soft); }
.flow-example { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.example-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 16px; color:var(--soft); font-size:11px; letter-spacing:.04em; }
.example-step { color:var(--accent-text); font-size:12px; letter-spacing:0; }
.example-request { font-size:18px; line-height:1.55; margin:13px 0 20px; color:var(--text); }
.example-result > span { font-size:11px; color:var(--soft); letter-spacing:.04em; }
.example-result p { margin:5px 0 0; font-size:14px; line-height:1.6; color:var(--muted); min-height:45px; }
.flow-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:38px; }
.flow-stage { position:relative; display:flex; align-items:flex-start; gap:22px; min-width:0; padding:25px 0 23px; border-top:1px solid var(--line-strong); background:transparent; color:var(--muted); text-align:start; transition:color 180ms; }
.stage-index { font:600 clamp(42px,4vw,62px)/1 var(--display); color:#777174; direction:ltr; transition:color 180ms; }
.stage-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.stage-number { font-size:11px; line-height:1.5; color:var(--soft); letter-spacing:.06em; }
.stage-title { font:600 clamp(26px,2.5vw,36px)/1.15 var(--display); margin-top:6px; color:var(--muted); }
.stage-summary { font-size:14px; line-height:1.5; margin-top:8px; color:var(--muted); }
.stage-selection { position:absolute; top:-1px; inset-inline:0; height:2px; background:var(--accent-soft); transform:scaleX(0); transform-origin:left; }
.flow-stage.is-active .stage-selection { transform:scaleX(var(--step-progress)); }
.flow-stage.is-active .stage-index,.flow-stage:hover .stage-index { color:var(--accent-text); }
.flow-stage.is-active .stage-title,.flow-stage:hover .stage-title { color:var(--text); }
.flow-stage:focus-visible { outline-offset:6px; }
.workflow-bottom { display:flex; justify-content:space-between; gap:18px; border-top:1px solid var(--line); padding-top:20px; color:var(--soft); font-size:13px; line-height:1.65; }
.flow-hint { color:var(--muted); }
[dir=rtl] .study-caption { direction:rtl; }
[dir=rtl] .stage-selection { transform-origin:right; }
[dir=rtl] .workflow .stage-copy { direction:rtl; align-items:flex-start; text-align:start; }
[dir=rtl] .workflow .flow-tags span { padding:0; border:0; }
@media(max-width:1100px) {
 .workbench { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px; }
 .flow-detail { padding-inline-start:24px; }
 .study-sheet { padding:12px 12px 0; }
 .study-caption { flex-wrap:wrap; gap:4px 14px; font-size:12px; }
 .flow-stages { gap:24px; } .flow-stage { gap:14px; }
 .stage-title { font-size:29px; }
}
@media(max-width:760px) {
 .workflow-top { gap:12px; padding:18px 0 24px; }
 .workflow-caption { font-size:15px; } .workflow-caption b { margin-inline-start:2px; }
 .workflow-mode { display:none; }
 .flow-control { margin-inline-start:auto; font-size:12px; gap:6px; padding:8px 11px; }
 .workbench { display:flex; flex-direction:column; gap:28px; }
 .flow-network { width:100%; }
 .study-sheet { padding:10px 10px 0; }
 .study-detail { bottom:10px; right:10px; padding:3px 3px 24px; width:34%; }
 .study-detail > span,.study-detail > b { font-size:10px; bottom:4px; }
 .study-caption { font-size:12px; padding:12px 0; }
 .flow-detail { width:100%; padding-inline-start:0; border-inline-start:0; }
 .flow-detail-label { margin-bottom:14px; } #flow-step-count { font-size:38px; }
 .flow-explanation h3 { font-size:36px; min-height:0; }
 .flow-explanation > p:not(.flow-detail-label) { font-size:16px; min-height:0; }
 .flow-tags { margin-top:15px; }
 .flow-example { margin-top:24px; padding-top:21px; }
 .example-request { font-size:19px; }
 .example-result p { min-height:0; }
 .flow-stages { grid-template-columns:1fr; gap:0; margin-top:28px; }
 .flow-stage { gap:24px; padding-block:20px; min-height:118px; }
 .stage-index { font-size:52px; min-width:44px; }
 .stage-title { font-size:31px; }
 .stage-summary { font-size:15px; }
 .workflow-bottom { flex-direction:column; gap:7px; font-size:12px; }
}
@media(max-width:380px) {
 .workflow-top { align-items:flex-start; }
 .workflow-caption { width:100%; }
 .flow-control { margin-inline-start:0; }
 .flow-explanation h3 { font-size:33px; }
 .study-caption { gap:3px; }
}