/* Reusable service screen. No fixed secondary footer beside the shared dock. */
dialog.ui-journey[open] {
  --field: var(--ui-field); --bg: var(--ui-canvas); --text: var(--ui-ink);
  --muted: var(--ui-muted); --line: var(--ui-line); --surface: var(--ui-glass); --panel: var(--ui-glass);
  position: fixed; inset: 0; width: 100%; height: var(--sc-vh,100dvh);
  max-width: none; max-height: var(--sc-vh,100dvh); margin: 0 auto; padding: 0;
  display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  border: 0; border-radius: 0; box-shadow: none; background: var(--ui-canvas-fill);
  color: var(--ui-ink); font: var(--ui-body)/var(--ui-leading) Arial,sans-serif;
}
dialog.ui-journey::backdrop { background: var(--ui-canvas); backdrop-filter: none; }
.ui-journey :where(button,input,select) { font-family: inherit; }
.ui-journey .sc-head { display:flex; align-items:center; gap:10px; padding:4px var(--field); height:48px; min-height:48px; border:0; background:none; flex:none; }
.ui-journey .sc-brand { display:none; }
.ui-journey .flow-step { margin-right:auto; font:16px/1.2 Arial; color:var(--ui-ink); }
.ui-journey .sc-head button,.ui-journey .journey-back { display:grid; place-items:center; width:40px; min-width:40px; min-height:40px; padding:8px; border:0; background:none; color:inherit; }
.ui-journey .sc-head svg { width:24px; height:24px; fill:none; stroke:currentColor; }
.ui-journey .sc-body { flex:1; min-height:0; padding:12px var(--field) 28px; overflow-y:auto; overflow-x:hidden; position:relative; overscroll-behavior:contain; scrollbar-gutter:auto; }
.ui-journey .sc-body::before { content:''; position:absolute; top:20px; right:0; width:160px; height:160px; background:var(--sc-flow-art) left center/200% 100%; opacity:.055; pointer-events:none; mask-image:radial-gradient(ellipse,#000,transparent 70%); }
.ui-journey .flow-title { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; position:relative; }
.ui-journey .flow-title h2 { min-width:0; margin:0; font:500 var(--ui-title)/var(--ui-heading-leading) Arial; letter-spacing:-.035em; color:var(--ui-ink); }
/* The SVG already contains its circle: never draw a second ring. */
.ui-journey .sc-info { display:grid; place-items:center; width:44px; min-width:44px; height:44px; min-height:44px; padding:6px; border:0; border-radius:50%; background:none; color:inherit; }
.ui-journey .sc-info svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.7; }
.ui-journey .flow-content { position:relative; display:flex; flex-direction:column; gap:16px; overflow:visible; }
.ui-journey p { font-size:var(--ui-body); line-height:var(--ui-leading); margin:0 0 14px; }
.ui-journey small { font:var(--ui-caption)/1.25 Arial; color:var(--ui-muted); }
.ui-journey .error { color:var(--ui-danger); }
.ui-journey details { padding:12px 0; border:0; border-bottom:1px solid var(--ui-line); background:none; border-radius:0; }
.ui-journey summary { padding:8px 0; min-height:44px; cursor:pointer; font-size:18px; line-height:1.2; color:inherit; }
.journey-metro { display:flex; justify-content:space-between; gap:0; padding:8px var(--field) 16px; flex:none; }
.journey-metro button { position:relative; flex:1; display:grid; place-items:center; min-width:28px; min-height:32px; padding:0; border:0; color:var(--ui-muted); background:none; }
.journey-metro button::before { content:''; position:absolute; left:0; right:0; top:15px; height:2px; background:var(--ui-line); }
.journey-metro button:first-child::before { left:50%; }.journey-metro button:last-child::before { right:50%; }
.journey-metro i { position:relative; z-index:1; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; border:1px solid var(--ui-line); background:var(--ui-canvas); color:var(--ui-muted); font:600 13px/1 Arial; }
.journey-metro [aria-current=step] i { background:var(--ui-selected); color:var(--ui-selected-ink); border-color:var(--ui-selected); box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-accent) 15%,transparent); }
.journey-metro button:disabled { opacity:.55; }.journey-metro span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.journey-step-action { margin-top:24px; display:flex; justify-content:flex-end; padding-bottom:16px; }
.journey-step-action button { display:flex; align-items:center; justify-content:center; gap:16px; width:auto; min-height:48px; padding:12px 18px; border:1px solid var(--ui-line); border-radius:var(--ui-radius); background:var(--ui-glass); color:var(--ui-ink); font:600 18px/1.15 Arial; }
.journey-step-action svg { width:24px; height:24px; stroke:currentColor; fill:none; }
.journey-cost { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; margin-top:20px; padding:20px 0; border-top:1px solid var(--ui-line); }
.journey-cost>span { font-size:17px; color:var(--ui-muted); }.journey-cost>strong { font-size:27px; font-weight:500; }.journey-cost details { width:100%; }
.journey-cost p { display:flex; justify-content:space-between; gap:16px; font-size:16px; margin:12px 0; }.journey-cost p b { white-space:nowrap; font-size:16px; }
.ui-journey button:active { transform:translateY(1px); }.ui-journey button:focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }
@media(min-width:801px) { dialog.ui-journey[open] { width:760px; height:calc(100dvh - 40px); max-height:calc(100dvh - 40px); inset:20px 0 auto; border-radius:22px; }.journey-step-action { justify-content:flex-start; } }

/* Standalone service and embedded app use the same protected canvas. */
dialog.ui-journey[open]{z-index:20;top:var(--sc-header-height,55px);bottom:auto;height:calc(var(--sc-vh,100dvh) - var(--sc-header-height,55px) - var(--sc-nav-height,84px) - 12px);max-height:calc(var(--sc-vh,100dvh) - var(--sc-header-height,55px) - var(--sc-nav-height,84px) - 12px)}
html[data-cc-embed] dialog.ui-journey[open]{top:0;height:var(--sc-vh,100dvh);max-height:var(--sc-vh,100dvh);border-radius:0}
html:not([data-cc-embed]) body:has(dialog.ui-journey[open])::before{content:'';position:fixed;inset:var(--sc-header-height,55px) 0 0;background:var(--ui-canvas-fill);pointer-events:none;z-index:10}
html:not([data-cc-embed]) body:has(dialog.ui-journey[open])>header{position:relative;z-index:21}
html:not([data-cc-embed]) body:has(dialog.ui-journey[open])>#navigation{z-index:21;box-sizing:border-box;width:calc(100% - 32px);left:16px;right:16px;bottom:12px;border:0;border-radius:22px;background:var(--bg);padding:8px}
@media(min-width:801px){html:not([data-cc-embed]) dialog.ui-journey[open]{top:calc(var(--sc-header-height,66px) + 16px);height:calc(var(--sc-vh,100dvh) - var(--sc-header-height,66px) - var(--sc-nav-height,84px) - 40px);max-height:calc(var(--sc-vh,100dvh) - var(--sc-header-height,66px) - var(--sc-nav-height,84px) - 40px)}}