/* Disposable plan → finish → story screens; no persistence or external actions. */
.j-library { display: none !important; }
#journey-plan-root,#journey-record-root { --j-soft: var(--muted); }
.j-page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.j-page-head h1 { margin:8px 0 0; font-size:32px; letter-spacing:-1.3px; line-height:1.25; }
.j-page-description { margin:12px 0 20px; color:var(--muted); font-size:14px; line-height:1.7; }
.j-add { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--text); }
:is(#journey-plan-root,#journey-record-root,#plan-journey,.j-personal-records) svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.j-preview-line { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; font-size:10px; color:var(--muted); }
.j-preview-line > span { padding:4px 8px; border-radius:6px; background:var(--surface); }
.j-preview-line button,.j-text-button { display:inline-flex; align-items:center; gap:4px; padding:4px 0; border:0; background:transparent; color:var(--accent); font-size:12px; }
.j-preview-line svg { width:12px!important; height:12px!important; }
.j-scenarios { margin:0 0 20px; color:var(--muted); font-size:11px; }
.j-scenarios summary { cursor:pointer; width:fit-content; }
.j-scenarios > div { display:flex; gap:7px; margin-top:12px; }
.j-scenarios button,.j-date-options button,.j-atlas-filters button,.j-photo-options button { min-height:36px; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:8px 12px; color:var(--muted); font-size:12px; }
:is(.j-scenarios,.j-date-options,.j-atlas-filters,.j-photo-options) button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--bg)); }
.j-next-plan { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.j-next-image { position:relative; isolation:isolate; min-height:260px; display:flex; align-items:flex-end; padding:24px; color:#fff; background:#061a25; }
.j-next-image > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.j-next-image::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#00141e35,#00141e05 30%,#00101ed9); z-index:-1; }
.j-next-image > span { position:absolute; top:20px; left:22px; padding:6px 10px; border:1px solid #ffffff45; background:#061a2550; border-radius:8px; font-size:11px; }
.j-next-image small { font-size:10px; letter-spacing:3px; color:#aaf3f1; }
.j-next-image h2 { font-size:30px; letter-spacing:-1.3px; margin:8px 0; line-height:1.3; color:#fff; }
.j-next-image p { font-size:14px; color:#e6eff3; }
.j-next-copy { padding:20px; }
.j-goal-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.j-goal-pills > span { border:1px solid var(--line); background:var(--bg); color:var(--muted); border-radius:8px; padding:7px 10px; font-size:12px; }
.j-primary,.j-secondary { display:flex; justify-content:center; align-items:center; gap:8px; min-height:48px; padding:12px 16px; border-radius:13px; font-size:14px; font-weight:650; line-height:1.4; }
.j-primary { width:100%; border:1px solid transparent; background:var(--action-bg); color:#fff; }
.j-primary:disabled { opacity:1; background:var(--disabled-bg); color:var(--disabled-text); cursor:not-allowed; }
.j-secondary { border:1px solid var(--line); background:var(--surface); color:var(--text); }
.j-subtle { display:flex; justify-content:center; align-items:center; gap:4px; width:100%; border:0; background:transparent; color:var(--muted); font-size:12px; padding:14px 4px 2px; line-height:1.7; }
.j-subtle svg { width:14px!important; height:14px!important; }
.j-shortcuts { display:grid; gap:10px; margin-top:22px; }
.j-shortcuts > button { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:17px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); text-align:left; }
.j-shortcuts > button > span { display:grid; grid-template-columns:26px minmax(0,1fr); gap:5px 9px; }
.j-shortcuts span > svg { grid-row:span 2; color:var(--accent); align-self:center; }
.j-shortcuts strong { font-size:14px; }
.j-shortcuts small { font-size:11px; color:var(--muted); }
.j-shortcuts > button > svg { width:16px!important; height:16px!important; color:var(--muted); }
.j-simple-route { margin-top:32px; padding:22px 0; border-top:1px solid var(--line); }
.j-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.j-section-heading h2 { margin:0; font-size:20px; letter-spacing:-.7px; }
.j-section-heading p { font-size:12px; line-height:1.7; color:var(--muted); margin-top:5px; }
.j-simple-route ol { display:flex; gap:18px; margin:0 0 18px; padding:0; list-style:none; }
.j-simple-route li { display:grid; gap:8px; font-size:12px; color:var(--muted); }
.j-simple-route b { color:var(--accent); font-size:11px; }
.j-empty-plan { text-align:center; padding:42px 22px; border:1px solid var(--line); background:var(--surface); border-radius:24px; }
.j-empty-plan > div { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 24px; color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border-radius:20px; }
.j-empty-plan h2 { font-size:24px; letter-spacing:-1px; }
.j-empty-plan p { margin:12px 0 28px; font-size:13px; color:var(--muted); }
.j-log-intro { border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--surface); }
.j-log-art { height:180px; position:relative; }
.j-log-art > img { width:100%; height:100%; object-fit:cover; }
.j-log-art > svg { position:absolute; bottom:16px; right:18px; padding:12px; width:48px!important; height:48px!important; box-sizing:content-box; border:1px solid #ffffff50; border-radius:18px; color:#fff; background:#061a2570; backdrop-filter:blur(8px); }
.j-log-intro > div:last-child { padding:24px; }
.j-log-intro span { color:var(--accent); font-size:9px; letter-spacing:2px; }
.j-log-intro h2 { margin:12px 0; font-size:27px; line-height:1.4; letter-spacing:-1px; }
.j-log-intro p { margin-bottom:24px; color:var(--muted); font-size:13px; line-height:1.7; }
.j-completed-preview { border:1px solid var(--line); border-radius:24px; background:var(--surface); padding:22px; }
.j-completed-card { display:block; max-width:290px; width:100%; margin:20px auto; padding:0; border:0; border-radius:18px; background:transparent; text-align:left; }
.j-completed-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.j-personal-records { margin-top:30px; border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:18px; }
.j-personal-records > summary { display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; list-style:none; }
.j-personal-records > summary::-webkit-details-marker { display:none; }
.j-personal-records summary > span { display:grid; gap:5px; }
.j-personal-records summary strong { font-size:15px; }
.j-personal-records summary small { color:var(--muted); font-size:11px; }
.j-personal-records summary > b { color:var(--accent); font-size:12px; }
.j-personal-records .lb { margin-top:26px; }
body.journey-open { overflow:hidden; }
dialog#plan-journey { position:fixed; inset:var(--j-top,0px) 0 auto; width:100%; height:var(--j-height,100dvh); max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:visible; background:transparent; color:var(--text); box-shadow:none; }
#plan-journey::backdrop { background:#020b1390; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
#plan-journey > .bottom-nav { position:absolute; }
.j-panel { position:absolute; inset:max(12px,env(safe-area-inset-top)) 12px 88px; max-width:680px; margin-inline:auto; display:flex; flex-direction:column; min-height:0; border:1px solid var(--line); border-radius:26px; background:var(--bg); overflow:hidden; box-shadow:0 20px 70px #0004; }
.j-dialog-header { display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding:16px; flex-shrink:0; }
.j-dialog-header > div { flex:1; min-width:0; }
.j-dialog-header h2 { margin:0; font-size:16px; line-height:1.4; letter-spacing:-.4px; }
.j-dialog-header span { color:var(--muted); font-size:9px; }
.j-dialog-header .icon-button { width:36px; height:36px; }
.j-back { display:grid; place-items:center; border:0; background:transparent; color:var(--text); width:28px; height:36px; padding:0; }
.j-back svg { transform:rotate(180deg); width:17px!important; height:17px!important; }
.j-back:disabled { visibility:hidden; }
.j-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:22px 20px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.j-footer { display:grid; grid-template-columns:90px minmax(0,1fr); gap:10px; border-top:1px solid var(--line); padding:14px 16px; flex-shrink:0; }
.j-footer .j-primary,.j-footer .j-secondary { min-height:46px; font-size:13px; padding:10px; }
.j-footer svg { width:17px!important; height:17px!important; }
.j-step-heading { margin-bottom:24px; }
.j-step-heading > span { color:var(--accent); font-size:10px; letter-spacing:1px; }
.j-step-heading h2 { font-size:25px; letter-spacing:-1px; line-height:1.4; margin:10px 0 8px; word-break:keep-all; }
.j-step-heading p { color:var(--muted); font-size:12px; line-height:1.8; word-break:keep-all; }
.j-center { text-align:center; }
.j-field { display:block; border:0; margin:0 0 24px; padding:0; font-size:14px; font-weight:600; }
.j-field legend { margin-bottom:12px; }
.j-field small { color:var(--muted); font-size:10px; font-weight:400; margin-left:8px; }
.j-sport-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.j-sport-options button { display:grid; gap:0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); }
.j-sport-options img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.j-sport-options strong { font-size:13px; padding:12px 3px; }
.j-sport-options button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
.j-place-label select { display:block; width:100%; margin-top:12px; min-height:48px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font-size:14px; }
.j-date-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.j-goal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.j-goal-toolbar > strong { font-size:13px; }
.j-goal-toolbar span { color:var(--accent); }
.j-selection-note,.j-form-status { color:var(--muted); font-size:11px; margin:12px 0 16px; line-height:1.6; }
.j-goal-list { display:grid; gap:10px; }
.j-goal-list button { display:flex; gap:12px; align-items:center; padding:13px; width:100%; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); text-align:left; }
.j-goal-list button[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.j-goal-list img { width:44px; height:44px; flex-shrink:0; }
.j-goal-list button > span { display:grid; gap:5px; flex:1; min-width:0; }
.j-goal-list small { font-size:10px; color:var(--muted); }
.j-goal-list strong { font-size:14px; line-height:1.5; word-break:keep-all; }
.j-goal-list i { font-style:normal; color:var(--accent); font-size:17px; flex-shrink:0; }
.j-detail-hero { position:relative; margin:-22px -20px 20px; height:200px; }
.j-detail-hero > img { width:100%; height:100%; object-fit:cover; }
.j-detail-hero > span { position:absolute; bottom:16px; left:20px; font-size:11px; color:#fff; letter-spacing:2px; }
.j-detail-title small { color:var(--accent); font-size:11px; }
.j-detail-title h2 { font-size:26px; line-height:1.4; margin:8px 0; letter-spacing:-.9px; }
.j-detail-title p { font-size:13px; color:var(--muted); }
.j-detail-goals { margin-top:28px; }
.j-detail-goals > div:not(.j-section-heading) { display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.j-detail-goals img { width:40px; height:40px; }
.j-detail-goals span { display:grid; gap:4px; }
.j-detail-goals strong { font-size:14px; }
.j-detail-goals small,.j-muted { font-size:11px; color:var(--muted); line-height:1.7; }
.j-wide-link { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 0; width:100%; border:0; border-top:1px solid var(--line); background:transparent; color:var(--text); font-size:13px; text-align:left; margin-top:8px; }
.j-wide-link svg { width:17px!important; height:17px!important; }
.j-compact-facts { display:flex; gap:12px; align-items:center; border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:12px; margin-bottom:22px; }
.j-compact-facts img { width:64px; height:64px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.j-compact-facts strong { font-size:15px; }
.j-compact-facts p { font-size:12px; margin-top:7px; color:var(--muted); }
.j-confirm-goals { justify-content:center; }
.j-preview-poster { display:block; width:min(100%,220px); margin:24px auto 0; padding:0; border:0; background:transparent; color:var(--muted); text-align:left; }
.j-preview-poster > span { display:flex; justify-content:center; align-items:center; gap:4px; padding:12px; font-size:11px; }
.j-results fieldset { border:0; padding:20px 0; border-bottom:1px solid var(--line); }
.j-results legend { font-size:15px; font-weight:600; padding:0; }
.j-results fieldset > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.j-results button { margin-top:14px; padding:13px 7px; min-height:46px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--muted); font-size:13px; }
.j-results button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--bg)); }
.j-no-goal-note { padding:20px; border-radius:14px; background:var(--surface); color:var(--muted); font-size:13px; line-height:1.9; margin:20px 0; }
.j-optional { margin-top:22px; font-size:12px; }
.j-optional summary { cursor:pointer; }
.j-optional summary span { color:var(--muted); margin-left:10px; font-size:10px; }
.j-optional p { margin-top:12px; color:var(--muted); line-height:1.8; }
.j-photo-options { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:16px; }
.j-photo-options button { font-size:11px; }
.j-card-caption { display:grid; text-align:center; gap:6px; margin:0 0 18px; }
.j-card-caption span { color:var(--accent); font-size:11px; }
.j-card-caption strong { font-size:19px; letter-spacing:-.6px; line-height:1.5; }
.j-share-card-wrap { width:min(100%,280px); margin:auto; }
.j-preview-footnote { font-size:10px; line-height:1.6; color:var(--muted); margin-top:12px; text-align:center; }
.j-story { position:relative; isolation:isolate; width:100%; aspect-ratio:9/16; overflow:hidden; border:1px solid #ffffff40; border-radius:17px; background:#06141e; color:#fff; container-type:inline-size; text-align:left; }
.j-story-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% center; z-index:-3; }
.j-story-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,#001522b0,#00152215 34%,#00152210 45%,#03121be8 79%,#03121b); }
.j-story-inner { display:flex; flex-direction:column; height:100%; padding:9% 8% 10%; }
.j-story-inner > header { display:flex; gap:7px; align-items:center; }
.j-story-inner header > img { width:12%; height:auto; }
.j-story-inner header > span { font-size:clamp(8px,3.2cqw,12px); font-weight:750; letter-spacing:1px; }
.j-story-inner header small { display:block; font-size:clamp(4px,1.3cqw,5px); letter-spacing:1px; margin-top:4px; }
.j-story-inner header > b { margin-left:auto; font-size:clamp(5px,1.8cqw,7px); font-weight:500; color:#c9e7e8; writing-mode:vertical-rl; }
.j-story-title { margin-top:14%; }
.j-story-title p { color:#99eeeb; font-size:clamp(6px,2.1cqw,8px); letter-spacing:1.5px; margin-bottom:9px; }
.j-story .j-story-title h3 { font-size:clamp(23px,10cqw,35px); line-height:1.17; letter-spacing:-1px; margin:0; font-weight:800; color:#fff; }
.j-story-title > span { display:block; font-size:clamp(8px,3cqw,12px); color:#e7f5f6; margin-top:10px; }
.j-story-number { margin-top:auto; display:grid; gap:7px; padding-top:16%; }
.j-story-number > strong { font-family:Impact,'Arial Narrow',sans-serif; font-size:clamp(76px,36cqw,136px); letter-spacing:-.055em; font-style:italic; line-height:.95; font-weight:400; }
.j-story-plan .j-story-number > strong { color:#64e6e3; }
.j-story-number > span { font-size:clamp(5px,1.9cqw,8px); letter-spacing:2px; color:#c5e8e8; }
.j-story-inner > footer { margin-top:10%; }
.j-story-date { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.j-story-date b { font-size:clamp(13px,5.7cqw,22px); letter-spacing:-.5px; }
.j-story-date > span { font-size:clamp(7px,2.4cqw,9px); color:#c2dfe2; }
.j-story-goals,.j-story-retry { font-size:clamp(7px,2.7cqw,10px); line-height:1.6; margin-top:12px; color:#d3e7e9; }
.j-story-meta { display:flex; justify-content:space-between; gap:10px; border-top:1px solid #ffffff40; padding-top:9px; margin-top:14px; color:#b8d1d5; font-size:clamp(5px,1.8cqw,7px); }
.j-story-medal { position:absolute; top:41%; right:7%; width:28%; height:auto; transform:rotate(6deg); filter:drop-shadow(0 5px 10px #0005); }
.j-story-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
.j-story-metrics > div > span { display:block; font-size:clamp(6px,2.3cqw,9px); margin-bottom:6px; color:#b8d1d5; }
.j-story-metrics strong { font-size:clamp(25px,11cqw,40px); font-style:italic; font-weight:800; letter-spacing:-1px; line-height:1; }
.j-story-metrics strong small { font-size:clamp(8px,3.2cqw,12px); font-weight:400; margin-left:4px; letter-spacing:0; }
.j-story-metrics > div:last-child { text-align:right; }
.j-story-metrics > div > b { display:block; font-size:clamp(9px,3.5cqw,13px); line-height:1.5; word-break:keep-all; }
.j-instagram-frame { width:min(100%,240px); margin:0 auto; padding:9px; background:#000; border:1px solid #ffffff30; border-radius:22px; color:#fff; }
.j-story-preview-label { display:flex; align-items:center; gap:7px; padding:2px 3px 10px; font-size:10px; }
.j-story-preview-label > span:last-child { margin-left:auto; color:#aaa; font-size:8px; }
.j-avatar { display:grid; place-items:center; background:#16414d; color:#68e0df; border:1px solid #60dbda; border-radius:50%; width:24px; height:24px; font-size:11px; }
.j-instagram-frame .j-story { border-radius:12px; }
.j-instagram-post { display:block; padding:13px 0 2px; text-align:center; color:#ccc; font-size:9px; }
.j-share-explanation { margin:22px auto 0; max-width:400px; text-align:center; }
.j-share-explanation strong { font-size:12px; }
.j-share-explanation p { font-size:11px; color:var(--muted); line-height:1.8; margin-top:7px; }
.j-atlas-filters { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 20px; }
.j-atlas-filters button { font-size:11px; padding:7px 10px; }
.j-atlas-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.j-atlas-grid > button { min-width:0; padding:0; border:0; background:transparent; text-align:left; border-radius:16px; }
.j-atlas-grid .ac-card { width:100%; margin:0; }
.j-specimen { max-width:340px; margin:10px auto; }
.j-specimen .ac-card { width:100%; }
.j-specimen > p { margin:20px 0; font-size:12px; color:var(--muted); text-align:center; line-height:1.8; }
.j-automation { margin:0; }
.j-automation > div { padding:20px 0; border-bottom:1px solid var(--line); }
.j-automation dt { color:var(--accent); font-size:13px; font-weight:700; margin-bottom:9px; }
.j-automation dd { margin:0; color:var(--muted); font-size:13px; line-height:1.9; }
@media (min-width:600px) { .j-shortcuts { grid-template-columns:1fr 1fr; } .j-next-image { min-height:300px; } .j-next-image h2 { font-size:34px; } .j-scroll { padding:26px 30px; } .j-detail-hero { margin:-26px -30px 24px; } .j-atlas-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .j-share-card-wrap { width:300px; } }
@media (min-width:960px) { .j-panel { top:50%; bottom:auto; transform:translateY(-50%); height:min(850px,calc(var(--j-height,100dvh) - 40px)); } .j-next-plan { display:grid; grid-template-columns:1.2fr 1fr; } .j-next-image { min-height:320px; } .j-next-copy { align-self:center; padding:26px; } .j-log-intro { display:grid; grid-template-columns:1fr 1fr; } .j-log-art { height:100%; min-height:320px; } }
@media (max-width:359px) { .j-page-head h1 { font-size:28px; } .j-next-image { min-height:220px; padding:20px; } .j-next-image h2 { font-size:26px; } .j-next-copy { padding:16px; } .j-scroll { padding:20px 14px; } .j-detail-hero { margin:-20px -14px 20px; } .j-step-heading h2 { font-size:23px; } .j-footer { grid-template-columns:74px minmax(0,1fr); padding:12px; gap:8px; } .j-footer .j-primary,.j-footer .j-secondary { font-size:12px; } .j-sport-options { gap:7px; } .j-date-options button { padding-inline:6px; font-size:11px; } .j-goal-list img { width:36px; height:36px; } .j-goal-list strong { font-size:13px; } .j-completed-actions { grid-template-columns:1fr; } }
@media (max-height:540px) { .j-panel { top:8px; } .j-dialog-header { padding:9px 12px; } .j-scroll { padding-top:16px; } .j-footer { padding:9px 12px; } .j-step-heading { margin-bottom:18px; } }
@media (min-width:960px) and (max-height:540px) { .j-panel { top:12px; bottom:12px; height:auto; transform:none; } }
/* Recommendation-first journey: one primary action, one shared collection. */
.jr-sports { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.jr-sports button,.jr-results button { min-height:44px; padding:10px 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font:inherit; font-size:13px; }
:is(.jr-sports,.jr-results) button[aria-pressed=true] { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.jr-mission { padding:24px; border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.jr-mission.is-active { border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); }
.jr-mission-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.jr-mission-top > span { font-size:12px; color:var(--accent); }
.jr-mission-top small { font-size:11px; color:var(--muted); }
.jr-mission-copy { display:flex; gap:20px; align-items:center; padding:28px 0 22px; }
.jr-mission-copy > div { flex:1; min-width:0; }
.jr-mission-copy h2 { font-size:clamp(23px,4vw,29px); line-height:1.35; letter-spacing:-1px; margin:0 0 10px; word-break:keep-all; }
.jr-mission-copy p { margin:0; font-size:13px; line-height:1.8; color:var(--muted); word-break:keep-all; }
.jr-mission-copy > img { width:100px; height:100px; object-fit:contain; flex:none; filter:drop-shadow(0 8px 12px #0003); }
.jr-reward-strip { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted); padding:14px 0; margin-bottom:14px; border-top:1px solid var(--line); }
.jr-reward-strip strong { color:var(--text); font-weight:600; }
.jr-steps { display:flex; justify-content:center; align-items:center; gap:10px; padding:18px 0 28px; color:var(--muted); font-size:11px; }
.jr-steps span { display:flex; align-items:center; gap:5px; }
.jr-steps b { color:var(--accent); font-size:10px; }
.jr-steps i { font-style:normal; }
.jr-lessons { margin-top:12px; }
.jr-empty { padding:24px 20px; border:1px dashed var(--line); border-radius:18px; background:var(--surface); }
.jr-empty strong { font-size:15px; }
.jr-empty p { color:var(--muted); font-size:12px; line-height:1.8; margin:9px 0 0; }
.jr-empty .j-primary { margin-top:20px; }
.jr-lesson { display:flex; width:100%; justify-content:space-between; align-items:center; gap:16px; margin:12px 0; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); text-align:left; }
.jr-lesson > span { display:grid; gap:8px; }
.jr-lesson small { color:var(--accent); font-size:11px; }
.jr-lesson strong { font-size:15px; line-height:1.6; }
.jr-lesson span > span { color:var(--muted); font-size:12px; line-height:1.8; }
.jr-lesson > b { display:flex; align-items:center; flex:none; font-size:11px; color:var(--accent); }
.jr-note { font-size:11px; line-height:1.8; color:var(--muted); margin:16px 0; word-break:keep-all; }
.jr-results { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:20px 0; }
.jr-results button { padding-inline:8px; }
.jr-photo-picker { padding:18px; border:1px dashed var(--line); border-radius:18px; background:var(--surface); margin:24px 0 12px; }
.jr-photo-picker label { display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; }
.jr-photo-picker label > svg { width:32px!important; height:32px!important; color:var(--accent); }
.jr-photo-picker img { width:100%; max-height:180px; object-fit:cover; border-radius:12px; }
.jr-photo-picker strong { font-size:14px; }
.jr-photo-picker small,.jr-photo-picker p { font-size:11px; line-height:1.6; color:var(--muted); }
.jr-photo-picker input { display:block; width:100%; margin-top:16px; color:var(--muted); font:inherit; font-size:11px; }
.jr-photo-picker p { margin:12px 0 0; text-align:center; }
.jr-optional { margin:20px 0; font-size:12px; }
.jr-optional summary { min-height:44px; padding-block:12px; cursor:pointer; color:var(--muted); }
.jr-optional label { display:grid; gap:8px; margin-top:12px; }
.jr-optional :is(input,select),#journey-date { width:100%; min-height:44px; padding:10px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--surface); font:inherit; font-size:16px; }
.jr-story { background:linear-gradient(145deg,#075065,#031522 70%); }
.jr-story.no-photo::before { content:''; position:absolute; width:130%; height:60%; top:28%; left:-15%; border-radius:50%; border:1px solid #45d9dc55; transform:rotate(-35deg); background:linear-gradient(180deg,#14d7da1a,transparent); z-index:-2; }
.jr-story .j-story-shade { background:linear-gradient(180deg,#00152265,transparent 40%,#00152222 55%,#00121bf2); }
.jr-inner { display:flex; flex-direction:column; height:100%; position:absolute; inset:0; padding:9% 8%; }
.jr-inner header { display:flex; align-items:center; gap:7px; }
.jr-inner header > img { width:14%; height:auto; }
.jr-inner header > span { font-size:3cqw; letter-spacing:1.7px; font-weight:600; }
.jr-inner header small { margin-left:auto; font-size:1.8cqw; color:#d6f1f2; }
.jr-title { margin-top:18%; }
.jr-title > span { font-size:2.5cqw; letter-spacing:1px; color:#b7ffff; }
.jr-story .jr-title h3 { font-size:11.5cqw; line-height:1.2; letter-spacing:-.5px; margin:10px 0; color:#fff; text-shadow:0 2px 12px #0005; }
.jr-medal { position:absolute; right:7%; bottom:30%; width:28%; height:auto; transform:rotate(6deg); filter:drop-shadow(0 7px 12px #0004); }
.jr-inner footer { margin-top:auto; padding-top:12px; }
.jr-inner footer > span { display:block; color:#a3f4f2; font-size:3cqw; margin-bottom:8px; }
.jr-inner footer strong { display:block; font-size:5.3cqw; line-height:1.4; letter-spacing:-.3px; word-break:keep-all; }
.jr-inner footer p { color:#d2e7ed; font-size:3cqw; line-height:1.5; margin:8px 0 0; }
.jr-inner footer > small { display:block; color:#aecbd3; font-size:2.2cqw; margin-top:16px; border-top:1px solid #ffffff40; padding-top:8px; }
.jr-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.jr-card-grid > button { display:block; width:100%; min-width:0; border:0; padding:0; background:transparent; color:var(--muted); text-align:left; }
.jr-card-grid > button > span { display:block; margin-top:10px; font-size:11px; line-height:1.6; }
.jr-active-link { width:100%; padding:16px; display:grid; gap:8px; margin:0 0 20px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:var(--surface); text-align:left; }
.jr-active-link span { font-size:11px; color:var(--muted); }
.jr-active-link strong { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--accent); }
.jr-share-options { display:grid; gap:10px; margin:22px 0 0; }
.jr-my-summary { padding:20px; margin:0 0 26px; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.jr-my-summary > div > span { color:var(--accent); font-size:11px; }
.jr-my-summary h2 { font-size:20px; line-height:1.4; margin:10px 0 8px; }
.jr-my-summary p { color:var(--muted); font-size:12px; line-height:1.7; margin:0 0 16px; }
.jr-my-summary button { width:100%; display:flex; align-items:center; gap:7px; justify-content:space-between; background:transparent; color:var(--text); border:0; border-top:1px solid var(--line); min-height:48px; padding:12px 0 0; margin-top:10px; font-size:13px; text-align:left; }
.jr-my-summary strong { margin-left:auto; color:var(--accent); }
.mp-reward-link { display:flex; justify-content:center; align-items:center; gap:6px; width:100%; min-height:44px; border:0; background:transparent; color:var(--accent); font:inherit; font-size:12px; margin-bottom:12px; }
@media(min-width:960px) { .jr-mission { padding:30px; } .jr-mission-copy { padding-block:32px; } .jr-mission-copy > img { width:130px; height:130px; } .jr-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:359px) { .jr-mission { padding:18px; } .jr-mission-copy { gap:12px; } .jr-mission-copy > img { width:76px; height:76px; } .jr-steps { gap:5px; font-size:10px; } .jr-card-grid { gap:10px; } }
.jr-card-item { min-width:0; }
.jr-card-item > button:first-child { width:100%; padding:0; border:0; background:transparent; color:var(--muted); text-align:left; }
.jr-card-item > button > span { display:block; margin-top:10px; font-size:11px; line-height:1.6; }
.jr-showcase-toggle { display:block; width:100%; min-height:44px; margin-top:12px; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--accent); font:inherit; font-size:12px; }
.jr-showcase-toggle[aria-pressed=true] { border-color:var(--accent); }
.jr-collection-next { display:flex; justify-content:flex-end; margin:-6px 0 16px; }
.jr-showcase-list { display:grid; gap:12px; }
.jr-showcase-list article { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.jr-order { color:var(--accent); font-size:12px; }
.jr-thumb { display:grid; place-items:center; width:44px; height:60px; background:var(--bg); border-radius:6px; overflow:hidden; flex:none; color:var(--accent); }
.jr-thumb img { width:100%; height:100%; object-fit:cover; }
.jr-showcase-list article > div:not(.jr-order-actions) { flex:1; min-width:0; }
.jr-showcase-list strong { display:block; font-size:13px; line-height:1.5; }
.jr-showcase-list small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.jr-order-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:96px; }
.jr-order-actions button { min-width:40px; min-height:40px; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--text); }
.jr-order-actions button:disabled { opacity:.3; }
#carousel .entry-owned::after { display:none; }
#carousel .entry-owned > .jr-story { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:inherit; aspect-ratio:auto; }
#carousel .entry-owned .memory-copy { position:absolute; inset:8%; display:flex; width:auto; height:auto; }
@media(max-width:959px) { #carousel .entry-owned .memory-copy { top:clamp(92px,22%,120px); } }
.jr-order-actions { max-width:96px; }
.jr-order-actions button { min-width:44px; min-height:44px; }
.jr-showcase-toggle { font-weight:600; }
/* ADR 0094: see the options and earning rule before adding a challenge. */
.jr-plan-layout { display:grid; gap:24px; margin-top:24px; align-items:start; }
.jr-picked { padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); scroll-margin-top:120px; }
.jr-picked .j-section-heading { margin-bottom:10px; }
:is(.jr-picked,.jr-picker) .j-section-heading h2 { font-size:18px; }
:is(.jr-picked,.jr-picker) .j-section-heading > span { font-size:11px; color:var(--muted); }
.jr-pick-empty strong { font-size:13px; font-weight:500; }
.jr-pick-empty p { font-size:11px; line-height:1.7; color:var(--muted); margin:7px 0 0; }
.jr-picked-task { padding-top:16px; margin-top:14px; border-top:1px solid var(--line); }
.jr-picked-task > div { display:flex; align-items:center; gap:10px; }
.jr-picked-task > div > img { width:44px; height:44px; object-fit:contain; }
.jr-picked-task > div > span { flex:1; min-width:0; }
.jr-picked-task small { display:block; font-size:10px; color:var(--accent); }
.jr-picked-task strong { display:block; font-size:14px; line-height:1.5; margin-top:4px; }
.jr-picked-task p { color:var(--muted); font-size:11px; line-height:1.8; margin:12px 0; }
.jr-picked-task .j-primary { min-height:44px; font-size:12px; padding:10px; }
.jr-remove-task { width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--muted); display:grid; place-items:center; flex:none; }
.jr-picker { min-width:0; }
.jr-picker-sports { margin:0 0 12px; flex-wrap:wrap; gap:6px; }
.jr-picker-sports button { padding:10px 13px; font-size:12px; }
.jr-categories { display:flex; gap:7px; overflow-x:auto; margin:0 -2px 16px; padding:2px 2px 6px; scrollbar-width:thin; }
.jr-categories button { min-height:44px; padding:8px 12px; flex:none; border:1px solid var(--line); border-radius:20px; background:transparent; color:var(--muted); font:inherit; font-size:11px; }
.jr-categories button[aria-pressed=true] { background:var(--surface); color:var(--accent); border-color:var(--accent); }
.jr-quick-recommend { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; margin-bottom:16px; background:color-mix(in srgb,var(--accent) 7%,var(--surface)); border:1px solid var(--line); border-radius:13px; }
.jr-quick-recommend small { display:block; color:var(--muted); font-size:10px; }
.jr-quick-recommend strong { display:block; font-size:13px; margin-top:5px; }
.jr-quick-recommend button { min-height:44px; padding:10px 12px; border:0; border-radius:10px; background:var(--action-bg); color:var(--accent-text); font:inherit; font-size:12px; flex:none; }
.jr-picker-status { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11px; color:var(--muted); margin:18px 0 12px; }
.jr-selection-notice { margin:0 0 12px; color:var(--accent); font-size:12px; line-height:1.7; }
.jr-selection-notice:empty { display:none; }
.jr-quest-list { display:grid; gap:10px; }
.jr-quest-row { display:flex; align-items:center; gap:5px; padding:10px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.jr-quest-row.is-picked { border-color:var(--accent); }
.jr-quest-info { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:5px; border:0; background:transparent; color:var(--text); text-align:left; }
.jr-quest-info > img { width:58px; height:58px; object-fit:contain; flex:none; }
.jr-quest-info > span { min-width:0; }
.jr-quest-info small { display:block; color:var(--accent); font-size:10px; line-height:1.5; }
.jr-quest-info strong { display:block; font-size:14px; line-height:1.5; margin:5px 0; }
.jr-quest-info > span > span { display:block; font-size:11px; color:var(--muted); line-height:1.7; word-break:keep-all; }
.jr-quest-pick { width:44px; min-height:44px; flex:none; padding:0 3px; border:1px solid var(--line); border-radius:11px; background:var(--bg); color:var(--accent); font:inherit; font-size:23px; }
.jr-quest-pick[aria-pressed=true] { border-color:var(--accent); background:var(--action-bg); color:var(--accent-text); }
.jr-quest-pick:disabled { font-size:9px; color:var(--muted); opacity:.7; }
.jr-quest-detail { display:flex; align-items:center; gap:18px; margin:4px 0 24px; }
.jr-quest-detail > img { width:82px; height:82px; object-fit:contain; flex:none; }
.jr-quest-detail span { font-size:11px; color:var(--accent); }
.jr-quest-detail h2 { font-size:23px; line-height:1.4; letter-spacing:-.7px; margin:8px 0 0; }
.jr-earning-rule { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); margin:18px 0; }
.jr-earning-rule h3 { font-size:14px; color:var(--accent); margin:0 0 10px; }
.jr-earning-rule p { margin:0; font-size:15px; line-height:1.8; word-break:keep-all; }
.jr-earning-rule small { display:block; color:var(--muted); font-size:11px; line-height:1.8; margin-top:12px; }
.jr-earn-steps { list-style:none; padding:0; display:grid; gap:12px; margin:24px 0; }
.jr-earn-steps li { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.jr-earn-steps b { display:grid; place-items:center; width:24px; height:24px; color:var(--accent); border-radius:50%; background:var(--surface); font-size:10px; }
.jr-card-design { border-top:1px solid var(--line); margin:24px 0 0; }
.jr-card-design summary { display:flex; justify-content:space-between; align-items:center; min-height:48px; padding:12px 0; color:var(--muted); font-size:12px; cursor:pointer; }
.jr-card-design > div { max-width:190px; margin:12px auto; }
.jr-reuse-photo { width:100%; font-size:12px; margin-top:12px; }
@media(min-width:960px) { .jr-plan-layout { grid-template-columns:minmax(250px,.75fr) minmax(0,1.6fr); gap:24px; } .jr-picked { position:sticky; top:100px; } }
@media(max-width:359px) { .jr-picker-sports button { padding-inline:10px; } .jr-quest-info { gap:8px; } .jr-quest-info > img { width:44px; height:44px; } .jr-quest-info strong { font-size:13px; } .jr-quest-info > span > span { font-size:10px; } .jr-quest-row { padding:8px; } .jr-quest-detail > img { width:64px; height:64px; } }