/* =====================================================
   Configuration-tool switcher (docs/javascripts/tool-switcher.js)
   One sticky switcher per chapter replaces the tab bar in each section.

   It must be noticed at first glance (review feedback: "I didn't realise there is a
   switch at all"), so the selected tool is filled with the brand red and the control
   has a visible border. Contrast (WCAG AA): border 3.6:1 against the track and 4:1
   against the page, red against the track 5.1:1, white on red 5.6:1, other labels 13:1.
   ===================================================== */

.trik-tool-bar {
  position: sticky;
  top: var(--trik-header-height, 2.4rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* The shadow shows the bar's edges, so it gets side padding, and reaches out by the
     same amount: the caption stays in line with the text, with room inside the bar. */
  margin: 0.5rem -0.6rem 1.25rem;
  padding: 0.5rem 0.6rem;
  background: var(--md-default-bg-color, #fff);
  border-bottom: 1px solid #e3e3e3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.trik-tool-bar__caption {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #424242;
}

.trik-tool-bar__options {
  display: flex;
  flex: 1;
  gap: 4px;
  max-width: 28rem;
  padding: 3px;
  background: #f5f5f5;
  border: 1px solid #808080;
  border-radius: 999px;
}

.trik-tool-bar__option {
  flex: 1;
  min-height: 2.2rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #292929;
  font-family: "Poppins", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* Hover only where there is a real pointer: on touch screens it can stick after a tap. */
@media (hover: hover) {
  .trik-tool-bar__option:not([aria-checked="true"]):hover {
    background: #e4e4e4;
  }
}

.trik-tool-bar__option[aria-checked="true"] {
  background: var(--md-primary-fg-color, #cb2215);
  border-color: var(--md-primary-fg-color, #cb2215);
  color: #fff;
}

.trik-tool-bar__option:focus-visible {
  outline: 3px solid #171717;
  outline-offset: 2px;
}

/* Headings inside a chapter with a switcher must not land under it. */
.trik-tool-region [id] {
  scroll-margin-top: calc(var(--trik-header-height, 2.4rem) + var(--trik-tool-bar-height, 4rem) + 0.5rem);
}

/* Hide the per-section tab bars only once the switcher is working, and only on
   screen: without JavaScript they stay, and the PDF prints each label. */
@media screen {
  .trik-tool-switcher-ready .trik-tool-region .tabbed-set.trik-tool-set > .tabbed-labels {
    display: none;
  }
}

@media print {
  .trik-tool-bar {
    display: none !important;
  }
}

/* Phone: the caption stays (it says what the choice does) on its own short line,
   and the choices take the full width. Kept tight because the bar is sticky. Names
   wrap at spaces only; three tools still fit at 320 px. */
@media screen and (max-width: 44.9375em) {
  .trik-tool-bar {
    display: block;
    margin: 0.35rem -0.6rem 0.9rem;
    padding: 0.25rem 0.6rem 0.35rem;
  }

  .trik-tool-bar__caption {
    display: block;
    margin-bottom: 0.15rem;
    line-height: 1.3;
  }

  .trik-tool-bar__options {
    max-width: none;
    padding: 2px;
  }

  /* The site's rem is 20 px, so the floor is 10.4 px: "TrikdisConfig" must fit a third
     of a 320 px screen. Never break inside a word (Material's typeset would). */
  .trik-tool-bar__option {
    min-width: 0;
    min-height: 2rem;
    padding: 0.2rem 0.1rem;
    font-size: clamp(0.52rem, 3.2vw, 0.76rem);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
}

/* Dark mode: a lighter tint of the brand red with dark text (6.7:1). */
body[data-md-color-scheme="slate"] .trik-tool-bar {
  border-bottom-color: var(--trik-border);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

body[data-md-color-scheme="slate"] .trik-tool-bar__caption {
  color: var(--trik-text-muted);
}

body[data-md-color-scheme="slate"] .trik-tool-bar__options {
  background: var(--trik-surface-3);
  border-color: #8794ac;
}

body[data-md-color-scheme="slate"] .trik-tool-bar__option {
  color: var(--trik-text);
}

@media (hover: hover) {
  body[data-md-color-scheme="slate"] .trik-tool-bar__option:not([aria-checked="true"]):hover {
    background: #394259;
  }
}

body[data-md-color-scheme="slate"] .trik-tool-bar__option[aria-checked="true"] {
  background: #f18b80;
  border-color: #f18b80;
  color: var(--trik-surface-1);
}

body[data-md-color-scheme="slate"] .trik-tool-bar__option:focus-visible {
  outline-color: #fff;
}