/* The top bar from the mockups: wordmark, the Mask/Unmask segmented control, the
   two workspace controls — the dictionary that masks and the detectors that
   point out what it missed — and the right-hand cluster of a language
   placeholder and two round page-level controls.

   The mockups' log-out button is still not built: this application has no
   backend, no accounts and no session (concept §9, F13), so there is nothing to
   log out of. The avatar and the help circle are, because both have somewhere
   real to go — the avatar to the profile name in the dictionary, the help circle
   to the dialog that explains the tool. The name itself is shown on the
   Dictionary button and edited in the panel it opens, since it names the
   dictionary rather than the bar. */

.appbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--colour-border-soft);
}

/* The heading is an image now, so its own line box would only add descender
   space under the logo and push the bar taller than the mockups draw it. */
.appbar__wordmark {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

/* Drawn at its own 80×40, so the logo is the tallest thing in the bar and sets
   its height. Height rather than width, because it is the bar's line the logo
   has to sit on. At 1:1 there is no pixel in reserve for a retina screen; the
   fix, if it ever looks soft, is a srcset naming logo-medium.png as the 3×. */
.appbar__logo {
  display: block;
  width: auto;
  height: 40px;
}

/* ------------------------------------------------------- direction segments */

/* A fieldset so the two radios keep the grouping and the legend a screen reader
   needs; the legend itself is dropped from the layout because the two labels
   say what the control is. */
.segmented {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 6%);
}

.segmented__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.85rem;
  border-radius: calc(var(--radius-pill) - 2px);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--colour-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

/* The radio covers its whole segment rather than being hidden: it keeps a real
   hit area, stays reachable by Tab and by Playwright's check(), and only its
   own painting is suppressed. */
.segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: inherit;
  background: none;
  opacity: 0;
  cursor: pointer;
}

.segmented__option:has(.segmented__input:checked) {
  background: var(--colour-ink);
  color: var(--colour-ink-text);
  font-weight: 600;
}

.segmented__option:has(.segmented__input:focus-visible) {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

.segmented__option:hover:not(:has(.segmented__input:checked)) {
  color: var(--colour-text);
}

/* -------------------------------------------------------- the right cluster */

.appbar__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The profile chip that used to sit here is gone: the name is on the Dictionary
   button now (dictionary.css), which is the control it belongs to. Saying it
   twice in one bar was saying it once too often. */

/* --------------------------------------------------------- language (dummy) */

.appbar__language {
  display: flex;
  min-width: 0;
}

.appbar__language-select {
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-small);
  background: var(--colour-surface);
  color: var(--colour-text);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.appbar__language-select:hover {
  border-color: var(--colour-accent);
}

.appbar__language-select:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- round icons */

.appbar__action {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--colour-border);
  border-radius: 50%;
  background: var(--colour-surface);
  color: var(--colour-text-muted);
  cursor: pointer;
}

.appbar__action:hover {
  border-color: var(--colour-accent);
  color: var(--colour-accent-ink);
}

.appbar__action:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

.appbar__action svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 40rem) {
  .appbar {
    padding: 0.6rem 1rem;
    gap: 0.5rem;
  }

  /* The cluster drops to its own line rather than squeezing the toggle, which is
     the control that has to stay thumb-sized. It stays a single row: three small
     controls that wrap individually read as three unrelated things. */
  .appbar__tools {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  /* The two round buttons are fixed-width, so the select is what gives up room
     first. */
  .appbar__language-select {
    max-width: 8rem;
  }
}