/* Shared UI pieces from core: status pill, popup menu, toast, small buttons. */

/* The toast (core/toast.js): bottom-centre, above whatever else floats. Its slot is a point on the
   window's bottom edge that core/float-place.js moves on a transform to the note area's centre line, 12 px
   above the page bar (or 24 px above the window's bottom); it moves along as that line moves */
.toast-slot {
  position: fixed;
  z-index: 70;
  bottom: 0;
  left: 50%;
  display: flex;
  justify-content: center;
  width: 0;
  pointer-events: none;
  transition: transform 380ms var(--sp-smooth);
}

.toast,
.toast-out {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  max-width: min(560px, var(--float-w, calc(100vw - 32px)));
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  color: var(--fg);
  font-size: 12px;
  pointer-events: auto;
}
/* with a button (UI-10, a pill's padding): the button inset as far from the right as from the top and
   bottom (4 from the edge, 3 inside its hairline), and the words as far from the left end as the button's
   are from the right (14) */
.toast:has(.toast-act),
.toast-out:has(.toast-act-out) { padding: 0 3px 0 13px; }
/* leaving (core/toast.js `leave`): out of the flow where it was, so the next one rises in its place */
.toast-out { position: absolute; bottom: 0; left: 0; translate: -50% 0; pointer-events: none; }

.toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toast-act,
.toast-act-out {
  flex: none;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  color: var(--fg-strong);
  font: inherit;
  font-weight: 600;
}

/* A menu (core/menu.js). Its contents sit in the reveal's boxes (core/reveal.js), so its paint is on the
   carrier (`.menu-in`) and its items in one list that fades as one. Opened from a button it grows out
   of it and shrinks back (`.grow`, core/menu-grow.js); a right-click menu pops up (UI-9e). */
.menu {
  position: fixed;
  z-index: 60;
  min-width: 180px;
  border-radius: 14px;
}
.menu:not(.grow) { animation: pop 200ms var(--ease) both; }
.menu.closing { pointer-events: none; }
/* menus are solid (UI-9g): nothing behind them reads through */
/* (its hairline is an inset shadow, so it takes no room: rows sit 4 from its edge and words 10, in every
   menu. With a border, a menu grown from a button had them 5 and 11: UI-11 sweep #21) */
.rv.menu-in {
  display: block;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--solid);
  box-shadow: inset 0 0 0 1px var(--sep), var(--drop);
}
.menu-list { display: flex; flex-direction: column; }
@media (prefers-contrast: more) {
  .rv.menu-in { background: var(--solid-contrast); box-shadow: inset 0 0 0 1px var(--hc-edge), var(--drop); }
}

/* A menu anchored on its trigger (core/menu-anchor.js, UI-9g): the trigger is its header row, and it
   keeps that edge as it grows. In a pane it sits 4 px from the pane's edges; its hairline is an inset
   shadow, so it takes no layout. Solid from its first frame (UI-9h): only its items fade. */
.menu.anchored .rv.menu-in { position: relative; border: 0; background: var(--solid); box-shadow: inset 0 0 0 1px var(--sep), var(--drop); }
@media (prefers-contrast: more) {
  .menu.anchored .rv.menu-in { background: var(--solid-contrast); box-shadow: inset 0 0 0 1px var(--hc-edge), var(--drop); }
}
.menu-anchor-head { position: relative; flex: none; margin: 0 -4px; }
/* a control's own corners (Custom ⌄'s switch, UI-10), where they aren't a menu's */
.own-r,
.own-r .rv.menu-in,
.own-r .rv.f-pmenu-in { border-radius: var(--menu-r); }
/* grown from a fill on the page (UI-10: Note Options' group, Custom ⌄'s switch): its solid fill and edge
   are a layer of their own, fading in over 240 ms as it grows (on opacity, never a colour change), so the
   fill under it reads as fading into the menu */
.menu.fades .rv.menu-in,
.f-pmenu.fades .rv.f-pmenu-in { background: none; box-shadow: none; }
.menu-bg { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--solid); box-shadow: inset 0 0 0 1px var(--sep), var(--drop); pointer-events: none; }
@media (prefers-contrast: more) { .menu-bg { background: var(--solid-contrast); box-shadow: inset 0 0 0 1px var(--hc-edge), var(--drop); } }
.menu.fades .rv.menu-in,
.f-pmenu.fades .rv.f-pmenu-in { position: relative; isolation: isolate; }
/* the trigger's stand-in, exactly over it. It never lights up (UI-9h, V5Morph's `.hdb`): hovered or
   pressed it changes nothing, and a click on it closes the menu */
.menu-trigger { position: absolute; margin: 0; box-shadow: none; white-space: nowrap; }
.anchored .menu-trigger.b,
.anchored .menu-trigger.b:hover,
.anchored .menu-trigger.b:active:not(:disabled),
.anchored .menu-trigger button,
.anchored .menu-trigger .b { background-color: transparent !important; }
.menu-trigger * { pointer-events: none; }
/* the copies of what a header is in draw nothing of their own, not even a scrim (UI-9h: the note area's
   ::before dimmed the section's and Note Options' headers) */
.stand-wrap::before,
.stand-wrap::after { content: none !important; }
/* a row or pill that holds the ⋯ it opened from (UI-9h): it's the header, with its selected fill */
.anchored .menu-trigger.menu-head-sel { background-color: var(--sel) !important; }
.menu-trigger .car { transition: transform 380ms var(--sp-smooth); }
.menu-trigger.turned .car { transform: rotate(180deg); }
/* the trigger itself, while its stand-in is showing; closing, it's back under the panel, unfilled */
.menu-src { opacity: 0; }
.b.menu-src-out { background-color: transparent !important; }
/* the label naming the menu, on the header's other side */
.menu-title { position: absolute; display: flex; align-items: center; color: var(--muted); font: 500 12px var(--font-ui); white-space: nowrap; pointer-events: none; }
.menu-title.left { left: 14px; }
.menu-title.right { right: 14px; }
.menu.anchored .menu-sep { margin: 4px 10px; }
/* a capsule's menu (All Tabs): its ⋯ stays where it was as a 28 px circle, inset 4, and like every
   open header never lights up (UI-9h); the label lines up with the items' words */
.menu.capsule .menu-trigger { display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px; color: var(--fg); }
.menu.capsule .menu-title { left: 36px; }
.menu.capsule .menu-title.from-right { right: 36px; left: auto; }

.menu-item {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--fg);
  font: 400 13px var(--font-ui);
  text-align: left;
  white-space: pre;
}

/* the item under the pointer: one fill step. The keyboard is moved to the first item as the menu
   opens, but that's only shown when the menu was opened from the keyboard, or once a key is pressed
   (UI-9d: core/modality.js marks a menu opened by the pointer `.by-pointer`) */
.menu-item:hover { background: var(--fill); }
/* pressed, one step past hover, as every button (the skill's §7; UI-9i audit: items had no press) */
.menu-item:active:not(:disabled) { background: var(--press); }
.menu-item:focus:not(:focus-visible),
.menu.by-pointer .menu-item:focus { outline: none; }
/* the keyboard's item: the selection fill and the focus ring, drawn inside the menu */
.menu:not(.by-pointer) .menu-item:focus-visible { background: var(--sel); outline-offset: -2px; }
.menu-item:disabled { opacity: .4; }
.menu-item.danger,
.menu-item.armed { color: var(--drift-text); }

.menu-head { padding: 4px 10px 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.menu-head b { display: block; color: var(--fg); font-size: 13px; font-weight: 600; }
.menu-head span { font-size: 12px; font-weight: 400; }
.menu-sep { display: block; flex: none; height: 1px; margin: 4px 8px; background: var(--sep); }
/* an item's extras: a tick column, quiet words, a count, its shortcut */
.mi-label { flex: 1; min-width: 0; overflow: hidden; line-height: 20px; text-overflow: ellipsis; }
.mi-tick { display: inline-flex; flex: none; width: 14px; color: var(--fg-strong); opacity: 0; }
.mi-tick.on { opacity: 1; }
.mi-sub,
.mi-hint { flex: none; color: var(--muted); font-size: 11px; }
.mi-key { flex: none; color: var(--faint); font-size: 11px; }
/* an item with a second action at its row's right end (All Tabs' Delete, UI-14f): a 24 px circle, 2 in from
   the 28 px row (concentric with its radius 10), shown on hover or with the keyboard on the item, over the
   item's shortcut, which steps aside */
.mi-row { position: relative; display: flex; flex-direction: column; }
.mi-side { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; color: var(--muted); opacity: 0; }
/* (with the keyboard on the item only once it shows: opened by the pointer, the first item holds it unseen) */
.mi-row:hover .mi-side,
.menu:not(.by-pointer) .mi-row:focus-within .mi-side { opacity: 1; }
.mi-row:hover .mi-key,
.menu:not(.by-pointer) .mi-row:focus-within .mi-key { visibility: hidden; }
/* (an item with no shortcut keeps its words clear of the action, review) */
.mi-row:hover > .menu-item:not(:has(.mi-key)),
.menu:not(.by-pointer) .mi-row:focus-within > .menu-item:not(:has(.mi-key)) { padding-right: 30px; }

/* the Spaces menu (design/v5/V5Work.dc.html): 224 wide, icons, where you are selected with its icon in the accent */
.menu.spaces-menu { width: 224px; }
.spaces-menu .menu-list { gap: 2px; }
.mi-ic { display: inline-flex; flex: none; color: var(--muted); }
.mi-ic.blank { width: 15px; }
.menu-item.current { background: var(--sel); color: var(--fg-strong); }
.menu-item.current .mi-ic { color: var(--accent-text); }
.spaces-menu .mi-label { flex: 1; }

/* the account menu: who's signed in, and how old the last backup is (red once it's late) */
.menu.acct-menu { min-width: 224px; }
.acct-head { padding: 6px 10px 8px; line-height: 1.4; }
.menu-head.menu-backup { padding: 4px 10px 2px; font-weight: 400; }
.menu-backup.late { color: var(--drift-text); }

/* Shared small buttons (table bar, export bar) */
.chip-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--tedge);
  border-bottom-width: 2px;
  border-radius: 2px;
  background: var(--tab);
  color: color-mix(in srgb, var(--fg) 80%, var(--muted));
  font: 500 12px var(--font-ui);
  cursor: default;
  transition: border-color .12s, color .12s;
}

.chip-btn:active { transform: translateY(1px); }

@media (hover: hover) {
  .chip-btn:hover { border-color: var(--accent); color: var(--accent-text); }
  .chip-btn.danger:hover { border-color: var(--danger); color: var(--drift-text); }
}
.chip-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--sel-bg); color: var(--fg); }
.chip-btn.danger { color: var(--drift-text); }
.chip-btn.danger.solid { border-color: var(--danger); background: var(--danger); color: var(--bg); }