/* Tour viewing composition, confirmed 2026-10-04. */
#tour { position:fixed; left:auto; right:24px; top:calc(var(--tbh) + (100dvh - var(--tbh))/2); bottom:auto; transform:translateY(-50%); width:380px; max-height:none; padding:18px; border:1px solid var(--line2); border-top:2px solid color-mix(in srgb,var(--accent) 65%,var(--line2)); border-radius:18px; background:var(--panel-solid); color:var(--ink); box-shadow:0 16px 52px rgba(0,0,0,.16); z-index:40; overflow:visible; animation:none; }
#tour:not([hidden]) { display:flex; flex-direction:column; }
#tour .tour-head { display:flex; gap:10px; align-items:center; min-height:44px; margin-bottom:12px; }
#tour .tour-number { font:400 10px var(--f-mono); color:var(--ink2); white-space:nowrap; }
#tour .tour-number b { font:600 23px var(--f-display); color:var(--accent); }
#tour .tour-chapter-label { position:relative; min-width:0; flex:1; }
#tour select { appearance:none; -webkit-appearance:none; width:100%; min-height:40px; padding:6px 23px 6px 10px; border:1px solid var(--line); border-radius:20px; font:500 11px var(--f-body); color:var(--ink2); background:var(--panel-solid); cursor:pointer; }
#tour .tour-chapter-label::after { content:'⌄'; position:absolute; right:10px; top:50%; transform:translateY(-55%); color:var(--ink2); pointer-events:none; font:14px var(--f-body); }
#tour .tour-close,#tour .tour-inspect { flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; background:transparent; color:var(--ink2); border:0; border-radius:8px; font:24px var(--f-body); cursor:pointer; }
#tour .tour-close { margin-left:auto; }
#tour .tour-inspect { display:none; color:var(--accent); font:500 11px var(--f-body); }
#tour .tour-content { overflow:visible; min-height:260px; padding:0; }
#tour h2 { font:550 27px/1.15 var(--f-display); margin:0 0 12px; text-wrap:balance; }
#tour p { font:400 14px/1.5 var(--f-body); margin:0; color:var(--ink2); }
#tour .tour-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:8px; margin:16px 0; }
#tour .tour-stats>div { padding:8px 0 8px 10px; border-left:1px solid var(--line2); }
#tour .tour-stats strong { display:block; font:550 26px/1.1 var(--f-display); font-variant-numeric:tabular-nums; }
#tour .tour-stats span { display:block; font:400 11px/1.3 var(--f-body); color:var(--ink2); margin-top:4px; }
#tour .tour-examples { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
#tour .tour-examples button { flex:1 1 125px; display:flex; align-items:center; justify-content:space-between; gap:6px; text-align:left; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:var(--panel-solid); color:var(--ink); cursor:pointer; min-height:38px; }
#tour .tour-examples span { font:500 12px/1.3 var(--f-body); }
#tour .tour-examples span[aria-hidden] { color:var(--accent); }
#tour .tour-examples button:hover { border-color:var(--accent); }
#tour .tour-actions { display:flex; gap:6px; margin:12px 0; }
#tour .tour-actions .btn { flex:1; min-width:0; padding:7px 8px; min-height:44px; font-size:12px; }
#tour .tour-actions [aria-pressed=true] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--panel-solid)); }
#tour p.tour-tip { padding-top:10px; border-top:1px solid var(--line); font-size:12px; line-height:1.4; }
#tour .tour-segments { display:flex; gap:4px; margin:8px 0 4px; }
#tour .tour-segments button { flex:1; min-width:0; min-height:24px; display:flex; align-items:center; padding:0; background:transparent; border:0; cursor:pointer; }
#tour .tour-segments i { display:block; width:100%; height:3px; background:var(--line2); border-radius:2px; }
#tour .tour-segments .done i { background:color-mix(in srgb,var(--accent) 65%,var(--line)); }
#tour .tour-segments [aria-current] i { background:linear-gradient(to right,var(--accent) var(--progress,100%),var(--line2) var(--progress,100%)); }
#tour .tour-controls { display:flex; gap:8px; }
#tour .tour-controls .btn { min-height:44px; font-size:12px; padding:8px 12px; }
#tour .tour-controls [data-tour=next] { margin-left:auto; }
#tour .tour-footer { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:4px; color:var(--ink2); font:400 11px var(--f-body); }
#tour .tour-footer button { background:none; border:0; padding:0; color:var(--ink2); cursor:pointer; text-decoration:underline; text-underline-offset:3px; font:400 11px var(--f-body); min-height:28px; }
#tour #tour-status { white-space:nowrap; font-variant-numeric:tabular-nums; }
#tour button:focus-visible,#tour select:focus-visible,#tour h2:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
#tour button:disabled { opacity:.45; cursor:default; }
#tour .tour-profile { display:grid; gap:5px; margin:12px 0; padding:10px 12px; border-left:2px solid var(--accent); background:color-mix(in srgb,var(--ink) 3%,var(--panel-solid)); font:400 12px/1.35 var(--f-body); color:var(--ink2); }
#tour .tour-profile b { color:var(--ink); font-weight:500; }
.tour-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
body.tour-active #caption { visibility:hidden; }
body.tour-active .explore-heading { display:none; }
body.tour-active #focusbar { animation:none; }
body.tour-active[data-tour-layout=side] #focusbar { left:calc((100vw - var(--tour-width,380px) - 48px)/2); right:auto; transform:translateX(-50%); max-width:calc(100vw - var(--tour-width,380px) - 72px); }
body.tour-active #zoom { right:auto!important; left:18px; width:max-content; }
body.tour-active[data-tour-layout=bottom] #tour { top:auto; bottom:calc(8px + env(safe-area-inset-bottom,0px)); left:8px; right:8px; transform:none; width:calc(100vw - 16px); padding:10px 12px 6px; }
body.tour-active[data-tour-layout=bottom] #tour h2 { font-size:21px; margin-bottom:8px; }
body.tour-active[data-tour-layout=bottom] #tour .tour-content { min-height:150px; }
body.tour-active[data-tour-layout=bottom] #tour p { font-size:13px; line-height:1.4; }
body.tour-active[data-tour-layout=bottom] #tour .tour-head { gap:6px; margin-bottom:6px; }
body.tour-active[data-tour-layout=bottom] #tour .tour-number b { font-size:20px; }
body.tour-active[data-tour-layout=bottom] #tour select { font-size:10px; padding-left:8px; min-height:44px; }
body.tour-active[data-tour-layout=bottom] #tour .tour-stats { margin:10px 0; gap:5px; }
body.tour-active[data-tour-layout=bottom] #tour .tour-stats>div { padding:4px 0 4px 7px; }
body.tour-active[data-tour-layout=bottom] #tour .tour-stats strong { font-size:23px; }
body.tour-active[data-tour-layout=bottom] #tour .tour-stats span { font-size:10px; }
body.tour-active[data-tour-layout=bottom] #tour .tour-examples,body.tour-active[data-tour-layout=bottom] #tour .tour-tip { display:none; }
body.tour-active[data-tour-layout=bottom] #tour .tour-inspect:not([hidden]) { display:grid; }
body.tour-active[data-tour-layout=bottom] #tour .tour-actions { margin:8px 0 4px; }
body.tour-active[data-tour-layout=bottom] #tour .tour-segments { margin:4px 0; }
body.tour-active[data-tour-layout=bottom] #tour .tour-profile { margin:8px 0; padding:7px 10px; gap:3px; }
body.tour-active[data-tour-layout=bottom] #focusbar { display:none; }
@media(max-width:900px) {
  .tools #btnTour { display:inline-flex; min-width:44px; }
  body.tour-active #primary-nav,body.tour-active #top>.search,body.tour-active #btnTheme,body.tour-active #btnShare { display:none; }
  body.tour-active #top { padding-bottom:12px; flex-wrap:nowrap; }
  body.tour-active #zoom { display:none; }
  body.tour-active[data-tour-layout=side] #tour { right:10px; width:min(360px,48vw); padding:12px; }
  body.tour-active[data-tour-layout=side] #focusbar { left:12px; right:calc(var(--tour-width,360px) + 26px); transform:none; max-width:none; gap:7px; padding:4px 7px 4px 10px; flex-wrap:nowrap; }
  body.tour-active[data-tour-layout=side] #focusbar b { min-width:0; flex:1; overflow-wrap:anywhere; font-size:12px!important; }
  body.tour-active[data-tour-layout=side] #focusbar .btn { flex-shrink:0; min-height:36px; }
  body.tour-active[data-tour-layout=side] #focusbar .count { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
}
/* Compact screens use the same takeaway and actions, without duplicate metadata. */
body.tour-active #tour[data-density=compact] { padding:10px 12px; }
body.tour-active #tour[data-density=compact] .tour-content { min-height:140px; }
body.tour-active #tour[data-density=compact] .tour-head { margin-bottom:6px; }
body.tour-active #tour[data-density=compact] h2 { font-size:22px; margin-bottom:8px; }
body.tour-active #tour[data-density=compact] .tour-stats { margin:8px 0; }
body.tour-active #tour[data-density=compact] .tour-stats>div { padding-top:2px; padding-bottom:2px; }
body.tour-active #tour[data-density=compact] .tour-stats strong { font-size:22px; }
body.tour-active #tour[data-density=compact] .tour-examples,body.tour-active #tour[data-density=compact] .tour-tip { display:none; }
body.tour-active #tour[data-density=compact] .tour-inspect:not([hidden]) { display:grid; }
body.tour-active #tour[data-density=compact] .tour-actions { margin:6px 0; }
body.tour-active #tour[data-density=compact] .tour-segments { margin:4px 0; }
body.tour-active #tour[data-density=minimal] { padding:8px 12px; }
body.tour-active #tour[data-density=minimal] .tour-content { min-height:0; }
body.tour-active #tour[data-density=minimal] .tour-head { margin-bottom:4px; }
body.tour-active #tour[data-density=minimal] h2 { font-size:20px; margin-bottom:6px; }
body.tour-active #tour[data-density=minimal] p { font-size:13px; line-height:1.35; }
body.tour-active #tour[data-density=minimal] .tour-stats,body.tour-active #tour[data-density=minimal] .tour-examples,body.tour-active #tour[data-density=minimal] .tour-tip,body.tour-active #tour[data-density=minimal] .tour-footer,body.tour-active #tour[data-density=minimal] .tour-segments { display:none; }
body.tour-active #tour[data-density=minimal] .tour-inspect:not([hidden]) { display:grid; }
body.tour-active #tour[data-density=minimal] .tour-profile { margin:6px 0; padding:6px 8px; }
body.tour-active #tour[data-density=minimal] .tour-question { display:none; }
body.tour-active #tour[data-density=minimal] .tour-actions { margin:6px 0; }
@media(prefers-reduced-motion:reduce) { #tour,#tour * { animation:none!important; transition:none!important; } }
@media print { #tour { display:none!important; } }

body.tour-active #tour[data-density=compact] .tour-footer,body.tour-active #tour[data-density=compact] .tour-segments { display:none; }
body.tour-active #tour[data-density=compact] .tour-question { display:none; }

#tour .tour-stats .tour-metric-short { display:none; }
body.tour-active #tour[data-density=compact] h2 { font-size:20px; }
body.tour-active #tour[data-density=compact] p { font-size:13px; line-height:1.4; }
body.tour-active #tour[data-density=compact] .tour-stats { margin:6px 0; }
body.tour-active #tour[data-density=compact] .tour-stats strong { font-size:18px; }
body.tour-active #tour[data-density=compact] .tour-stats span { font-size:10px; margin-top:2px; }
body.tour-active #tour[data-density=compact] .tour-metric-label { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
body.tour-active #tour[data-density=compact] .tour-metric-short { display:block; }

/* The chapter selector shares the action-icon grid, confirmed 2026-10-04. */
#tour .tour-chapter-label::after{display:none}
#tour .tour-chapter-label>.radar-icon{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--ink2)}