/* Interactive journey drawings. The atlas is an independent research aid. */
.journey-drawing {
  margin: 18px 0 26px;
  padding: clamp(16px, 2.5vw, 28px);
  border: 1px solid #cbded2;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7faf7 0%, #fff 58%, #faf6ee 100%);
  box-shadow: 0 14px 34px rgba(0, 77, 72, .055);
}
.journey-drawing-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 24px; }
.journey-drawing-head h3 { margin: 3px 0 6px; color: #005e58; font-size: clamp(17px, 2vw, 22px); }
.journey-drawing-head p { margin: 0; max-width: 60ch; color: #61726b; font-size: 12px; }
.journey-drawing-hint { align-self: center; color: #8c6a32; font-size: 11px; font-weight: 700; }
.person-route-viewport { margin-top: 20px; padding: 4px 1px 17px; overflow-x: auto; direction: rtl; scrollbar-color: #a98445 #edf3ed; scrollbar-width: thin; }
.person-route { display: flex; align-items: stretch; gap: 28px; width: max-content; min-width: 100%; }
.person-route-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; width: clamp(154px, 17vw, 204px); min-height: 133px; padding: 17px; border: 1px solid #c9ded2; border-radius: 15px; color: #005e58; background: #fff; text-align: right; line-height: 1.55; box-shadow: 0 7px 18px rgba(0, 77, 72, .045); cursor: pointer; }
.person-route-step:not(:last-child)::after { content: "←"; position: absolute; left: -25px; top: 50%; transform: translateY(-50%); color: #a98445; font-size: 23px; font-weight: 800; pointer-events: none; }
.person-route-step:hover { border-color: #8db8a5; background: #f5faf6; }
.person-route-step[aria-pressed="true"] { border-color: #006d67; color: #fff; background: #006d67; box-shadow: 0 10px 24px rgba(0, 77, 72, .19); }
.person-route-step .step-number { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #805e29; background: #f8efe0; font-size: 11px; font-weight: 800; }
.person-route-step[aria-pressed="true"] .step-number { color: #006d67; background: #fff; }
.person-route-step strong { max-width: 100%; font-size: 13px; }
.person-route-step small { margin-top: auto; color: #73847a; font-size: 10px; }
.person-route-step[aria-pressed="true"] small { color: #e7f4ed; }
.person-route-progress { display: flex; align-items: center; gap: 10px; margin-top: 9px; color: #68786e; font-size: 11px; }
.person-route-progress-track { display: block; width: min(200px, 42%); height: 5px; border-radius: 999px; background: #dfebe1; overflow: hidden; }
.person-route-progress-track i { display: block; height: 100%; border-radius: 999px; background: #a98445; transition: width .25s ease; }
.route-boundary-note { margin: 11px 0 0; color: #53645c; font-size: 11px; }
.route-boundary-note strong { color: #005e58; }

/* Case map uses positioned HTML buttons over an SVG edge layer for keyboard access. */
.case-flow-viewport { margin-top: 20px; overflow-x: auto; overflow-y: hidden; direction: rtl; border: 1px solid #cbddd2; border-radius: 18px; background: #f9fcf9; scrollbar-color: #a98445 #edf3ed; scrollbar-width: thin; }
.case-flow-canvas { position: relative; width: 1650px; height: 510px; direction: ltr; background: radial-gradient(circle at 80% 35%, #edf7f0, transparent 37%), radial-gradient(circle at 14% 62%, #faf4e9, transparent 30%), #fbfdfb; }
.case-flow-canvas::before,.case-flow-canvas::after { position: absolute; right: 14px; z-index: 1; color: #729185; direction: rtl; font-size: 10px; font-weight: 700; }
.case-flow-canvas::before { content: "المسار الجزائي • من اليمين إلى اليسار"; top: 15px; }
.case-flow-canvas::after { content: "المفترقات المشروطة"; bottom: 16px; }
.case-flow-svg { position: absolute; inset: 0; width: 1650px; height: 510px; pointer-events: none; }
.case-flow-svg > path { fill: none; stroke: #86ab99; stroke-width: 2.5; marker-end: url(#caseArrow); }
.case-flow-svg > path.conditional { stroke: #b29663; stroke-dasharray: 7 6; marker-end: url(#caseArrowGold); }
.case-flow-svg > path.edge-active { stroke: #006d67; stroke-width: 4; }
.case-flow-svg > path.conditional.edge-active { stroke: #936f32; }
.case-flow-note { position: absolute; z-index: 1; left: 730px; top: 24px; padding: 5px 10px; border-radius: 8px; color: #805e29; background: #fff8e9; direction: rtl; font-size: 10px; font-weight: 700; }
.case-flow-node { position: absolute; z-index: 2; display: grid; align-content: center; gap: 7px; width: 150px; min-height: 87px; padding: 11px 12px; border: 1px solid #b9d2c2; border-radius: 14px; color: #005e58; background: #fff; direction: rtl; text-align: right; box-shadow: 0 6px 17px rgba(0, 77, 72, .08); cursor: pointer; }
.case-flow-node:hover { border-color: #006d67; transform: translateY(-2px); }
.case-flow-node[aria-pressed="true"] { border-color: #006d67; color: #fff; background: #006d67; box-shadow: 0 10px 25px rgba(0, 77, 72, .2); }
.case-flow-node.branch { border-color: #d9c49d; background: #fffaf0; }
.case-flow-node.end { border-color: #d3dacd; background: #f4f5f1; }
.case-flow-node.branch[aria-pressed="true"],.case-flow-node.end[aria-pressed="true"] { border-color: #006d67; color: #fff; background: #006d67; }
.case-flow-node .node-phase { color: #8c6a32; font-size: 10px; font-weight: 800; }
.case-flow-node[aria-pressed="true"] .node-phase { color: #f4e3c4; }
.case-flow-node strong { font-size: 12px; line-height: 1.45; }
.case-flow-node:focus-visible,.person-route-step:focus-visible { outline: 3px solid #a98445; outline-offset: 3px; }
.case-flow-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 11px; color: #5a6c62; font-size: 11px; }
.case-flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.case-flow-legend i { display: inline-block; width: 26px; border-top: 2px solid #86ab99; }
.case-flow-legend i.dashed { border-top: 2px dashed #b29663; }
.case-flow-legend b { color: #805e29; }
.case-special-wrap{margin-top:21px;padding:18px;border:1px solid #d6e4da;border-radius:16px;background:linear-gradient(115deg,#f7fbf8,#fffaf1)}
.case-special-head{display:flex;justify-content:space-between;align-items:end;gap:12px 24px;margin-bottom:14px}
.case-special-head h3{margin:3px 0 0;color:#005e58;font-size:18px}
.case-special-head p{max-width:52ch;margin:0;color:#607269;font-size:11px;line-height:1.7}
.case-special-branches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.case-special-button{display:flex;align-items:center;gap:10px;min-height:78px;padding:11px;border:1px solid #d6e2d7;border-radius:13px;color:#005e58;background:#fff;text-align:right;cursor:pointer;box-shadow:0 5px 15px rgba(0,77,72,.045);transition:transform .18s,border-color .18s,background .18s}
.case-special-button:hover{transform:translateY(-2px);border-color:#a98445;background:#fffdfa}
.case-special-button[aria-pressed="true"]{border-color:#006d67;background:#eaf5ee;box-shadow:0 0 0 2px rgba(0,109,103,.1)}
.case-special-button:focus-visible{outline:3px solid #a98445;outline-offset:3px}
.case-special-icon{display:grid;place-items:center;flex:none;width:43px;height:43px;border:2px solid #d8bf92;border-radius:50%;color:#006d67;background:#fff9ec}
.case-special-icon svg{width:23px;height:23px}
.case-special-button[aria-pressed="true"] .case-special-icon{border-color:#006d67;color:#fff;background:#006d67}
.case-special-button span:nth-child(2){display:grid;gap:4px;min-width:0}
.case-special-button small{color:#8c6a32;font-size:10px;font-weight:800}
.case-special-button strong{font-size:12px;line-height:1.4}
.case-special-button b{margin-inline-start:auto;color:#a98445;font-size:18px}
.case-graph-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(235px,.46fr); gap: 18px; margin-top: 17px; padding: clamp(17px,2.3vw,27px); border: 1px solid #c8ddd0; border-radius: 15px; background: #fff; }
.case-graph-detail h3 { margin: 4px 0 8px; color: #005e58; font-size: 20px; }
.case-graph-detail p { margin: 0 0 10px; color: #53665c; font-size: 12px; line-height: 1.8; }
.case-graph-detail .detail-owner { color: #006d67; font-weight: 700; }
.case-graph-detail .legal-point { padding: 10px 12px; border-right: 3px solid #a98445; background: #faf7ef; }
.case-graph-detail h4 { margin: 0 0 8px; color: #8c6a32; font-size: 13px; }
.case-graph-detail ul { margin: 0; padding-right: 17px; color: #50645a; font-size: 11px; line-height: 1.8; }
.case-graph-detail li { margin-bottom: 6px; }
.case-graph-detail small { display: block; color: #6e7c73; font-size: 10px; }
.case-graph-detail .graph-source-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.case-graph-detail .graph-source-list a { padding: 4px 8px; border-radius: 7px; color: #005e58; background: #e9f3ed; font-size: 10px; font-weight: 700; text-decoration: none; }
.case-graph-detail .graph-source-list a:hover { background: #dcecdf; }
.case-after-trial { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding: 14px 18px; border: 1px solid #e4d2b3; border-radius: 12px; background: #faf6ee; color: #5f604e; font-size: 12px; }
.case-after-trial strong { color: #8c6a32; }
.case-after-trial a { color: #005e58; font-weight: 700; }
.case-map-details { border: 1px solid #cbded2; border-radius: 12px; background: #fff; }
.case-map-details summary { padding: 13px 17px; color: #005e58; font-size: 13px; font-weight: 700; cursor: pointer; }
.case-map-details[open] summary { border-bottom: 1px solid #dbe8df; }
.case-map-details .case-map { padding: 15px; }
@media (max-width: 740px) {
  .case-graph-detail { grid-template-columns: 1fr; }
  .journey-drawing { margin: 15px 0 22px; }
  .person-route-step { width: 165px; }
  .case-flow-viewport { margin-inline: -7px; }
  .case-special-head{display:block}
  .case-special-head p{margin-top:6px}
  .case-special-branches{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){.case-special-branches{grid-template-columns:1fr}.case-special-button{min-height:65px}}
@media (prefers-reduced-motion: reduce) {
  .person-route-progress-track i { transition: none; }
  .case-flow-node:hover { transform: none; }
}

/* Connected-route redesign. The stops are part of a line, not a row of cards. */
.journey-hero-art{position:relative;display:block;min-height:345px;overflow:hidden;background:radial-gradient(circle at 78% 30%,#e8f5ed 0,transparent 36%),radial-gradient(circle at 24% 72%,#f9f1e3 0,transparent 39%),#fbfdfb}
.journey-hero-art svg{position:absolute;inset:13px 8px auto;width:calc(100% - 16px);height:285px;overflow:visible}
.journey-hero-art .hero-route-shadow{fill:none;stroke:#dce9df;stroke-width:18;stroke-linecap:round}
.journey-hero-art .hero-route-line{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:12 7;animation:route-dash 16s linear infinite}
.journey-hero-art circle{fill:#fff;stroke:#006d67;stroke-width:5;filter:drop-shadow(0 7px 8px rgba(0,77,72,.13))}
.journey-hero-art circle:nth-last-child(1){stroke:#a98445}
.hero-art-label{position:absolute;padding:3px 9px;color:#005e58;font-size:11px;font-weight:800;background:rgba(255,255,255,.88);border-radius:12px}
.person-hero-art .label-start,.case-hero-art .label-start{right:9%;top:16%}
.person-hero-art .label-middle,.case-hero-art .label-middle{right:47%;top:41%}
.person-hero-art .label-end{left:8%;bottom:20%}
.case-hero-art .label-end{left:8%;bottom:14%}
.hero-art-caption{position:absolute;inset:auto 0 17px;color:#8c6a32;text-align:center;font-size:12px}
@keyframes route-dash{to{stroke-dashoffset:-190}}
.journey-drawing{border-radius:21px;box-shadow:0 18px 44px rgba(0,77,72,.06)}
.journey-drawing-head h3{font-size:clamp(18px,2.2vw,25px)}
.journey-drawing-head p{max-width:68ch;line-height:1.75}
.route-control{min-width:94px;min-height:43px;padding:8px 13px;border:1px solid #9cc4ad;border-radius:12px;color:#005e58;background:#fff;font-size:12px;font-weight:800;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.route-control:hover:not(:disabled){border-color:#006d67;background:#e9f5ee;transform:translateY(-2px)}
.route-control:disabled{cursor:not-allowed;opacity:.42}
.route-control:focus-visible,.person-route-stop:focus-visible,.case-flow-node:focus-visible,.case-mobile-node:focus-visible,.graph-next-option:focus-visible{outline:3px solid #a98445;outline-offset:3px}

/* Person route: cumulative progress follows a drawn curve. */
.person-route-viewport{margin-top:18px;padding:8px 0 4px;overflow-x:auto;overflow-y:hidden}
.person-route{position:relative;display:block;min-width:0;height:290px;margin-inline:auto;direction:ltr}
.person-route svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.person-route svg path{fill:none;stroke:#c4dacc;stroke-width:7;stroke-linecap:round}
.person-route svg path.active{stroke:#158676;stroke-width:8;filter:drop-shadow(0 3px 4px rgba(0,109,103,.16))}
.person-route svg path.next{stroke:#d8c29a;stroke-dasharray:8 11}
.person-route-stop{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px;width:156px;min-height:120px;padding:0;border:0;color:#536d5f;background:transparent;text-align:center;cursor:pointer}
.person-route-stop .stop-dot{display:grid;place-items:center;flex:none;width:55px;height:55px;border:5px solid #b5d4c2;border-radius:50%;color:#006d67;background:#fff;box-shadow:0 8px 18px rgba(0,77,72,.12);font-size:13px;font-weight:800;transition:transform .24s,background .24s,border-color .24s,box-shadow .24s}
.person-route-stop .stop-text{display:grid;gap:3px;max-width:100%;padding:0 5px}
.person-route-stop strong{color:#145f56;font-size:13px;line-height:1.5}
.person-route-stop small{color:#789085;font-size:10px;line-height:1.4}
.person-route-stop:hover .stop-dot{transform:scale(1.11);border-color:#a98445}
.person-route-stop[data-state="done"] .stop-dot{border-color:#37a083;color:#fff;background:#158676}
.person-route-stop[data-state="current"] .stop-dot{transform:scale(1.18);border-color:#a98445;color:#fff;background:#006d67;box-shadow:0 0 0 8px rgba(169,132,69,.17),0 12px 24px rgba(0,77,72,.21)}
.person-route-stop[data-state="current"] strong{color:#004c48}
.person-route-controls,.case-graph-controls{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:15px}
.person-route-progress{display:flex;align-items:center;justify-content:center;gap:10px;min-width:210px;color:#526c5d;font-size:12px;font-weight:800}
.person-route-progress-track{display:block;width:95px;height:7px;border-radius:999px;background:#dce9df;overflow:hidden}
.person-route-progress-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#a98445,#006d67);transition:width .3s ease}
.person-layout{display:block;margin-top:18px}
.person-stages{display:none!important}
.person-stage-detail{min-height:0;border-color:#c5ded0;border-right:5px solid #006d67;background:linear-gradient(115deg,#fff,#fbfdfa)}
.person-stage-detail h3{color:#005e58}
.person-stage-detail .info-cell:nth-child(2){border-top:3px solid #158676}
.person-stage-detail .info-cell:nth-child(4){border-top:3px solid #a98445}

/* Case network: visible connections, circular stations and conditional branches. */
.case-flow-viewport{overflow-x:auto;overflow-y:hidden;border-radius:19px}
.case-flow-canvas{width:1660px;height:620px;background:radial-gradient(circle at 79% 34%,#eaf6ee,transparent 34%),radial-gradient(circle at 13% 68%,#fbf2e4,transparent 32%),#fbfdfb}
.case-flow-canvas::before{content:"المسار الرئيسي";top:23px;right:30px;font-size:12px}
.case-flow-canvas::after{content:"المفترقات المشروطة";bottom:23px;right:30px;font-size:11px}
.case-flow-svg{width:1660px;height:620px}
.case-flow-svg > path.lane{fill:none;stroke:#dce9df;stroke-width:18;stroke-linecap:round;marker-end:none}
.case-flow-svg > path.edge{fill:none;stroke:#61aa8b;stroke-width:4;stroke-linecap:round;marker-end:url(#caseArrow)}
.case-flow-svg > path.edge.conditional{stroke:#b49257;stroke-width:3;stroke-dasharray:8 8;marker-end:url(#caseArrowGold)}
.case-flow-svg > path.edge.edge-active{stroke:#006d67;stroke-width:6;filter:drop-shadow(0 2px 4px rgba(0,109,103,.28))}
.case-flow-svg > path.edge.conditional.edge-active{stroke:#9a742e}
.case-flow-note{top:66px;left:722px;padding:0;color:#8c6a32;background:transparent;font-size:11px}
.case-flow-node,.case-flow-node.branch,.case-flow-node.end{display:block;width:175px;height:137px;min-height:0;padding:0;border:0;border-radius:0;color:#005e58;background:transparent;text-align:center;box-shadow:none;transform:translate(-50%,-50%)}
.case-flow-node .node-dot{position:absolute;top:calc(50% - 27px);left:calc(50% - 27px);display:block;width:54px;height:54px;border:5px solid #8cbca2;border-radius:50%;background:#fff;box-shadow:0 7px 18px rgba(0,77,72,.13);transition:transform .22s,background .22s,border-color .22s,box-shadow .22s}
.case-flow-node .node-phase,.case-flow-node strong{position:absolute;left:0;display:block;width:100%;line-height:1.4}
.case-flow-node .node-phase{top:2px;color:#8c6a32;font-size:10px;font-weight:800}
.case-flow-node strong{top:21px;color:#005e58;font-size:12px}
.case-flow-node.branch .node-phase,.case-flow-node.branch strong{top:auto}
.case-flow-node.branch .node-phase{bottom:4px}
.case-flow-node.branch strong{bottom:22px}
.case-flow-node.branch .node-dot{border-color:#d4b779}
.case-flow-node:hover,.case-flow-node[aria-pressed="true"],.case-flow-node.branch[aria-pressed="true"],.case-flow-node.end[aria-pressed="true"]{border:0;color:#005e58;background:transparent;box-shadow:none;transform:translate(-50%,-50%)}
.case-flow-node:hover .node-dot{transform:scale(1.13);border-color:#a98445}
.case-flow-node[aria-pressed="true"] .node-dot{transform:scale(1.19);border-color:#a98445;background:#006d67;box-shadow:0 0 0 9px rgba(169,132,69,.2),0 11px 24px rgba(0,77,72,.25)}
.case-flow-node.branch[aria-pressed="true"] .node-dot{background:#a98445;border-color:#006d67}
.case-flow-node[aria-pressed="true"] strong,.case-flow-node.branch[aria-pressed="true"] strong{color:#004c48;font-weight:900}
.case-graph-controls #caseGraphProgress{min-width:190px;color:#506b5e;text-align:center;font-size:12px;font-weight:800}
.case-graph-detail{grid-template-columns:minmax(0,1fr) minmax(230px,.48fr);border-right:5px solid #006d67;scroll-margin-top:145px}
.case-graph-detail h3{font-size:23px}
.case-graph-detail .legal-point{padding:11px 13px}
.graph-next-option{display:block;width:100%;margin:7px 0;padding:11px 12px;border:1px solid #d3e2d7;border-radius:10px;color:#005e58;background:#f8fbf8;text-align:right;cursor:pointer}
.graph-next-option:hover{border-color:#a98445;background:#fbf6eb}
.graph-next-option strong{display:block;font-size:12px}
.graph-next-option small{margin-top:3px}
.graph-back-map{display:none}
.case-misconceptions{display:grid;gap:9px}
.case-flow-mobile{display:none}

@media(max-width:1050px){
  .graph-back-map{display:inline-flex;align-items:center;margin:0 0 13px;padding:8px 11px;border:1px solid #b8cec3;border-radius:8px;color:#005e58;background:#fff;font-size:11px;font-weight:800}
  .case-flow-viewport{overflow:visible;background:#fff}
  .case-flow-canvas{display:none}
  .case-flow-mobile{position:relative;display:grid;gap:0;padding:20px clamp(14px,3vw,34px)}
  .case-flow-mobile::before{content:"";position:absolute;top:51px;bottom:65px;right:calc(clamp(14px,3vw,34px) + 28px);width:4px;border-radius:9px;background:linear-gradient(#006d67 0 40%,#43a084 65%,#a98445 100%)}
  .case-mobile-step{position:relative;padding:0 0 16px}
  .case-mobile-node{position:relative;z-index:1;display:flex;align-items:center;gap:16px;width:100%;min-height:74px;padding:6px 0;border:0;color:#005e58;background:transparent;text-align:right;cursor:pointer}
  .case-mobile-node .node-dot{display:block;flex:none;width:58px;height:58px;border:5px solid #79b49a;border-radius:50%;background:#fff;box-shadow:0 5px 16px rgba(0,77,72,.12);transition:transform .2s,background .2s}
  .case-mobile-node .node-text{display:grid;gap:3px}
  .case-mobile-node .node-phase{color:#8c6a32;font-size:10px;font-weight:800}
  .case-mobile-node strong{color:#005e58;font-size:15px}
  .case-mobile-node[aria-pressed="true"] .node-dot{transform:scale(1.1);border-color:#a98445;background:#006d67;box-shadow:0 0 0 6px rgba(169,132,69,.16)}
  .case-mobile-branches{display:grid;gap:3px;margin:0 52px 0 0;padding:2px 24px 9px 0;border-right:2px dashed #b49257}
  .case-mobile-branches .case-mobile-node{min-height:57px}
  .case-mobile-branches .node-dot{width:37px;height:37px;border-width:4px;border-color:#d4b779}
  .case-mobile-branches .case-mobile-node::before{content:"";position:absolute;right:-24px;top:50%;width:23px;border-top:2px dashed #b49257}
  .case-mobile-branches .case-mobile-node[aria-pressed="true"] .node-dot{background:#a98445;border-color:#006d67}
  .case-mobile-branches .case-mobile-node strong{font-size:13px}
  .case-mobile-branches .case-mobile-node .node-phase{font-size:9px}
}
@media(max-width:900px){
  .person-route-viewport{overflow:visible}
  .person-route{display:grid;gap:0;width:100%!important;height:auto!important;min-height:0;direction:rtl}
  .person-route svg{display:none}
  .person-route::before{content:"";position:absolute;top:24px;bottom:28px;right:29px;width:4px;border-radius:9px;background:linear-gradient(#006d67,#43a084,#a98445)}
  .person-route-stop{position:relative!important;left:auto!important;top:auto!important;display:flex;flex-direction:row;align-items:center;gap:16px;width:100%;min-height:80px;text-align:right}
  .person-route-stop .stop-dot{width:58px;height:58px;margin:0;flex:none}
  .person-route-stop .stop-text{padding:0}
  .person-route-stop strong{font-size:15px}
  .person-route-stop small{font-size:11px}
}
@media(max-width:740px){
  .journey-drawing{margin-inline:-3px;padding:16px 13px}
  .journey-drawing-head{display:block}
  .journey-drawing-hint{display:block;margin-top:9px}
  .case-graph-detail{grid-template-columns:1fr}
  .graph-back-map{display:inline-flex;align-items:center;margin:0 0 13px;padding:8px 11px;border:1px solid #b8cec3;border-radius:8px;color:#005e58;background:#fff;font-size:11px;font-weight:800}
  .person-route-controls,.case-graph-controls{gap:6px}
  .person-route-progress{min-width:0;flex:1;font-size:10px}
  .person-route-progress-track{width:60px}
  .case-graph-controls #caseGraphProgress{min-width:0;flex:1;font-size:10px}
  .route-control{min-width:72px;min-height:44px;padding:7px 8px;font-size:10px}
  .journey-hero-art{min-height:280px}
  .journey-hero-art svg{height:240px}
}
@media(max-width:420px){
  .case-flow-mobile{padding-inline:11px}
  .case-flow-mobile::before{right:39px}
  .case-mobile-node{gap:12px}
  .case-mobile-node strong{font-size:13px}
  .case-mobile-branches{margin-right:43px;padding-right:18px}
  .case-mobile-branches .case-mobile-node::before{right:-18px;width:17px}
  .person-route-stop{gap:12px}
  .person-route-stop strong{font-size:13px}
  .journey-hero-art{min-height:260px}
}
@media(prefers-reduced-motion:reduce){
  .journey-hero-art .hero-route-line{animation:none}
  .person-route-stop .stop-dot,.case-flow-node .node-dot,.route-control,.person-route-progress-track i{transition:none}
}

/* Beneficiary lens: one grouped selector controls the route and service portfolio. */
.beneficiary-picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);align-items:center;gap:20px;margin-bottom:18px;padding:clamp(19px,2.5vw,30px);border:1px solid #bfdbd0;border-radius:20px;background:linear-gradient(115deg,#eaf5ef 0%,#f9fbf7 56%,#fffaf2 100%);box-shadow:0 12px 32px rgba(0,77,72,.055)}
.beneficiary-picker-copy .picker-eyebrow{display:block;margin-bottom:8px;color:#9d7840;font-size:11px;font-weight:800}
.beneficiary-picker-copy label{display:block;color:#005e58;font-size:clamp(20px,2.25vw,28px);font-weight:800;line-height:1.35}
.beneficiary-picker-copy p{margin:8px 0 0;max-width:46ch;color:#5e7469;font-size:12px;line-height:1.75}
#roleSelect{min-width:0;min-height:62px;padding:13px 18px;border:2px solid #70aa95;border-radius:15px;color:#004d48;background:#fff;box-shadow:0 7px 20px rgba(0,77,72,.09);font-size:16px;font-weight:800;cursor:pointer}
#roleSelect:hover{border-color:#006d67}
#roleSelect:focus-visible{outline:3px solid #a98445;outline-offset:3px}
#roleSelect optgroup{font-weight:800;color:#005e58}
#roleSelect option{font-weight:500;color:#264b43}
.role-summary{margin:0 0 24px;padding:22px clamp(20px,2.5vw,28px);border-color:#d0e1d5;border-right:5px solid #006d67;border-radius:17px;background:linear-gradient(110deg,#fff,#f5faf6)}
.role-summary-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-bottom:9px}
.role-summary h3{margin:0 0 9px;color:#005e58;font-size:clamp(21px,2.3vw,28px)}
.role-summary p{margin:6px 0;color:#516a5e;font-size:13px;line-height:1.75}
.role-relationship{display:inline-flex;align-items:center;padding:5px 10px;border:1px solid #d8c6a4;border-radius:999px;color:#8b682f;background:#fffaf1;font-size:11px;font-weight:800}
#role-services{scroll-margin-top:90px}
#role-services .studio-section-head h2{max-width:20ch}
.role-service-counts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.role-service-counts span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid #ccdfd4;border-radius:999px;color:#315f50;background:#fff;font-size:11px;font-weight:700}
.role-service-counts span:last-child{border-color:#e4d4b8;color:#785e34}
.role-service-counts strong{font-size:15px;color:#005e58}
.beneficiary-service-group+.beneficiary-service-group{margin-top:46px;padding-top:36px;border-top:1px solid #d9e6dc}
.beneficiary-service-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.beneficiary-service-heading h3{margin:0 0 5px;color:#005e58;font-size:clamp(19px,2.2vw,25px)}
.beneficiary-service-heading p{margin:0;max-width:72ch;color:#62736a;font-size:12px;line-height:1.75}
.service-group-mark{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;font-size:21px;font-weight:800}
.core-mark{color:#006d67;background:#dcefe4}.added-mark{color:#8c682e;background:#f8ebd1}
.beneficiary-service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,275px),1fr));gap:14px}
.beneficiary-service-card{min-width:0;padding:20px 21px;border:1px solid #d0dfd4;border-top:4px solid #147f70;border-radius:17px;background:#fff;box-shadow:0 7px 23px rgba(0,77,72,.045)}
.beneficiary-service-card.proposed{border-color:#e4dac8;border-top-color:#ab8649;background:#fffdfa}
.service-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.service-card-number{color:#9b854f;font-size:12px;font-weight:800}
.service-evidence-label{display:inline-flex;align-items:center;max-width:80%;padding:5px 9px;border-radius:999px;color:#00645b;background:#e6f3ed;font-size:10px;font-weight:800;line-height:1.4}
.proposed .service-evidence-label{color:#8d672e;background:#f8edd8}
.beneficiary-service-card h4{margin:0 0 9px;color:#00564f;font-size:17px;line-height:1.45}
.beneficiary-service-card p{margin:0;color:#546d60;font-size:12px;line-height:1.8}
.service-card-field{display:grid;gap:3px;margin-top:15px;padding-top:12px;border-top:1px solid #edf2ed;color:#53685d;font-size:11px;line-height:1.7}
.service-card-field strong{color:#006d67}
.beneficiary-service-card.proposed .service-card-field strong{color:#926a2f}
.beneficiary-service-card .service-card-boundary{margin-top:15px;padding:10px 11px;border-radius:9px;color:#695f50;background:#f7f5ee;font-size:11px}
.beneficiary-service-card .source-pills{margin-top:13px}
.beneficiary-service-card .source-pills a{background:#edf4ef;color:#316659}
@media(max-width:780px){.beneficiary-picker{grid-template-columns:1fr;gap:14px}.role-summary-top{align-items:flex-start}.beneficiary-service-group+.beneficiary-service-group{margin-top:34px;padding-top:27px}}
@media(max-width:420px){.beneficiary-picker{padding:18px 15px}#roleSelect{width:100%;font-size:16px}.role-summary{padding:19px 16px}.beneficiary-service-card{padding:18px 16px}.role-service-counts span{font-size:10px}}

/* Conditional routes stay visible and operable at every viewport width. */
.case-safeguards{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:14px 0;padding:12px;border:1px solid #d8e8df;border-radius:12px;background:#f5faf6}
.case-safeguards strong{flex-basis:100%;color:#00645b;font-size:12px}
.case-safeguards span{padding:5px 9px;border:1px solid #c9dfd1;border-radius:999px;color:#416657;background:#fff;font-size:10px;font-weight:700}
.case-safeguards small{display:block;flex-basis:100%;color:#677b6e;font-size:10px;line-height:1.7}
.case-graph-detail .case-direct-note{margin:11px 0;padding:10px 12px;border-right:3px dashed #b49257;border-radius:7px;color:#695a3b;background:#fff8e9;font-size:11px}
.case-graph-detail .case-direct-note strong{color:#80602e}
.case-post-route{display:block;padding:clamp(18px,2.5vw,27px);border:1px solid #d5e3d7;border-top:4px solid #b49257;border-radius:17px;background:linear-gradient(125deg,#fffdfa,#f6faf7);box-shadow:0 9px 28px rgba(0,77,72,.045);direction:rtl}
.case-post-heading h3{margin:5px 0;color:#005e58;font-size:clamp(20px,2.2vw,27px)}
.case-post-heading p{margin:0;max-width:76ch;color:#5c7065;font-size:12px;line-height:1.8}
.case-post-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px;margin-top:22px}
.case-post-stage{position:relative;min-width:0;padding:16px;border:1px solid #cbded2;border-radius:14px;background:#fff}
.case-post-stage:not(:last-child)::after{content:"←";position:absolute;top:50%;left:-22px;color:#b49257;font-size:24px;font-weight:800;transform:translateY(-50%)}
.case-post-index{display:grid;place-items:center;width:28px;height:28px;margin-bottom:8px;border-radius:50%;color:#fff;background:#006d67;font-size:11px;font-weight:800}
.case-post-stage>strong{display:block;margin-bottom:10px;color:#005e58;font-size:14px}
.case-post-options{display:grid;gap:8px}
.case-post-options a{display:flex;align-items:center;min-height:42px;padding:8px 11px;border:1px solid #d7e5da;border-right:3px solid #b49257;border-radius:8px;color:#005e58;background:#f8fbf8;font-size:11px;font-weight:800;line-height:1.5;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.case-post-options a:hover,.case-post-options a[aria-current="step"]{border-color:#9e7c41;background:#fff4dc;transform:translateY(-1px)}
.case-post-options a:focus-visible{outline:3px solid #a98445;outline-offset:2px}
.case-post-caveat{margin:17px 0 0!important;padding:12px 13px;border-right:3px solid #b49257;border-radius:6px;color:#5a695d;background:#fff;font-size:11px!important;line-height:1.8}
@media(max-width:780px){
  .case-post-stages{grid-template-columns:1fr;gap:21px}
  .case-post-stage:not(:last-child)::after{content:"↓";top:auto;bottom:-25px;left:50%;font-size:23px;transform:translateX(-50%)}
  .case-post-stage{padding:14px}
  .case-post-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:440px){.case-post-route{padding:17px 14px}.case-post-options{grid-template-columns:1fr}.case-post-options a{min-height:40px}.case-mobile-branches .case-mobile-node strong{line-height:1.6}}
@media(prefers-reduced-motion:reduce){.case-post-options a{transition:none}}