/* QPal assessment header refinement.
   Presentation only: compact the assessment header stack, use chevron navigation
   icons, and keep the orange/lower-surface transition aligned without touching
   assessment, timer, TTS, scoring, or data logic. */

:root {
  --qpal-assessment-header-stack-gap: 2px;
  --qpal-assessment-header-control-height: 34px;
  --qpal-assessment-right-control-width: 64px;
  --qpal-assessment-timer-ceiling-gap: 25px;
  --qpal-assessment-lower-ceiling-shift:
    calc(var(--qpal-assessment-card-overlap) + var(--qpal-assessment-header-stack-gap));
}

/* Use one visual grid for the orange controls without moving or rebinding any
   assessment DOM nodes. Row 1 keeps TTS at the upper-right. Row 2 is
   Back | Mode/Subject | Item count. Horizontal spacing remains independent. */
.qpal-assessment-top-region {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) var(--qpal-assessment-right-control-width);
  grid-template-rows:
    var(--qpal-assessment-header-control-height)
    var(--qpal-assessment-header-control-height);
  column-gap: 8px !important;
  row-gap: var(--qpal-assessment-header-stack-gap) !important;
  gap: var(--qpal-assessment-header-stack-gap) 8px !important;
  padding-bottom: 0 !important;
}

.qpal-assessment-primary-row,
.qpal-assessment-secondary-row {
  display: contents !important;
}

/* QPal back-navigation standard: a compact chevron instead of an arrow glyph.
   Existing back buttons keep their labels/behavior; only the icon shape changes. */
.back-dash-btn:not(.qpal-assessment-back-button)::before {
  content: "" !important;
  display: block !important;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The assessment control carries both the legacy .back-dash-btn pseudo-arrow
   and a text arrow from the presentation script. Suppress both visually and
   render the same chevron icon, geometrically centered inside the pill. */
.qpal-assessment-primary-row .qpal-assessment-back-button::before {
  content: none !important;
  display: none !important;
}

.qpal-assessment-primary-row .qpal-assessment-back-button {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: start;
  align-self: center;
  width: 38px !important;
  height: var(--qpal-assessment-header-control-height) !important;
  min-width: 38px !important;
  min-height: var(--qpal-assessment-header-control-height) !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  background: var(--surface-muted) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--inner-highlight) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
}

.qpal-assessment-primary-row .qpal-assessment-back-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qpal-assessment-primary-row .qpal-assessment-back-button:hover,
.qpal-assessment-primary-row .qpal-assessment-back-button:focus-visible {
  outline: none;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
  background: var(--surface-muted) !important;
  box-shadow: 0 0 0 3px var(--focus-ring), var(--inner-highlight) !important;
}

/* All four main top controls share one compact height. TTS and item count also
   share one right-column width so their right edges align exactly. */
.qpal-assessment-primary-row .qpal-tts-assessment-button,
.qpal-assessment-secondary-row .mode-badge,
.qpal-assessment-secondary-row .score-box {
  height: var(--qpal-assessment-header-control-height) !important;
  min-height: var(--qpal-assessment-header-control-height) !important;
  box-sizing: border-box !important;
}

.qpal-assessment-primary-row .qpal-tts-assessment-button,
.qpal-assessment-secondary-row .score-box {
  width: var(--qpal-assessment-right-control-width) !important;
  min-width: var(--qpal-assessment-right-control-width) !important;
  max-width: var(--qpal-assessment-right-control-width) !important;
  justify-content: center !important;
  justify-self: stretch !important;
  padding-inline: 8px !important;
  text-align: center;
  margin: 0 !important;
}

.qpal-assessment-primary-row .qpal-tts-assessment-button {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

/* Back now occupies the left side of the subject pill. The subject pill uses
   only the middle grid column, reducing its width while retaining ellipsis. */
.qpal-assessment-secondary-row .mode-badge {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.qpal-assessment-secondary-row .score-box {
  grid-column: 3 !important;
  grid-row: 2 !important;
  display: inline-flex;
  align-items: center;
}

/* Preserve the optional Mock Board section badge without widening the subject
   row. It uses the otherwise-empty upper-middle grid slot. */
.qpal-assessment-secondary-row .mock-board-section-badge {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start;
  align-self: center;
  max-width: 100% !important;
  margin: 0 !important;
}

/* QPal Pro is the previous/next reference. Its navigation uses the same
   centered chevron standard: back = left chevron, forward = mirrored right. */
.qpal-pro-carousel-arrow {
  position: relative;
  font-size: 0 !important;
}

.qpal-pro-carousel-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: currentColor;
}

.qpal-pro-carousel-arrow[data-qpal-pro-previous]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qpal-pro-carousel-arrow[data-qpal-pro-next]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Keep a 2px vertical handoff between the bottom orange control row and the
   rounded lower surface. The orange surface follows the lower ceiling by the
   same amount, so no visual gap opens between colors. */
.qpal-assessment-upper-surface {
  height: calc(
    var(--qpal-assessment-upper-height, 0px) +
    var(--qpal-assessment-lower-ceiling-shift)
  ) !important;
}

.qpal-assessment-lower-card::before {
  top: calc(
    var(--qpal-assessment-lower-ceiling-shift) -
    var(--qpal-assessment-card-overlap)
  ) !important;
}

/* Preserve the previously requested 25px timer-to-lower-ceiling distance even
   though the orange-header handoff changed from 1.5px to 2px. */
.qpal-assessment-lower-card {
  padding-top: var(--qpal-assessment-timer-ceiling-gap) !important;
}

.qpal-assessment-timer-row {
  min-height: 0 !important;
  margin-top: 0 !important;
}