/* The shared pieces every v.5 screen is built from, translated from the boards' common CSS
   (design/v5, the <style> above "board"). Tokens are in base.css. */

/* Mono is a signal: live numbers, Ava's lines and keys. Nothing else. */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* for screen readers only */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Plain buttons: a neutral fill or nothing, one step up on hover, .18 while pressed, never a scale. */
.b { transition: background-color 120ms var(--ease), color 120ms var(--ease); }
button.b { background-color: transparent; }
.b.f { background-color: var(--fill); }
.b[aria-current="page"],
.b[aria-pressed="true"],
/* a button whose menu is open shows it the same way everywhere (UI-9e): the selected fill, as a pressed
   toggle does (a capsule's face is under its window then; a segment shows its pill instead) */
.b[aria-haspopup="menu"][aria-expanded="true"]:not([role="tab"]) { background-color: var(--sel); }
@media (hover: hover) {
  .b:hover:not(:disabled, [aria-selected="true"], [aria-current="page"], [aria-pressed="true"], [aria-haspopup="menu"][aria-expanded="true"]) { background-color: var(--fill); }
  .b.f:hover:not(:disabled, [aria-selected="true"], [aria-current="page"], [aria-pressed="true"], [aria-haspopup="menu"][aria-expanded="true"]) { background-color: var(--sel); }
}
.b:active:not(:disabled) { background-color: var(--press) !important; }

/* The segmented control, "the stretch": a plain pill slides to the target. The edge in the direction
   of travel moves first and the other follows 40 ms later, so it stretches, then settles. Its left and
   right are set where it's used (core/controls.js movePill); it moves on its pieces' transforms, a
   rounded left half, a straight middle and a rounded right half, so the compositor does the moving
   and its ends never squash. The pieces are solid and overlap, and the pill fades as one (--pill-a):
   see-through pieces showed a dark line where they met mid-move (UI-9h, measured in Safari). A mode
   tint sets --pill-c and --pill-a. */
.seg { position: relative; display: flex; }
.seg > .pill {
  --pill-c: var(--ink);
  --pill-a: var(--sel-a);
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: inherit;
  opacity: var(--pill-a);
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}
.pill > b { position: absolute; top: 0; bottom: 0; border-radius: inherit; background-color: var(--pill-c); transition: background-color 300ms var(--ease); }
/* each half reaches 1 px past the middle, under the next piece */
.pill > .pl { left: 0; width: calc(50% + 1px); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pill > .pr { right: 0; width: calc(50% + 1px); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pill > .pm { left: 0; width: 10px; border-radius: 0; transform: scaleX(0); transform-origin: 0 0; }
.seg > button { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; }

.fade { transition: opacity 160ms var(--ease); }
/* (a morph of width, height and corners went with the spaces capsule, 8 Nov: Safari re-lays out the
   page on each of its frames. Ava's panel, phase 6, morphs on transforms.) */

/* Floating things appear quickly: popovers and panels with pop, menus and toasts with rise. */
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.pop { animation: pop 200ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 200ms var(--ease) both; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The disclosure: whatever opens in the flow and pushes content animates its height instead of popping.
   <div class="disc [open] [clip]"><div>…</div></div>. Closed, it's out of the tab order. `clip` is for
   something that hangs out sideways, like the line-number gutter. In a flex gap, set --disc-gap to the
   gap's size so that closes too. */
.disc {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: calc(var(--disc-gap, 0px) * -1);
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 300ms var(--sp-smooth), margin-top 300ms var(--sp-smooth), opacity 200ms var(--ease), visibility 0s linear 300ms;
}
.disc > * { min-height: 0; overflow: hidden; }
.disc.clip > * { overflow: visible; overflow-y: clip; }
.disc.open {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Honest glass, on the floating layer only: real blur, a plain edge, no rims or tints. Never glass on
   glass: what sits on glass uses fills. `.ctl` is the lighter recipe for controls and capsules. */
.glass {
  border: 1px solid var(--sep);
  background: var(--glass-pane);
  box-shadow: var(--drop);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.glass.ctl {
  background: var(--glass-ctl);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--solid) !important; }
  .glass.ctl { background: var(--solid-ctl) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass.ctl { background: var(--solid-ctl) !important; }
}
@media (prefers-contrast: more) {
  .glass { border-color: var(--hc-edge) !important; background: var(--solid-contrast) !important; }
}

/* The reveal (core/reveal.js, UI-9c): a window that grows out of a control keeps its place and
   size, and its contents sit in four boxes and a carrier (`.rv-in`). While it grows the boxes clip round
   and slide on transforms, so their overlap goes from the control's rect to the window's; the carrier
   paints the window (its glass or fill, edge and shadow) and lays its contents out. */
.rv-host { display: flex; }
.rv { display: flex; flex: 1 1 auto; align-self: stretch; box-sizing: border-box; min-width: 0; min-height: 0; border-radius: inherit; }
.rv-in { display: block; }
/* A closed window (core/capsule.js `morphWindow`: the sidebar, the capsules' windows) stays laid out,
   hidden, ready to grow. Safari still draws a hidden box's backdrop-filter while something inside it is
   composited (the sidebar with its Bin open): closing the sidebar left a blurred pane over the note's
   left edge (UI-9h, measured on screen). Closed, a window's glass blurs nothing. */
.morph-win:not(.shown) .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* (its own four boxes, not a window's inside it) */
.rv-moving > .rv,
.rv-moving > .rv > .rv,
.rv-moving > .rv > .rv > .rv,
.rv-moving > .rv > .rv > .rv > .rv { overflow: hidden; }
/* a cross-fade's way out (core/motion.js `crossFade`): the old contents, laid over the new as they were */
/* (tripled, to outrank the glass's own !important fallbacks on a carrier it copies) */
.xf-out.xf-out.xf-out {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  margin: 0 !important;
  border-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

/* switching spaces (core/space-fade.js): the old view, laid over the app where it was, under the
   sidebar and the toolbar */
.xf-out.xf-out.xf-out.xf-view {
  inset: auto !important;
  top: var(--y) !important;
  left: var(--x) !important;
  width: var(--w) !important;
  max-width: none !important;
  height: var(--h) !important;
  z-index: 1;
}

/* Reduced motion: everything settles quickly and plainly. Ava's swarm slows down in its own code. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 150ms !important; }
}
/* (the same, with `.rm` on the root: tests, and core/motion.js's own check) */
:root.rm *, :root.rm *::before, :root.rm *::after { animation-duration: 1ms !important; transition-duration: 150ms !important; }
/* What's laid out once and moved by its animations alone (the reveal's boxes and the windows and menus
   they uncover) or by an animation of its own (a leaving toast): with nothing to transition of their own,
   reduced motion's 150 ms on every transition would slide the layout they're given (a toast's centring,
   the Focus panel's room for Custom ⌄, a rising menu's padding while it's measured: UI-9i audit) */
:root :is(.rv, .rv-host, .morph-win, .menu, .menu-anchor-head, .menu-title, .menu-sep, .toast-out) { transition: none !important; }

/* Stepping aside for an open menu (UI-10, core/menu-anchor.js `held`): what the menu takes over (its
   trigger's row) or covers (what's under it) fades out over 100 ms as it opens, and comes back over 160
   after 220 as it closes, a capsule face's timing. Hidden once out, so it leaves the tab order. */
.menu-aside { transition: opacity 160ms var(--ease) 220ms, visibility 0s, background-color 120ms var(--ease), color 120ms var(--ease); }
.menu-held .menu-aside { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 100ms var(--ease), visibility 0s linear 100ms, background-color 120ms var(--ease), color 120ms var(--ease); }
/* (a seg's pill keeps its own opacity, its tint's: only the timing is the step-aside's) */
.seg > .pill.menu-aside { transition: opacity 160ms var(--ease) 220ms; }
.menu-held .seg > .pill.menu-aside { transition: opacity 100ms var(--ease), visibility 0s linear 100ms; }
/* (a part that's a reveal's host, Find and Note Width: the rule above stops its transitions for reduced
   motion's sake, but its fade is its own, UI-10 audit) */
:root .menu-aside.rv-host { transition: opacity 160ms var(--ease) 220ms, visibility 0s !important; }
:root .menu-held .menu-aside.rv-host { transition: opacity 100ms var(--ease), visibility 0s linear 100ms !important; }