/* Meridian product tour: site/assets/css/tour.css
   Loaded only by /tour/ after site.css. Unlayered, so it wins over the layered site rules.
   Every selector is scoped under body[data-page="tour"]. The page's own parts (.tour-scene in the
   hero, .tour-chapters above the frame, .tour-after under it) use the site tokens; the app inside
   the frame (.tour-app, [data-tour]) is the .ui-* vocabulary from site.css, driven by tour.js. */

/* Breadcrumb links get a 44 px hit area without moving (the visible line stays 24 px) */
body[data-page="tour"] .breadcrumb a{display:inline-flex;align-items:center;min-height:44px;margin:-10px -4px;padding-inline:4px}

/* The night so far: a short timeline in the hero. Page copy on navy, not a product screen. */
body[data-page="tour"] .tour-scene{display:grid;gap:var(--s-4);min-width:0;padding:var(--s-6) var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:rgb(255 255 255 / .03)}
body[data-page="tour"] .tour-scene__title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);color:var(--ink);font:600 1.125rem/1.3 var(--display);letter-spacing:-.01em}
body[data-page="tour"] .tour-scene__sub{color:var(--muted);font:500 var(--fs-label)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
body[data-page="tour"] .tour-scene__list{display:grid;margin:0;padding:0;border-top:1px solid var(--line);list-style:none}
body[data-page="tour"] .tour-scene__list li{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:2px var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-small);line-height:1.5}
body[data-page="tour"] .tour-scene__list li:last-child{border-bottom:0;padding-bottom:0}
body[data-page="tour"] .tour-scene__t{color:var(--on-navy-primary);font:500 .875rem/1.55 var(--mono);font-variant-numeric:tabular-nums}
body[data-page="tour"] .tour-scene__where{grid-column:2;color:var(--muted);font-size:var(--fs-xs)}
body[data-page="tour"] .tour-scene .ui-mono{font-size:.94em}
@media (min-width:1024px){body[data-page="tour"] .tour-scene{padding:var(--s-6)}}

/* Chapters: one short caption per screen above the frame. Each is a link to its screen (#dash,
   #con, #sla): tour.js opens it from the address; without JS it jumps to the screen below. */
body[data-page="tour"] .tour-chapters ol{display:grid;gap:0;margin:0 0 var(--s-5);padding:0;list-style:none}
body[data-page="tour"] .tour-chapter{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-content:start;gap:2px var(--s-2);height:100%;padding:var(--s-4) var(--s-4) var(--s-4) 0;border-top:2px solid var(--line);color:var(--ink-2);text-decoration:none;transition:var(--t-color)}
body[data-page="tour"] .tour-chapter__n{color:var(--primary);font:500 .875rem/1.75 var(--mono);letter-spacing:.06em}
body[data-page="tour"] .tour-chapter__name{color:var(--ink);font:600 var(--fs-h3)/1.35 var(--display);letter-spacing:-.012em;transition:var(--t-color)}
body[data-page="tour"] .tour-chapter__text{grid-column:2;color:var(--ink-2);font-size:var(--fs-small);line-height:1.55}
body[data-page="tour"] .tour-chapter:hover{border-top-color:var(--line-strong);color:var(--ink-2)}
body[data-page="tour"] .tour-chapter:hover .tour-chapter__name{color:var(--primary)}
@media (min-width:768px){body[data-page="tour"] .tour-chapters ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}}
/* The chapter of the screen on show: tour.js keeps aria-selected on the rail tabs */
body[data-page="tour"]:is(.js > *) .tour-frame:has(#tab-dash[aria-selected="true"]) .tour-chapter[href="#dash"],
body[data-page="tour"]:is(.js > *) .tour-frame:has(#tab-con[aria-selected="true"]) .tour-chapter[href="#con"],
body[data-page="tour"]:is(.js > *) .tour-frame:has(#tab-sla[aria-selected="true"]) .tour-chapter[href="#sla"]{border-top-color:var(--primary)}
/* Phones: the app's own tab row switches screens, so only the caption on show stays */
@media (max-width:767.98px){
body[data-page="tour"]:is(.js > *) .tour-frame:has(#tab-dash[aria-selected="true"]) .tour-chapter:not([href="#dash"]),
body[data-page="tour"]:is(.js > *) .tour-frame:has(#tab-con[aria-selected="true"]) .tour-chapter:not([href="#con"]),
body[data-page="tour"]:is(.js > *) .tour-frame:has(#tab-sla[aria-selected="true"]) .tour-chapter:not([href="#sla"]){display:none}
body[data-page="tour"]:is(.js > *) .tour-chapters ol{margin-bottom:var(--s-4)}
}

/* The frame. site.css clips .frame with overflow:hidden, which would stop the rail and the batch
   list from staying in view while the page scrolls; clip does the same rounding without that. */
body[data-page="tour"] .tour-window{overflow:clip;container:tourapp/inline-size}
body[data-page="tour"] .tour-app{display:grid;grid-template-columns:minmax(0,1fr)}
body[data-page="tour"] .tour-rail{background:var(--console);color:var(--console-dim);border-bottom:1px solid var(--console-line);font:400 14px/1.4 var(--sans)}
body[data-page="tour"] .tour-rail__in{display:flex;flex-direction:column;gap:4px;padding:6px}
body[data-page="tour"] .tour-tabs{display:flex;gap:4px}
body[data-page="tour"] .tour-item{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:56px;padding:6px;border:0;border-radius:var(--r-sm);background:none;color:inherit;font:500 12.5px/1.25 var(--sans);text-align:center;text-decoration:none;transition:var(--t-color)}
body[data-page="tour"] .tour-item .icon{width:20px;height:20px}
body[data-page="tour"] .tour-item:hover{background:var(--console-raise);color:var(--console-ink)}
body[data-page="tour"] .tour-item[aria-selected="true"]{background:var(--console-raise);color:var(--console-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--on-navy-primary)}
body[data-page="tour"] .tour-item[aria-selected="true"] .icon{color:var(--on-navy-primary)}
body[data-page="tour"] .tour-item:focus-visible{outline:2px solid var(--console-brand);outline-offset:-2px}
body[data-page="tour"] :is(.tour-logo,.tour-more,.tour-who){display:none}
body[data-page="tour"] .tour-main{min-width:0}
body[data-page="tour"] .tour-view{padding:14px}
@container tourapp (min-width:560px){
body[data-page="tour"] .tour-item{flex-direction:row;gap:8px;min-height:48px;font-size:14px}
body[data-page="tour"] .tour-view{padding:20px}
}
@container tourapp (min-width:880px){
body[data-page="tour"] .tour-app{grid-template-columns:188px minmax(0,1fr)}
body[data-page="tour"] .tour-rail{border:0;border-right:1px solid var(--console-line)}
body[data-page="tour"] .tour-rail__in{position:sticky;top:calc(var(--header-h) + 16px);padding:14px 10px 16px}
body[data-page="tour"] .tour-tabs{flex-direction:column;gap:2px}
body[data-page="tour"] .tour-item{flex:none;justify-content:flex-start;min-height:44px;padding:8px 12px;text-align:left}
body[data-page="tour"] .tour-item[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--on-navy-primary)}
body[data-page="tour"] .tour-logo{display:flex;align-items:center;gap:10px;padding:4px 10px 16px;color:var(--console-ink);font:600 16px/1.2 var(--display);letter-spacing:-.01em}
body[data-page="tour"] .tour-logo svg{width:26px;height:26px}
body[data-page="tour"] .tour-more{display:grid;gap:2px;margin-top:12px;padding-top:12px;border-top:1px solid var(--console-line)}
body[data-page="tour"] .tour-more p{padding:0 12px 4px;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
body[data-page="tour"] .tour-who{display:block;margin-top:14px;padding:12px 12px 0;border-top:1px solid var(--console-line);font-size:12.5px}
}

/* Inside the app */
body[data-page="tour"] .tour-app :is(ul,ol){list-style:none}
body[data-page="tour"] .tour-app h5{margin:0}
body[data-page="tour"] .tour-sub{color:var(--ink-2);font-size:13px;font-weight:500}
body[data-page="tour"] .ui-bar :is(.ui-crumb,.ui-pick){white-space:nowrap}
body[data-page="tour"] .ui-btn[aria-disabled="true"]{color:var(--ink-2);cursor:default}
/* Real controls inside the app surface. Each button's own box is 44 px tall; the visible chip or
   button keeps the app's 32 to 34 px density, drawn by a ::before behind the label, and negative
   margins keep the layout where it was. Focus rings follow the visible box. */
body[data-page="tour"] button:is(.ui-chip,.ui-btn,.ui-bell){position:relative;isolation:isolate;border-color:transparent;background:transparent}
body[data-page="tour"] button:is(.ui-chip,.ui-btn,.ui-bell)::before{content:"";position:absolute;z-index:-1;border:1px solid var(--line-strong);background:var(--surface);transition:var(--t-color)}
body[data-page="tour"] button.ui-chip{min-height:44px;margin-block:-6px}
body[data-page="tour"] button.ui-chip::before{inset:6px 0;border-color:var(--line);border-radius:999px}
body[data-page="tour"] button.ui-chip.is-on::before{background:var(--ink);border-color:var(--ink)}
body[data-page="tour"] button.ui-btn{min-height:44px;margin-block:-5px}
body[data-page="tour"] button.ui-btn::before{inset:5px 0;border-radius:var(--r-sm)}
body[data-page="tour"] button.ui-btn--primary::before{background:var(--brand-strong);border-color:var(--brand-strong)}
body[data-page="tour"] button.ui-btn.is-on::before{background:var(--ink);border-color:var(--ink)}
body[data-page="tour"] :is(.ui-console,.ui-reply) button.ui-btn::before{background:var(--console);border-color:var(--console-edge)}
body[data-page="tour"] :is(.ui-console,.ui-reply) button.ui-btn--primary::before{background:var(--console-brand);border-color:var(--console-brand)}
body[data-page="tour"] button.ui-bell{width:44px;height:44px;margin:-6px;padding:0;border:0;color:var(--ink)}
body[data-page="tour"] button.ui-bell::before{inset:6px;border-color:var(--line);border-radius:var(--r-sm)}
body[data-page="tour"] button.ui-bell .ui-bell__n{top:0;right:0}
body[data-page="tour"] button:is(.ui-chip:not(.is-on),.ui-btn:not(.ui-btn--primary,.is-on,[aria-disabled="true"]),.ui-bell):hover::before{background:var(--surface-2);border-color:var(--muted)}
body[data-page="tour"] button.ui-btn--primary:hover::before{background:var(--brand-strong-hover);border-color:var(--brand-strong-hover)}
body[data-page="tour"] :is(.ui-console,.ui-reply) button.ui-btn--primary:hover::before{background:color-mix(in srgb,var(--console-brand),white 12%);border-color:color-mix(in srgb,var(--console-brand),white 12%)}
body[data-page="tour"] button:is(.ui-chip,.ui-btn,.ui-bell):focus-visible{outline:none}
body[data-page="tour"] button:is(.ui-chip,.ui-btn,.ui-bell):focus-visible::before{outline:2px solid var(--focus);outline-offset:2px}
body[data-page="tour"] .ui-console button:focus-visible::before{outline-color:var(--console-brand)}
body[data-page="tour"] .ui-acts,body[data-page="tour"] .ui-whatif__opts{gap:10px}
body[data-page="tour"] button.ui-brow:not(.is-on):hover,body[data-page="tour"] .ui-step:hover{border-color:var(--line-strong)}
body[data-page="tour"] .ui-strip > a.ui-link{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px;padding-inline:7px;margin-inline:-7px}
body[data-page="tour"] .ui-step{position:relative;min-height:44px}
body[data-page="tour"] button.ui-brow{width:100%;color:var(--ink);font:inherit;text-align:left}
body[data-page="tour"] .ui-sla{margin:0}
body[data-page="tour"] .ui-console :focus-visible{outline-color:var(--console-brand)}
body[data-page="tour"] .ui-reply:focus-visible{outline-offset:-2px}
body[data-page="tour"] .tour-log{margin-top:6px;padding-top:6px;border-top:1px solid var(--console-line)}
body[data-page="tour"] .tour-mnote{display:grid;grid-template-columns:8.5ch minmax(0,1fr);column-gap:12px;padding:3px 16px;color:var(--console-dim)}
body[data-page="tour"] .tour-mnote__x{font:400 12.5px/1.6 var(--sans)}
body[data-page="tour"] .tour-mnote__x svg{width:14px;height:14px;margin-right:6px;vertical-align:-2px}
body[data-page="tour"] .tour-status{color:var(--ink-2);font-size:13px}
body[data-page="tour"] .tour-status:empty{margin-top:-10px}
body[data-page="tour"] .tour-scroll{border:0;border-radius:6px;background:none}
body[data-page="tour"] .ui .table-wrap__cue{align-items:center;gap:6px;margin:0 0 6px;font-size:12.5px}
body[data-page="tour"] .ui .table-wrap[data-overflowing] .table-wrap__cue{display:flex}
body[data-page="tour"] .ui .table-wrap__cue .icon{width:14px;height:14px}
body[data-page="tour"] .ui-table .ui-k{display:block;font-family:var(--sans)}
body[data-page="tour"] .ui-table .ui-pill{white-space:nowrap}
body[data-page="tour"] .tour-scroll .ui-table{min-width:600px}
body[data-page="tour"] .ui-step input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
body[data-page="tour"] .ui-step:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
body[data-page="tour"] .ui-detail [tabindex="-1"]:focus-visible{outline-offset:4px;border-radius:4px}
@container ui (min-width:820px){body[data-page="tour"] .ui-blist{position:sticky;top:calc(var(--header-h) + 16px)}}
@container ui (max-width:559.98px){body[data-page="tour"] .ui-cond{grid-template-columns:18px minmax(0,1fr)}body[data-page="tour"] .ui-cond__st{grid-column:2;text-align:left}}

/* Under the frame */
body[data-page="tour"] .tour-after{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;margin-top:var(--s-2)}
body[data-page="tour"] .tour-after .frame__caption{margin:0}

/* Before tour.js has run, show only the first screen and the first batch; without JS, show every
   screen one under the other and hide the rail (its tabs need the script). */
body[data-page="tour"]:is(.js > *) .tour-app:not([data-ready]) :is(.tour-view:not(#dash),.ui-detail:not(#b-settle)){display:none}
body[data-page="tour"]:not(.js > *) .tour-rail{display:none}
body[data-page="tour"]:not(.js > *) .tour-app{grid-template-columns:minmax(0,1fr)}
body[data-page="tour"]:not(.js > *) .tour-view + .tour-view{border-top:1px solid var(--line)}

/* Graphics layer (fx.css): HUD labels above the app frame, inside its corner brackets; a live dot on the hero timeline */
body[data-page="tour"] .mx-scope{--hud-inset:0px;padding-top:30px}
body[data-page="tour"] .mx-scope .hud--tl{max-width:62%}
body[data-page="tour"] .mx-scope .hud--tr{max-width:36%}
body[data-page="tour"] .tour-scene__live{display:inline-flex;align-items:center;gap:10px}