/* Menomentis app components the design-system bundle does not ship: Menu, Dialog,
   ProjectRow, AuthDialog and AccountMenu. Loads after menomentis.css. Every value is a token from
   tokens.css; motion follows the brand book (120–160ms, cubic-bezier(0.2, 0, 0, 1)). */

@keyframes app-arrive-down {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--space-1)));
  }
}

@keyframes app-arrive-up {
  from {
    opacity: 0;
    transform: translateY(var(--space-1));
  }
}

@keyframes app-fade {
  from {
    opacity: 0;
  }
}

/* ---------- Menu ---------- */

/* Floats, so it is raised: bg-raised with shadow-raised, soft like the agent cards. */
.app-menu {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  margin-top: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-raised);
  border: var(--stroke-hairline) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  animation: app-arrive-down 120ms cubic-bezier(0.2, 0, 0, 1);
}

.app-menu--up {
  margin-top: 0;
  margin-bottom: var(--space-1);
  animation-name: app-arrive-up;
}

.app-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.app-menu__item:hover,
.app-menu__item:focus-visible {
  background: var(--bg-hover);
}

/* A quiet focus, as on fields: the line-strong rule, not the ochre ring. */
.app-menu__item:focus-visible {
  outline: var(--stroke-rule) solid var(--line-strong);
  outline-offset: 2px;
}

/* The current choice in a choice list: select-solid, as a picked segment. */
.app-menu__item--checked,
.app-menu__item--checked:hover,
.app-menu__item--checked:focus-visible {
  background: var(--select-solid);
  color: var(--ink-inverse);
}

/* Between groups of items: a hairline, as between rows inside one block. */
.app-menu__rule {
  height: var(--stroke-hairline);
  margin: var(--space-1) var(--space-2);
  background: var(--line-hairline);
}

/* A destructive item: the word in danger, danger-soft behind it on hover. */
.app-menu__item--danger {
  color: var(--danger);
}

.app-menu__item--danger:hover,
.app-menu__item--danger:focus-visible {
  background: var(--danger-soft);
}

/* ---------- Dialog ---------- */

/* A modal sheet: radius-xl, raised, over the one translucent fill. */
.app-dialog {
  width: min(400px, 100% - var(--space-8));
  max-width: none;
  max-height: calc(100% - var(--space-8));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: var(--stroke-hairline) solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: var(--shadow-raised);
}

.app-dialog:focus-visible {
  outline: var(--stroke-rule) solid var(--focus-ring);
  outline-offset: 2px;
}

.app-dialog[open] {
  animation: app-arrive-up 160ms cubic-bezier(0.2, 0, 0, 1);
}

.app-dialog::backdrop {
  background: var(--bg-scrim);
}

.app-dialog[open]::backdrop {
  animation: app-fade 160ms cubic-bezier(0.2, 0, 0, 1);
}

.app-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.app-dialog__title {
  margin: 0;
  color: var(--ink-strong);
}

.app-dialog__text {
  margin: 0;
  color: var(--ink-muted);
}

.app-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

/* ---------- ProjectRow ---------- */

/* A row in the project rail, shaped like a file in the FileNavigator. */
.app-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.app-row:hover,
.app-row--open {
  background: var(--bg-hover);
}

.app-row--fresh {
  animation: app-arrive-up 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* The whole name opens the project. */
.app-row__open {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.app-row__open:focus-visible {
  outline: var(--stroke-rule) solid var(--focus-ring);
  outline-offset: 2px;
}

/* A project name is set like a file name: the document face, truncated. */
.app-row__name {
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-row__meta {
  color: var(--ink-muted);
}

.app-row__more {
  display: flex;
  flex: none;
}

/* Where there is a pointer, the overflow waits for the row to be hovered or focused. */
@media (hover: hover) {
  .app-row__more {
    opacity: 0;
    transition: opacity 120ms cubic-bezier(0.2, 0, 0, 1);
  }

  .app-row:hover .app-row__more,
  .app-row:focus-within .app-row__more,
  .app-row--open .app-row__more {
    opacity: 1;
  }
}

/* ---------- AuthDialog ---------- */

.app-auth {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.app-auth__providers,
.app-auth__fields {
  display: flex;
  flex-direction: column;
}

.app-auth__providers {
  gap: var(--space-2);
}

.app-auth__fields {
  gap: var(--space-3);
}

/* "or" between two hairlines, as between rows inside one block. */
.app-auth__or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink-faint);
}

.app-auth__or::before,
.app-auth__or::after {
  content: "";
  flex: 1;
  height: var(--stroke-hairline);
  background: var(--line-hairline);
}

.app-auth__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

/* A word that moves the sheet to another step: text, underlined in line. */
.app-auth__link {
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* The line's own type, unless a type class says otherwise. */
:where(.app-auth__link) {
  font: inherit;
}

.app-auth__label-row .app-auth__link {
  color: var(--ink-muted);
}

.app-auth__link:hover:not(:disabled) {
  color: var(--ink-strong);
  text-decoration-color: currentColor;
}

.app-auth__link:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* Show or hide the password, inside the field's own edge. */
.app-auth__reveal {
  flex: none;
  padding: var(--space-1) 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.app-auth__reveal:hover:not(:disabled) {
  color: var(--ink-strong);
}

.app-auth__reveal:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* Quiet focus, as on fields and menu items: the line-strong rule. */
.app-auth__link:focus-visible,
.app-auth__reveal:focus-visible {
  outline: var(--stroke-rule) solid var(--line-strong);
  outline-offset: 2px;
}

.app-auth__again {
  display: flex;
}

.app-auth__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--stroke-hairline) solid var(--line-hairline);
}

.app-auth__foot-text {
  margin: 0;
  color: var(--ink-muted);
}

.app-auth__email {
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

/* A file name, set in the document face wherever it appears. */
.app-auth__file {
  font-family: var(--font-mono);
}

/* ---------- AccountMenu ---------- */

/* The logged-in person's address in the home bar, truncated like a name. */
.app-account {
  max-width: 28ch;
}

.app-account__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .app-menu,
  .app-menu--up,
  .app-dialog[open],
  .app-row--fresh {
    animation-name: app-fade;
  }
}