/* A1 Ask (QS-9): the 'ask' sheet at full height over the current screen, the ask box and the
   grouped results. Tokens only; rows reuse the list-row classes in components/components.css. */

.qsSheet[data-sheet="ask"] {
  height: 100vh;
  height: 100dvh;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.qsAsk__form {
  padding: var(--gap) var(--gutter);
}

.qsAsk__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-action);
  line-height: var(--lh-head);
}

.qsAsk__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: stretch;
}

/* The bar: the icon sits inside the input's left padding. */
.qsAsk__box {
  position: relative;
  display: flex;
  flex: 1 1 10em;
  min-width: 0;
}

.qsAsk__icon {
  position: absolute;
  top: 50%;
  left: 17px;
  display: flex;
  color: var(--primary);
  transform: translateY(-50%);
  pointer-events: none;
}

.qsAsk__input {
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--target-std);
  margin: 0;
  padding: 0 var(--gutter) 0 calc(17px + var(--icon) + 11px);
  border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-bar);
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.qsAsk__input:focus {
  border-color: var(--primary);
}

.qsAsk__input:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.qsAsk__go {
  flex: none;
}

.qsAsk__heading {
  margin: var(--gutter) var(--gutter) 8px;
  font-family: var(--font-head);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-head);
  line-height: var(--lh-head);
}

.qsAsk__group > .qsList > li {
  margin: 0;
}

.qsAsk__still {
  margin-top: var(--gutter);
}

@media (forced-colors: active) {
  .qsAsk__input {
    border-color: CanvasText;
  }

  .qsAsk__input:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* Long titles and place names wrap instead of pushing the sheet sideways (1.4.10). */
.qsAsk .qsRow__title,
.qsAsk .qsRow__sub {
  overflow-wrap: anywhere;
}

/* The comma between a row's lines: read by screen readers, not shown. */
.qsAsk__sep {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}