/* The existing journey shelves become a comic library. No replacement controls or JS. */
.comic-app .jd{--jd-ink:#202421;--jd-ink2:#3c4740;--jd-ink3:#535c56;--jd-line:#c7c8bc;padding-bottom:50px}
.comic-app.jd--admin .jd,.comic-app.jd--client-admin .jd{--jd-accent:#00B3EA;--jd-accent-deep:#00516c;--jd-accent-soft:#e9faff}
.comic-app .jd-hero{padding:34px 0 16px}
.comic-app .jd-hero h1{font:400 clamp(30px,4vw,46px)/1.18 var(--comic-type);letter-spacing:-.025em;max-width:850px}
.comic-app .jd-hero p{font-size:17px;line-height:1.65;max-width:720px}
.comic-app .jd-kicker{font:13px/1.5 var(--comic-type);letter-spacing:.025em;color:var(--comic-muted)}
.comic-app .jd-spine-wrap{border:2px solid var(--comic-ink);border-top:7px solid var(--jd-accent);border-radius:0;background:var(--comic-paper);box-shadow:5px 5px 0 var(--comic-ink)}
.comic-app .jd-spine-head h2{font:400 24px/1.3 var(--comic-type)}
.comic-app .jd-step__card{border:1px solid var(--comic-ink);border-radius:0;background:var(--comic-paper);box-shadow:2px 2px 0 var(--comic-ink)}
.comic-app .jd-step--active .jd-step__card{background:var(--jd-accent-soft);border-top:5px solid var(--jd-accent)}
.comic-app .jd-step__label{font:400 17px/1.35 var(--comic-type);overflow-wrap:anywhere}
.comic-app .jd-step__state{font-size:13px}
.comic-app .jd-step__meta{font-size:12px;line-height:1.5}
.comic-app .jd-step__cta{background:var(--comic-paper);border:1px solid var(--comic-ink);border-radius:0;color:var(--comic-ink);font-size:13px;line-height:1.4}
.comic-app .jd-step__node{border-color:var(--comic-ink);color:var(--comic-ink)}
.comic-app .jd-step--done .jd-step__node{background:var(--comic-teal);border-color:var(--comic-ink);color:var(--comic-ink)}
.comic-app .jd-step--locked .jd-step__card{background:#efeee6;opacity:.75;box-shadow:none}
.comic-app .jd-row{margin-top:38px;margin-bottom:40px}
.comic-app .jd-row__head{gap:12px;flex-wrap:wrap;margin-bottom:12px}
.comic-app .jd-row__head h2{font:400 27px/1.3 var(--comic-type)}
.comic-app .jd-row__head a{font-size:14px;color:#00516c;text-decoration:underline;text-underline-offset:4px}
.comic-app .jd-shelf{gap:22px;padding:14px 8px 22px;scroll-snap-type:x proximity;border-bottom:10px solid var(--comic-ink);box-shadow:0 5px 0 var(--comic-amber);scrollbar-width:thin;scrollbar-color:var(--comic-ink) var(--comic-paper);align-items:stretch}
.comic-app .jd-shelf::-webkit-scrollbar{display:block;height:6px}
.comic-app .jd-shelf::-webkit-scrollbar-thumb{background:var(--comic-ink)}
.comic-app .jd-tile{position:relative;border:2px solid var(--comic-ink);border-left-width:7px;border-radius:0;background:var(--comic-paper);box-shadow:4px 4px 0 var(--comic-ink);transition:transform .16s ease,box-shadow .16s ease;max-width:calc(100vw - 72px)}
.comic-app .jd-tile::after{content:"";position:absolute;right:0;bottom:0;width:13px;height:13px;background:linear-gradient(135deg,#e8dfc8 46%,var(--comic-ink) 49%,var(--comic-paper) 54%);pointer-events:none}
.comic-app .jd-tile__viz{background-color:var(--cover,var(--comic-blue));background-image:radial-gradient(#20242130 .75px,transparent .85px);background-size:6px 6px;border-bottom:2px solid var(--comic-ink)}
.comic-app .jd-tile__viz>svg{background:var(--comic-paper);border:1px solid var(--comic-ink);border-radius:2px;padding:4px;box-sizing:content-box;max-width:calc(100% - 24px)}
.comic-app .jd-tile:nth-child(4n+2){--cover:var(--comic-amber)}
.comic-app .jd-tile:nth-child(4n+3){--cover:var(--comic-teal)}
.comic-app .jd-tile:nth-child(4n){--cover:var(--comic-coral)}
.comic-app .jd-tile__body{padding:17px 15px 22px;border-top:0}
.comic-app .jd-tile__title{font:400 21px/1.3 var(--comic-type);overflow-wrap:anywhere}
.comic-app .jd-tile__sub{font-size:14px;line-height:1.55;margin-top:7px}
.comic-app .jd-pill{border:1px solid var(--comic-ink);border-radius:2px;font-size:11px;letter-spacing:.02em;color:var(--comic-ink)}
.comic-app .jd-pill--green{background:var(--comic-teal)}
.comic-app .jd-pill--amber{background:var(--comic-amber)}
.comic-app .jd-pill--muted{background:#efeee6;color:var(--comic-muted)}
.comic-app .jd-avatar{background:var(--comic-paper);border:2px solid var(--comic-ink);color:var(--comic-ink);box-shadow:3px 3px 0 var(--comic-ink)}
.comic-app .jd-avatar--muted{background:#efeee6;color:var(--comic-muted)}
.comic-app .jd-arrow{background:var(--comic-paper);color:var(--comic-ink);border:2px solid var(--comic-ink);border-radius:0;box-shadow:3px 3px 0 var(--comic-ink)}
.comic-app .jd-arrow:hover{background:var(--comic-amber)}
.comic-app .jd-tile--new{border:2px dashed var(--comic-ink);background:var(--comic-paper);padding:18px}
.comic-app :is(.jd-ca-metric,.coach-metric,.hd-meter){border:1px solid var(--comic-ink);border-top:5px solid var(--comic-blue);border-radius:0;background:var(--comic-paper);box-shadow:3px 3px 0 var(--comic-ink)}
.comic-app :is(.jd-ca-metric,.coach-metric,.hd-meter):nth-child(2){border-top-color:var(--comic-amber)}
.comic-app :is(.jd-ca-metric,.coach-metric,.hd-meter):nth-child(3){border-top-color:var(--comic-teal)}
.comic-app :is(.coach-welcome,.hd-header h1){font:400 clamp(28px,4vw,40px)/1.25 var(--comic-type)}
.comic-app :is(.coach-section-head,.hd-section-label){font:400 20px/1.4 var(--comic-type);color:var(--comic-ink)}
.comic-app :is(.coach-sub,.coach-mymap-text){font-size:15px;line-height:1.6}
.comic-app :is(.coach-people,.coach-mymap,.coach-mymap-none,.hd-agent-card){border:1px solid var(--comic-ink);border-radius:0;box-shadow:3px 3px 0 var(--comic-ink)}
.comic-app :is(.coach-mymap,.coach-mymap-none){background:#fff5dd;color:var(--comic-ink);flex-wrap:wrap}
.comic-app :is(.coach-mymap-btn,.hd-btn--primary){border:1px solid var(--comic-ink);border-radius:0;background:var(--comic-amber);color:var(--comic-ink)}
@media(hover:hover) and (pointer:fine){.comic-app .jd-tile:hover{transform:translateY(-5px);box-shadow:5px 7px 0 var(--comic-ink);border-color:var(--comic-ink)}}
.comic-app .jd :is(.jd-tile,.jd-step__card,.jd-arrow,.jd-row__head a):focus-visible{outline:3px solid #00516c;outline-offset:4px}
@media(max-width:720px){.comic-app .jd{padding-right:20px}.comic-app .jd-hero{padding-top:24px}.comic-app .jd-hero p{font-size:16px}.comic-app .jd-row__head h2{font-size:24px}.comic-app .jd-shelf{gap:18px}.comic-app .jd-spine-wrap{padding:18px 14px}.comic-app .jd-tile__title{font-size:19px}}
@media(prefers-reduced-motion:reduce){.comic-app .jd :is(.jd-tile,.jd-step__card){transition:none}.comic-app .jd :is(.jd-tile,.jd-step__card):hover,.comic-app .jd :is(.jd-tile,.jd-step__card):focus-visible{transform:none}.comic-app .jd-shelf{scroll-behavior:auto}}