/* C-016: one local concept screen, followed by a two-level capability reading.
   Scene and UI are siblings. No scroll pinning, no decorative global surface. */
.charge-live { border:1px solid #17171730; border-radius:28px; background:var(--surface); overflow:hidden; box-shadow:0 12px 36px #1717170a; }
.journey-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 28px; border-bottom:1px solid var(--line); }
.journey-heading>span:first-child { display:flex; align-items:center; gap:12px; }
.journey-heading>span:last-child { font-size:16px; color:var(--muted); }
.journey-screen { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); }
.journey-scene { position:relative; min-width:0; min-height:432px; overflow:hidden; background:var(--canvas); }
.journey-map,.journey-photo,.journey-receipt { position:absolute; inset:0; }
.journey-marker,.journey-current { position:absolute; display:flex; align-items:center; gap:8px; font-size:16px; }
.journey-marker { top:45%; left:45%; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.journey-marker>.icon { width:20px; height:20px; }
.marker-b { top:25%; left:64%; display:none; }
.charge-live[data-station=b] .marker-a { display:none; }
.charge-live[data-station=b] .marker-b { display:flex; }
.charge-live[data-state=remind] .journey-marker,.charge-live[data-state=dismiss] .journey-marker { visibility:hidden; }
.journey-current { top:73%; left:18%; }
.journey-current>.icon { width:20px; height:20px; color:var(--accent); }
.journey-map .map-routes { opacity:0; }
.charge-live:is([data-state=navigate],[data-state=arrived]) .map-routes { opacity:1; }
.charge-live[data-state=arrived] .journey-current { display:none; }
.journey-route-note { position:absolute; top:24px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.journey-route-note>span { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#ffffffed; border-radius:12px; font-size:16px; }
.journey-route-note>.icon { width:20px; height:20px; }
.journey-photo>img { width:100%; height:100%; object-fit:cover; object-position:right center; }
.energy-readout { position:absolute; top:24px; left:24px; width:168px; padding:20px; border:1px solid #ffffffaa; background:#ffffffed; border-radius:18px; }
.energy-readout>span { font-size:16px; color:var(--muted); }
.energy-readout>strong { display:block; font-size:56px; line-height:1.1; font-weight:550; letter-spacing:-.05em; margin-block:10px 16px; }
.energy-readout small { font-size:24px; margin-left:4px; }
.energy-track { height:4px; background:#17171718; overflow:hidden; margin-bottom:16px; }
.energy-track>span { display:block; width:100%; height:100%; transform:scaleX(.62); transform-origin:left; background:var(--ink); }
.charge-live[data-state=charged] .energy-track>span { transform:scaleX(.8); }
.journey-receipt { display:grid; place-items:center; padding:28px 56px; background:var(--canvas); }
.receipt-sheet { width:100%; max-width:380px; background:var(--surface); padding:24px 28px; border-radius:18px; box-shadow:0 8px 24px #1717170a; text-align:center; }
.receipt-symbol { float:right; margin:0; }
.receipt-symbol>.icon { width:28px; height:28px; }
.receipt-sheet>span:not(.receipt-symbol) { color:var(--muted); font-size:16px; }
.receipt-sheet>h3 { font-size:16px; margin-top:8px; }
.receipt-amount { font-size:56px; display:block; margin:12px 0 20px; line-height:1.1; letter-spacing:-.04em; font-weight:550; }
.receipt-sheet dl { margin:0; border-top:1px dashed var(--line); padding-top:12px; }
.receipt-sheet dl>div { display:flex; justify-content:space-between; gap:16px; padding:6px 0; }
.receipt-sheet dt { color:var(--muted); }.receipt-sheet dd { margin:0; }
.receipt-sheet>p { color:var(--muted); font-size:16px; margin-top:16px; }
.journey-assistant { padding:36px; display:grid; align-items:center; }
.journey-state { grid-area:1/1; min-width:0; }
.journey-state[hidden] { display:block!important; visibility:hidden; pointer-events:none; }
.journey-symbol { display:block; margin-bottom:24px; }
.journey-symbol>.icon { width:32px; height:32px; stroke-width:1.3; }
.journey-state h3 { font-size:24px; line-height:1.4; letter-spacing:-.02em; }
.journey-state p { color:var(--muted); margin-top:12px; }
.journey-state p strong { color:var(--ink); font-weight:550; }
.journey-actions { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-top:24px; }
.journey-actions>.button { padding:11px 18px; gap:12px; min-height:48px; border:0; }
.journey-stations { border:0; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.journey-stations label { cursor:pointer; position:relative; }
.journey-stations input { position:absolute; opacity:0; inset:0; margin:0; width:100%; height:100%; cursor:pointer; }
.journey-stations label>span { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; gap:16px; border:1px solid #17171740; border-radius:12px; min-height:52px; }
.journey-stations strong { font-weight:500; }.journey-stations small { font-size:16px; color:var(--muted); }
.journey-stations input:checked+span { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.journey-stations input:focus-visible+span { outline:2px solid var(--accent); outline-offset:4px; }
.journey-destination { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding-block:16px; border-bottom:1px solid var(--line); }
.journey-footer { border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 28px; }
.journey-footer ol { display:flex; align-items:center; justify-content:space-between; padding:0; margin:0; list-style:none; width:100%; gap:16px; }
.journey-footer li { position:relative; flex:1; color:var(--muted); font-size:16px; padding:10px 0; border-bottom:2px solid transparent; }
.journey-footer li[aria-current=step] { color:var(--ink); border-color:var(--accent); font-weight:600; }
.journey-footer li[data-complete=true] { color:var(--ink); }
.journey-restart { padding-inline:12px; flex:none; }
.journey-caption { margin-top:24px; color:var(--muted); }
.journey-caption>p { max-width:1000px; }
.charge-static { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.static-route { position:relative; min-height:360px; overflow:hidden; border-radius:28px; }
.static-route>div:last-child { position:absolute; left:24px; right:24px; bottom:24px; padding:20px; background:var(--surface); border-radius:18px; }
.charge-static h3 { font-size:24px; line-height:1.4; }.charge-static p { color:var(--muted); margin-top:10px; }
.static-charging>img { aspect-ratio:1.9; object-fit:cover; object-position:right center; border-radius:28px; width:100%; height:auto; }
.static-charging>div { padding-top:20px; }
.static-settlement { grid-column:1/-1; padding-top:20px; border-top:1px solid var(--line); }
.static-settlement>span { float:left; margin:4px 20px 0 0; }
/* Neutral common centers and a cross-cutting support line precede scene groupings. */
.capabilities-heading h2 { font-size:24px; line-height:1.4; letter-spacing:-.02em; }
.capabilities-heading p { margin-top:8px; color:var(--muted); }
.capability-centers { display:grid; grid-template-columns:192px minmax(0,1fr); align-items:start; gap:32px; padding:32px 0 28px; }
.capability-centers>h3,.scenario-heading h3 { font-size:24px; line-height:1.4; letter-spacing:-.02em; }
.center-pair { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.capability-identity { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.capability-identity h4 { font-size:16px; line-height:1.5; font-weight:600; margin:0; }
.capability-identity p { margin-top:6px; font-size:18px; color:var(--muted); line-height:1.7; }
.identity-icon { flex:none; display:flex; align-items:center; height:24px; }
.identity-icon>.icon { width:24px; height:24px; }
.center-pair .identity-icon { height:48px; width:48px; justify-content:center; border:1px solid #17171730; border-radius:12px; }
.center-pair .capability-identity { gap:16px; }
.widget-support { display:flex; gap:32px; align-items:flex-start; padding:20px 0; border-block:1px solid var(--line); }
.widget-support>span { color:var(--muted); width:192px; flex:none; }
.widget-support .capability-identity>div { display:flex; flex-wrap:wrap; gap:4px 24px; align-items:baseline; }
.widget-support .capability-identity p { margin:0; }
.scenario-heading { margin-top:32px; display:flex; align-items:baseline; gap:24px; }
.scenario-heading>span { color:var(--muted); }
.capability-fields { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.capability-field.task-surface { padding:28px 32px; }
.capability-field.task-surface::before { height:160px; background-size:360px 180px; width:74%; opacity:.6; }
.capability-field>h3 { font-size:24px; line-height:1.4; letter-spacing:-.02em; margin-bottom:24px; }
.field-products { display:grid; gap:16px; }
.field-multiple .capability-identity>div { display:grid; grid-template-columns:176px minmax(0,1fr); gap:12px; width:100%; }
.field-multiple .capability-identity p { margin:0; }
.field-scenarios { border-top:1px solid #17171726; margin-top:24px; padding-top:20px; display:flex; flex-wrap:wrap; gap:12px 24px; }
.field-scenarios .capability-identity { gap:8px; }
.field-scenarios h4 { font-weight:400; }
.field-scenarios .icon { width:20px; height:20px; }
.capability-field.tone-life .field-products .capability-identity:nth-child(1) .identity-icon { background:var(--task-tint); }
.index-condition { margin-top:24px; }
@media (hover:hover) and (pointer:fine) { .journey-stations label:hover>span { border-color:var(--ink); } }
@media (max-width:900px) {
 .journey-screen { grid-template-columns:1.05fr 1fr; }
 .journey-assistant { padding:28px; }
 .journey-scene { min-height:460px; }
 .journey-marker { left:24%; }.marker-b { left:36%; top:28%; }
 .journey-route-note { left:16px; top:16px; right:16px; }.journey-route-note>span:last-child { display:none; }
 .journey-receipt { padding:20px; }.receipt-sheet { padding:24px 20px; }
 .energy-readout { top:16px; left:16px; padding:16px; width:148px; }
 .energy-readout>strong,.receipt-amount { font-size:42px; }
 .journey-state h3,.charge-static h3,.capabilities-heading h2,.capability-centers>h3,.scenario-heading h3,.capability-field>h3 { font-size:22px; }
 .journey-photo>img { object-position:right center; }
 .capability-centers { grid-template-columns:1fr; gap:24px; }.center-pair { gap:24px; }
 .widget-support { gap:24px; }.widget-support>span { width:144px; }
 .capability-fields { gap:20px; }.capability-field.task-surface { padding:24px; }
 .field-multiple .capability-identity>div { display:block; }.field-multiple .capability-identity p { margin-top:4px; }
 .field-scenarios { gap:12px 20px; }
}
@media (max-width:620px) {
 .charge-live { border-radius:18px; box-shadow:none; }
 .journey-heading { padding:16px 20px; gap:8px; display:block; }.journey-heading>span:last-child { display:block; margin-top:8px; }
 .journey-screen { display:flex; flex-direction:column; }.journey-scene { min-height:272px; }
 .journey-assistant { padding:24px 20px; min-height:296px; align-items:start; }
 .journey-symbol { display:none; }
 .journey-actions { margin-top:20px; gap:8px; }.journey-actions>.button { padding:11px 16px; }
 .journey-marker { left:40%; top:45%; }.marker-b { left:45%; top:28%; }
 .journey-current { top:75%; }
 .journey-stations { margin-top:16px; }.journey-stations label>span { padding:10px 14px; }
 .journey-photo>img { object-position:right center; }
 .energy-readout { top:14px; left:14px; width:126px; padding:12px; border-radius:14px; }
 .energy-readout>strong { font-size:40px; margin-block:8px 12px; }.energy-readout small { font-size:22px; }
 .energy-readout>span:last-child { display:none; }.energy-track { margin-bottom:2px; }
 .journey-receipt { padding:14px 20px; }.receipt-sheet { max-width:none; padding:16px 20px; text-align:left; border-radius:14px; }
 .receipt-symbol { float:right; margin:0; }.receipt-sheet>h3 { margin-top:4px; }
 .receipt-amount { font-size:32px; margin:8px 0 12px; }
 .receipt-sheet dl { padding-top:6px; display:block; }
 .receipt-sheet dl>div { font-size:16px; gap:8px; padding:3px 0; }.receipt-sheet dl>div:last-child { justify-content:space-between; }
 .receipt-sheet>p { margin-top:8px; }
 .journey-footer { padding:8px 16px; gap:4px; }.journey-footer ol { gap:12px; }.journey-restart { padding-inline:8px; }
 .journey-caption { margin-top:20px; }
 .charge-static { grid-template-columns:1fr; gap:24px; }.static-route { min-height:300px; border-radius:18px; }.static-charging>img { border-radius:18px; }
 .static-route>div:last-child { left:16px; right:16px; bottom:16px; padding:16px; border-radius:14px; }
 .capability-centers { padding-block:24px; }.center-pair { gap:20px; grid-template-columns:1fr 1fr; }
 .center-pair .identity-icon { width:24px; height:24px; border:0; }.center-pair .capability-identity { gap:8px; }
 .widget-support { display:block; padding-block:20px; }.widget-support>span { display:block; width:auto; margin-bottom:12px; }
 .widget-support .capability-identity>div { display:block; }.widget-support .capability-identity p { margin-top:4px; }
 .scenario-heading { display:block; margin-top:28px; }.scenario-heading>span { display:block; margin-top:8px; }
 .capability-fields { grid-template-columns:1fr; gap:20px; margin-top:20px; }
 .capability-field.task-surface { padding:20px; border-radius:14px; }.capability-field>h3 { margin-bottom:16px; }
 .field-products { gap:12px; }
 .field-scenarios { margin-top:16px; padding-top:16px; gap:8px 16px; }.field-scenarios .capability-identity { gap:8px; }
}
@media (prefers-reduced-motion:reduce) { .charge-live * { animation:none!important; transition:none!important; } }