/* Editorial problem stories; intentionally isolated from legacy card grids. */
#probleme{--problem-teal:#59e6b2;--problem-purple:#a765d4;--problem-ink:#eaf7f1;--problem-sub:#a9c2b9}
#probleme>.td-copy{max-width:820px}
#probleme>.td-media{position:relative;isolation:isolate;overflow:hidden}
#probleme>.td-media picture{display:block;position:relative;z-index:0}
#probleme>.td-media picture>img{display:block;width:100%;height:auto}
.process-sheet-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;color:#10251f;font-family:system-ui,sans-serif}
.process-sheet-node{position:absolute;top:81.7%;width:8.2%;min-width:62px;transform:translate(-50%,-50%) rotate(-.4deg);display:flex;align-items:center;justify-content:center;gap:clamp(3px,.4vw,7px);white-space:nowrap;text-align:center;text-transform:uppercase;text-shadow:0 1px 1px #fff8;font-size:clamp(.52rem,.68vw,.68rem);font-weight:900;letter-spacing:.015em}
.process-sheet-node b{display:grid;place-items:center;width:clamp(15px,1.35vw,21px);height:clamp(15px,1.35vw,21px);border-radius:50%;background:#10251f;color:#f7fff9;font-size:.62em;letter-spacing:0;box-shadow:0 2px 6px #10251f38}
.process-sheet-node--request{left:32.5%}.process-sheet-node--pos{left:41.2%}.process-sheet-node--check{left:50.5%}.process-sheet-node--device{left:60.3%}.process-sheet-node--proof{left:70.5%}
.td-process-legend{position:relative;z-index:2}
.problems-story{position:relative;margin:clamp(42px,6vw,82px) 0 0;border-top:1px solid color-mix(in srgb,var(--line) 76%,var(--problem-teal) 24%);border-bottom:1px solid var(--line)}
.problems-story::before{content:"";position:absolute;left:clamp(214px,19vw,286px);top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--problem-teal) 16%,var(--problem-purple) 52%,var(--problem-teal) 84%,transparent);opacity:.4}
.problem-story{display:grid;grid-template-columns:minmax(215px,.72fr) minmax(0,2.1fr);align-items:center;gap:clamp(34px,5vw,82px);padding:clamp(42px,6vw,86px) 0;border-bottom:1px solid var(--line);position:relative;min-width:0}
.problem-story:last-child{border-bottom:0}.problem-story:nth-child(even){grid-template-columns:minmax(0,2.1fr) minmax(215px,.72fr)}.problem-story:nth-child(even) .problem-story-copy{grid-column:2;grid-row:1}.problem-story:nth-child(even) .problem-story-visual{grid-column:1;grid-row:1}
.problem-story-copy{position:relative;z-index:2;max-width:350px}.problem-kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px!important;color:var(--problem-teal)!important;font-size:.69rem!important;font-weight:800;letter-spacing:.15em}.problem-kicker span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--problem-teal) 66%,transparent);font-size:.67rem;letter-spacing:0}
.problem-story h3{font-size:clamp(1.45rem,2.25vw,2.25rem);line-height:1.06;margin:0 0 16px}.problem-story-copy>p:last-child{margin:0;color:var(--muted);line-height:1.65;font-size:1rem}
.problem-story-visual{margin:0;min-width:0}.problem-story-visual svg{display:block;width:100%;height:auto;overflow:visible;color:var(--problem-ink)}
.story-route-base,.story-route-active{fill:none;stroke-linecap:round}.story-route-base{stroke:color-mix(in srgb,var(--line) 65%,var(--problem-purple) 35%);stroke-width:13}.story-route-active{stroke:var(--problem-teal);stroke-width:4;stroke-dasharray:16 30;animation:problems-route 5.4s linear infinite}
.story-object{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.62;animation:problems-object-focus 6s ease-in-out infinite;will-change:opacity,filter}.story-object.transform-object{animation-delay:-4s}.story-object.result-object{animation-delay:-2s}.story-object text{fill:var(--problem-sub);stroke:none;font:800 16px/1.2 system-ui,sans-serif;letter-spacing:.11em;text-anchor:middle}.story-object .sheet,.story-object .inbox,.story-object .vault,.story-object>rect{fill:color-mix(in srgb,var(--panel) 90%,var(--problem-purple) 10%)}.story-object.transform-object>circle{fill:color-mix(in srgb,var(--panel) 88%,var(--problem-teal) 12%)}.story-object .status-dot,.story-object .badge,.story-object .tick{stroke:var(--problem-teal)}.story-object .status-dot{fill:var(--problem-teal)}.story-object .badge,.story-object .tick,.story-object .lens{stroke-width:6}.problem-story[data-problem-story="ownership"] .story-object:nth-of-type(2){color:#e7d7f3}.problem-story[data-problem-story="continuity"] .story-object:nth-of-type(2){color:#ddc4ef}
.problem-story-visual figcaption{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:-8px;color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.problem-story-visual figcaption span{text-align:center}
html[data-theme="light"] #probleme{--problem-ink:#16372f;--problem-sub:#36584f}.problem-story-visual svg{filter:drop-shadow(0 15px 24px #0002)}html[data-theme="light"] .problem-story-visual svg{filter:drop-shadow(0 12px 20px #16372f15)}
@keyframes problems-route{to{stroke-dashoffset:-92}}@keyframes problems-object-focus{0%,18%{opacity:1;filter:drop-shadow(0 0 12px rgba(89,230,178,.38))}30%,100%{opacity:.62;filter:none}}
@media(max-width:900px){.problems-story::before{left:176px}.problem-story,.problem-story:nth-child(even){grid-template-columns:minmax(175px,.62fr) minmax(0,1.8fr);gap:28px}.problem-story h3{font-size:1.5rem}.problem-story-visual figcaption{font-size:.61rem}}
@media(max-width:700px){#probleme{scroll-margin-top:92px}#probleme>.td-media{width:calc(100% + 36px);margin-left:-18px}.problems-story{margin-top:46px}.problems-story::before{left:16px;top:38px;bottom:38px}.problem-story,.problem-story:nth-child(even){display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:46px 0 50px 34px}.problem-story:nth-child(even) .problem-story-copy,.problem-story:nth-child(even) .problem-story-visual{grid-column:auto;grid-row:auto}.problem-story-copy{max-width:520px}.problem-kicker{margin-bottom:14px!important}.problem-story h3{font-size:clamp(1.55rem,7vw,2rem);line-height:1.08}.problem-story-visual{width:calc(100% + 18px);margin-left:-18px}.problem-story-visual svg{min-height:230px}.problem-story-visual figcaption{gap:4px;margin-top:-2px;font-size:.58rem;letter-spacing:.035em}.story-object text{font-size:15px}.story-route-base{stroke-width:16}.story-route-active{stroke-width:5}}
@media(max-width:700px){.process-sheet-node{top:73.2%;width:13.8%;min-width:0;gap:2px;transform:translate(-50%,-50%) rotate(-.2deg);font-size:clamp(.39rem,1.75vw,.5rem);letter-spacing:-.025em}.process-sheet-node b{width:13px;height:13px;font-size:.58em}.process-sheet-node--request{left:23.3%}.process-sheet-node--pos{left:38.1%}.process-sheet-node--check{left:52.2%}.process-sheet-node--device{left:66.5%}.process-sheet-node--proof{left:82%}.td-process-legend span{font-size:.69rem}}
@media(max-width:390px){.process-sheet-node{font-size:.36rem}.process-sheet-node b{display:none}}
@media(max-width:430px){.problem-story{padding-left:28px}.problem-story-visual{width:calc(100% + 12px);margin-left:-12px}.problem-story-visual figcaption{font-size:.52rem}}
@media(prefers-reduced-motion:reduce){.story-route-active,.story-object{animation:none!important}.story-route-active{stroke-dasharray:none;opacity:.72}.story-object{opacity:1;filter:none}}
.motion-paused .story-route-active,.motion-paused .story-object{animation-play-state:paused!important}

/* 026: each example is a single visual system, not a row of decorative arrows. */
.problem-story-visual{padding:clamp(8px,1.2vw,14px) 0}
.problem-story-visual svg{filter:none!important}
.story-canvas{fill:color-mix(in srgb,var(--surface) 94%,var(--problem-teal) 6%);stroke:color-mix(in srgb,var(--line) 82%,var(--problem-teal) 18%);stroke-width:2;rx:26}
.story-stage{fill:color-mix(in srgb,var(--bg) 93%,var(--problem-purple) 7%);stroke:color-mix(in srgb,var(--line) 72%,var(--problem-purple) 28%);stroke-width:2;rx:20}
.story-stage-focus{fill:color-mix(in srgb,var(--bg) 86%,var(--problem-teal) 14%);stroke:color-mix(in srgb,var(--problem-teal) 70%,var(--line));stroke-width:3}
.story-stage-number{fill:var(--problem-sub);font:800 11px/1 system-ui,sans-serif;letter-spacing:.11em}
.story-link path{fill:none;stroke:color-mix(in srgb,var(--problem-teal) 48%,var(--line));stroke-width:10;stroke-linecap:round}
.story-port{fill:var(--problem-teal);stroke:color-mix(in srgb,var(--bg) 70%,transparent);stroke-width:3}
.story-packet{fill:#fff;stroke:var(--problem-teal);stroke-width:4;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--problem-teal) 70%,transparent));transform-box:fill-box;transform-origin:center;animation:problem-packet 2.7s cubic-bezier(.45,0,.55,1) infinite}
.story-packet-b{animation-delay:-1.35s}
.story-object{opacity:1!important;animation:none!important;stroke-width:3.2;filter:none!important}
.story-object text{fill:var(--problem-ink);font-size:14px;letter-spacing:.08em}
.story-object .sheet,.story-object .inbox,.story-object .vault,.story-object>rect{fill:color-mix(in srgb,#fff 88%,var(--problem-teal) 12%);stroke:color-mix(in srgb,var(--problem-ink) 72%,var(--problem-teal) 28%)}
.story-object.transform-object>circle{fill:color-mix(in srgb,var(--problem-teal) 22%,var(--bg));stroke:var(--problem-teal)}
.problem-story-visual figcaption{margin-top:8px;letter-spacing:.045em}
@keyframes problem-packet{0%{transform:translateX(0);opacity:.25}15%{opacity:1}85%{opacity:1}100%{transform:translateX(54px);opacity:.25}}
@media(max-width:700px){.problem-story-visual{width:100%;margin-left:0}.problem-story-visual svg{min-height:0}.story-stage-number{font-size:15px;letter-spacing:.045em}.story-object text{font-size:22px;letter-spacing:.035em;paint-order:stroke;stroke:var(--bg);stroke-width:2px}.problem-story-visual figcaption{font-size:.7rem;line-height:1.35;letter-spacing:.02em}}
@media(prefers-reduced-motion:reduce){.story-packet{animation:none!important;transform:translateX(27px);opacity:1}}
.motion-paused .story-packet{animation-play-state:paused!important}