/* Motion for the app pages (2026-10-04): "Tab switch animation has to be
   there. Can you fix all animations wherever it's possible."
   js/transitions.js puts one .ind in each choice control and slides it; this
   file draws each .ind to look exactly like the highlight it replaces, and
   adds open / close motion to menus and the popup. Only additions — nothing
   in console.css or planner.css is edited. Off under reduced motion. */

:root{ --ind-ease:cubic-bezier(.32,.72,0,1); --ind-ms:.42s }

/* ---------- the sliding indicator, shared ---------- */
[data-ind]{position:relative; isolation:isolate}
[data-ind] > .ind{position:absolute; left:0; top:0; z-index:0; pointer-events:none; display:block; font-style:normal;
  will-change:transform, width, height;
  transition:transform var(--ind-ms) var(--ind-ease), width var(--ind-ms) var(--ind-ease), height var(--ind-ms) var(--ind-ease), opacity .2s}
[data-ind] > :not(.ind){position:relative; z-index:1}

/* the sidebar: the white pill */
.side-nav > .ind{background:#fff; border-radius:999px}
.side-nav[data-ind] .nav-a.on,
.side-nav[data-ind] .nav-a.on:hover{background:transparent}
.side-nav .nav-a, .side-nav .nav-a .i{transition:background .2s, color .25s}
.side-nav[data-travel] .nav-a.on,
.side-nav[data-travel] .nav-a.on .i{color:#fff}
.side-nav[data-travel] .nav-a.on .nav-m{background:rgba(255,255,255,.18); color:#fff}

/* My Space tabs: the blue pill */
.tabs > .ind{background:var(--blue); border-radius:999px}
.tabs[data-ind] .tab[aria-selected="true"]{background:transparent}
.tabs[data-travel] .tab[aria-selected="true"]{color:var(--ink-3)}
/* …except Path Planner's, which are an underline (planner.css): the line slides */
.main-myspace .tabs > .ind{background:none; border-radius:0}
.main-myspace .tabs > .ind::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background:var(--navy)}
.main-myspace .tabs[data-ind] .tab[aria-selected="true"]::after{display:none}
.main-myspace .tabs .tab-n{transition:background-color .2s, color .2s}
.main-myspace .tabs[data-travel] .tab[aria-selected="true"] .tab-n{background:var(--sky-10); color:var(--ink-2)}

/* small segmented switches: the white pill */
.seg > .ind, .vswitch > .ind{background:#fff; border-radius:999px}
.seg[data-ind] button[aria-pressed="true"], .vswitch[data-ind] button[aria-pressed="true"]{background:transparent}
.seg[data-travel] button[aria-pressed="true"], .vswitch[data-travel] button[aria-pressed="true"]{color:var(--ink-3)}

/* Day / Month in the planner */
.pl-seg > .ind{background:#fff; border-radius:999px; box-shadow:0 1px 2px rgba(16,34,64,.1)}
.pl-seg[data-ind] .pl-seg-b.on{background:transparent; box-shadow:none}
.pl-seg[data-travel] .pl-seg-b.on{color:var(--ink-2)}

/* a world's route tabs (they also follow the scroll) */
.wnav-tabs > .ind{background:var(--navy); border-radius:999px}
.wnav-tabs[data-ind] .wtab.on{background:transparent}
.wnav-tabs[data-travel] .wtab.on{color:var(--ink-3)}
.wnav-tabs[data-travel] .wtab.on small{color:var(--ink-4)}

/* the planner's day strip: the navy circle moves between days */
.pl-strip > .ind{background:var(--navy); border-radius:50%}
.pl-strip[data-ind] .pl-dt[aria-selected="true"] .pl-dt-n{background:transparent}
.pl-strip .pl-dt-n{transition:background-color .2s, color .25s}
.pl-strip[data-travel] .pl-dt[aria-selected="true"] .pl-dt-n{color:var(--navy)}

/* ---------- menus open and close instead of blinking ---------- */
.fmenu, .menu{transition:opacity .18s ease, translate .22s var(--ease), display .22s allow-discrete, overlay .22s allow-discrete}
.fmenu[hidden], .menu[hidden]{opacity:0; translate:0 -6px}
.menu[hidden]{translate:0 6px}
@starting-style{
  .fmenu:not([hidden]){opacity:0; translate:0 -6px}
  .menu:not([hidden]){opacity:0; translate:0 6px}
}
.fscrim{transition:opacity .2s ease, display .2s allow-discrete}
.fscrim[hidden]{opacity:0}
@starting-style{ .fscrim:not([hidden]){opacity:0} }

/* ---------- the popup closes the way it opened ---------- */
.dlg{transition:opacity .22s ease, translate .26s var(--ease), scale .26s var(--ease), display .26s allow-discrete, overlay .26s allow-discrete}
.dlg:not([open]){opacity:0; translate:0 14px; scale:.985}
.dlg::backdrop{transition:opacity .22s ease, display .26s allow-discrete, overlay .26s allow-discrete}
.dlg:not([open])::backdrop{opacity:0}

/* ---------- small things that should not snap ---------- */
.tab-n, .nav-m{transition:background-color .2s, color .2s}

@media (prefers-reduced-motion:reduce){
  [data-ind] > .ind, .fmenu, .menu, .fscrim, .dlg, .dlg::backdrop{transition:none}
}

/* ---------- moving between pages ----------
   The old page stays on screen until the new one is drawn, then only the
   main column cross-fades; the sidebar stays put and its pill slides (from
   transitions.js). On these arrivals the long "rise" every block used to do
   on load is skipped (html.in-app), because it washed the whole page out for
   most of a second each time. */
@view-transition{navigation:auto}
.col{view-transition-name:app-col}
::view-transition-old(root){display:none}
::view-transition-new(root){animation:none}
::view-transition-group(app-col){animation:none}
::view-transition-old(app-col){animation:vt-out .16s ease both}
::view-transition-new(app-col){animation:vt-in .36s cubic-bezier(.22,1,.36,1) .05s both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0; transform:translateY(10px)}}
html.in-app .boot .rv{animation:none}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}