/* ---- the shell's chrome (#253): the rail's open workspace line, a hovered
   row's id, the header's glass once the window has scrolled, and the user
   menu ---- */

/* The open workspace's line above Overview (#250): its name, cut, and Close.
   Close is --rail-muted on --chrome, 5.11:1 (dark 6.93:1); folded, only
   Close stays. */
.aucra-open-ws {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin: 8px 10px 2px;
  padding: 0 0 0 14px;
  color: var(--chrome-ink);
}
.aucra-open-ws .aucra-open-ws-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--weight-bold);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.aucra-open-ws .q-btn.aucra-icon-btn {
  flex: 0 0 auto;
  color: var(--rail-muted);
}
.aucra-open-ws .q-btn.aucra-icon-btn:hover {
  color: var(--chrome-strong);
  background: var(--chrome-soft);
}
.aucra-collapsed .aucra-open-ws {
  justify-content: center;
  gap: 0;
  padding: 0;
}

/* A hovered clause row's id lifts with its words: --rail-muted would read
   4.51:1 on --chrome-soft (dark 5.94:1), --rail-text reads 12.8:1 (11.9:1).
   The active id stays --chrome-gold. */
a.aucra-clause:hover:not(.aucra-clause-active) .aucra-clause-id,
.aucra-clause-ref:hover:not(.aucra-clause-active) .aucra-clause-id {
  color: var(--rail-text);
}

/* A row's in progress dot: its gold reads 1.67:1 on the white chrome, so
   its ring takes --chrome-gold, 5.76:1 (the dark's gold 10.3:1). */
aside.q-drawer--left .aucra-dot-in_progress {
  border-color: var(--chrome-gold);
}

/* Scrolled (`header_scroll.js` puts `aucra-scrolled` on the root element):
   the header lets the page show through at 92 percent, blurred. Only its
   background changes, so nothing under it moves. It is solid at the top,
   under a pointer that hovers, while it holds a visible focus, where the
   blur is missing and for a reader who asks for less transparency. A touch
   screen keeps :hover and the focus on what was last tapped, so neither
   plain :hover nor :focus-within keeps it solid there. The light glass over
   a white panel is white, so the ratios on --chrome hold; over the ink
   buttons --rail-muted's icons read 4.37:1 and --chrome-gold 4.92:1. The
   dark glass over a panel is the panel; over the light ink buttons the
   icons' --rail-muted reads 5.69:1, the gold 8.42:1 and the text 11.4:1.
   The search field is opaque. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .aucra-scrolled .aucra-header:not(:has(:focus-visible)) {
    background: color-mix(in srgb, var(--chrome) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
@media (hover: hover) {
  .aucra-scrolled .aucra-header:hover {
    background: var(--chrome);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .aucra-scrolled .aucra-header:not(:has(:focus-visible)) {
    background: var(--chrome);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* The user menu (accounts area plan AA14): who is signed in, then Settings
   and Sign out as rows of one colour, the link and the form's button alike. */
.aucra-menu-body {
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  gap: 0;
}
.aucra-menu-who {
  gap: 3px;
  padding: 10px 10px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.aucra-menu-hint {
  font-size: 12px;
  color: var(--muted);
}
.aucra-menu-name {
  font-size: 14.5px;
  font-weight: var(--weight-bold);
  color: var(--text);
}
.aucra-menu-line {
  font-size: 12.5px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.aucra-menu-body .aucra-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-decoration-line: none;
  cursor: pointer;
}
.aucra-menu-body .aucra-menu-link:hover {
  background: var(--mist);
}
.aucra-menu-body .aucra-menu-link .q-icon {
  font-size: 18px;
  color: var(--text);
}
.aucra-menu-body .aucra-menu-form {
  width: 100%;
}
.aucra-menu-body .aucra-menu-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}