/* Quick Match Assistant (Track 2). Compact narrowing layer. Micro-polished for hierarchy + clarity.
   Refinements baked in:
   1) Stronger, calmer hierarchy for summary header (subtle accent + hover + open state)
   2) “Start here” badge upgraded (spacing, border, contrast, legibility)
   3) Status copy container tone improved (subtle callout styling, no new content required)
   4) Small strategic polish cues (better focus, reduced visual noise, consistent rounding)
*/

/* Container */
.md-typeset details.ssh-qm {
  margin: 0.85rem 0 1rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(47, 85, 151, 0.16);
  background: rgba(250, 251, 252, 0.9);

  /* 1) Subtle left accent to signal “interactive assistant” */
  border-left: 3px solid rgba(47, 85, 151, 0.22);
}

/* Summary. Robust layout so leading icon cannot overlap text */
.md-typeset details.ssh-qm > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;

  /* Key change */
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Remove default marker in supporting browsers */
.md-typeset details.ssh-qm > summary::-webkit-details-marker {
  display: none;
}

/* Improve keyboard focus without adding visual noise */
.md-typeset details.ssh-qm > summary:focus-visible {
  outline: 2px solid rgba(47, 85, 151, 0.35);
  outline-offset: 2px;
}

/* MkDocs Material icon wrapper. Add spacing and prevent overlap */
.md-typeset details.ssh-qm > summary .twemoji,
.md-typeset details.ssh-qm > summary .md-icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-right: 0.15rem;
}

/* Ensure svg behaves like text-size icon */
.md-typeset details.ssh-qm > summary .twemoji svg,
.md-typeset details.ssh-qm > summary .md-icon svg {
  width: 1em;
  height: 1em;
}

/* Chevron. Stop using float. Let flex do the layout */
.md-typeset details.ssh-qm > summary::after {
  content: "▸";
  opacity: 0.75;

  /* Key change */
  margin-left: auto;
  flex: 0 0 auto;
}

.md-typeset details.ssh-qm[open] > summary::after {
  content: "▾";
  opacity: 0.75;
}


/* Body */
.ssh-qm__body {
  padding-top: 0.4rem;
}

.ssh-qm__intro {
  margin: 0.15rem 0 0.55rem;
}

.ssh-qm__set {
  border: 0;
  padding: 0;
  margin: 0 0 0.6rem;
}

.ssh-qm__legend {
  font-weight: 560;
  margin-bottom: 0.25rem;
}

.ssh-qm__opt {
  display: block;
  padding: 0.12rem 0;
}

.ssh-qm__opt input {
  margin-right: 0.45rem;
}

/* Actions */
.ssh-qm__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.ssh-qm__btn {
  border-radius: 8px;
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.ssh-qm__btn:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.18);
}

.ssh-qm__btn:active:not([disabled]) {
  transform: translateY(0.5px);
}

.ssh-qm__btn:focus-visible {
  outline: 2px solid rgba(47, 85, 151, 0.35);
  outline-offset: 2px;
}

.ssh-qm__btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

.ssh-qm__btn--primary {
  border: 1px solid rgba(47, 85, 151, 0.30);
  background: rgba(47, 85, 151, 0.07);
}

/* 3) Status and results. Make status feel like calm guidance, not plain text */
.ssh-qm__status {
  margin-top: 0.45rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: rgba(47, 85, 151, 0.04);
  border: 1px solid rgba(47, 85, 151, 0.10);
}

.ssh-qm__result {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.12));
}

.ssh-qm__result-list {
  margin: 0.35rem 0 0.65rem;
}

/* Enforce hidden blocks stay hidden */
.ssh-qm__set[hidden] {
  display: none !important;
}

/* Row highlight. Additive and non-colour only */
#ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-primary,
.ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-primary {
  outline: 3px solid rgba(47, 85, 151, 0.42);
  outline-offset: -3px;
  position: relative;
}

#ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-secondary,
.ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-secondary {
  outline: 2px solid rgba(47, 85, 151, 0.26);
  outline-offset: -2px;
  position: relative;
}

/* 2) “Start here” badge upgraded */
#ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-primary::before,
.ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-primary::before,
#ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-secondary::before,
.ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-secondary::before {
  content: "Start here";
  position: absolute;
  top: 0.45rem;   /* more breathing room */
  left: 0.45rem;  /* more breathing room */
  font-size: 0.9rem;  /* improved legibility */
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 0.14rem 0.40rem;
  border-radius: 8px;

  /* More confident badge look */
  background: rgba(47, 85, 151, 0.10);
  border: 1px solid rgba(47, 85, 151, 0.20);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);

  /* Avoid accidental overlap effects */
  pointer-events: none;
}

/* Dark mode tuning */
[data-md-color-scheme="slate"] .md-typeset details.ssh-qm {
  background: rgba(15, 23, 42, 0.28);
  border: 1px solid rgba(165, 191, 252, 0.30);
  border-left: 3px solid rgba(111, 152, 255, 0.26);
}

[data-md-color-scheme="slate"] .md-typeset details.ssh-qm > summary:hover {
  background: rgba(111, 152, 255, 0.06);
}

[data-md-color-scheme="slate"] .md-typeset details.ssh-qm[open] > summary {
  background: rgba(111, 152, 255, 0.07);
}

[data-md-color-scheme="slate"] .md-typeset details.ssh-qm > summary:focus-visible,
[data-md-color-scheme="slate"] .ssh-qm__btn:focus-visible {
  outline: 2px solid rgba(111, 152, 255, 0.45);
}

[data-md-color-scheme="slate"] .ssh-qm__status {
  background: rgba(111, 152, 255, 0.06);
  border: 1px solid rgba(111, 152, 255, 0.18);
}

[data-md-color-scheme="slate"] #ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-primary,
[data-md-color-scheme="slate"] .ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-primary {
  outline: 3px solid rgba(111, 152, 255, 0.52);
}

[data-md-color-scheme="slate"] #ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-secondary,
[data-md-color-scheme="slate"] .ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-secondary {
  outline: 2px solid rgba(111, 152, 255, 0.34);
}

[data-md-color-scheme="slate"] #ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-primary::before,
[data-md-color-scheme="slate"] .ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-primary::before,
[data-md-color-scheme="slate"] #ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-secondary::before,
[data-md-color-scheme="slate"] .ssh-ft-table .ssh-ft-row.ssh-ft-row--qm-secondary::before {
  background: rgba(111, 152, 255, 0.14);
  border: 1px solid rgba(111, 152, 255, 0.28);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* Quick Match. Prevent leading icon from obscuring summary text */
.md-typeset details.ssh-qm > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem; /* creates reliable spacing between icon and text */
}

/* If the icon is rendered via twemoji SVG (common in MkDocs Material) */
.md-typeset details.ssh-qm > summary .twemoji {
  display: inline-flex;
  flex: 0 0 auto;
}

.md-typeset details.ssh-qm > summary .twemoji svg {
  width: 1em;
  height: 1em;
}

/* If your icon is a plain <img> instead of twemoji */
.md-typeset details.ssh-qm > summary > img {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* Fallback. if the icon is a real element, not a pseudo element */
.md-typeset details.ssh-qm > summary .twemoji,
.md-typeset details.ssh-qm > summary .md-icon,
.md-typeset details.ssh-qm > summary svg,
.md-typeset details.ssh-qm > summary img {
  position: static !important;
  transform: none !important;
  margin-right: 0.45rem;
}

/* Quick Match. kill any theme-injected icon that sits on the left */
.md-typeset details.ssh-qm > summary::before {
  content: none !important;
  display: none !important;
}

/* Quick Match. ensure the text starts cleanly at the left edge */
.md-typeset details.ssh-qm > summary {
  padding-left: 0.45rem; /* adjust if you want a touch more breathing room */
}