/* Add one statistic to the existing navbar; preserve its sticky behaviour. */
.efp-counter-bar { min-width: 0; max-width: 100%; flex-wrap: wrap; }
/* One thin outer frame for each quiz scorebar at every viewport size. Replace
   existing edges rather than stacking outlines around the native borders. */
html { --efp-scorebar-border: #b8863f; }
html.efp-black, body.dark { --efp-scorebar-border: #d1a65f; }
/* Legacy light quizzes are inverted by black-mode.js. This pre-filter shade
   renders as the same lighter gold after invert(1) hue-rotate(180deg). */
html.efp-black-invert { --efp-scorebar-border: #7c510a; }
.score-bar, .set-score-bar,
#app > .max-w-3xl > .flex.items-center.justify-between.mb-3,
#quizView > .quiz-head,
.toolbar:has(#scoreTxt) > :is(.barcard, .bar),
.efp-mobile-scorebar, .desktop-sticky-score {
  box-sizing: border-box;
  border: 1px solid var(--efp-scorebar-border) !important;
}
/* Give Blackbook's desktop score row breathing room above its new bottom edge. */
.desktop-sticky-score { padding-bottom: .45rem; }
/* Keep shared quiz Reset controls visible on every device, including the
   Blackbook header. Mobile icon-only controls retain their compact sizing. */
body .efp-quiz-reset-btn {
  box-sizing: border-box;
  border: 2px solid #d92d20 !important;
  background: #fff1f2 !important; color: #b42318 !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 5px rgba(180,35,24,.18);
}
body .efp-quiz-reset-btn:hover { background: #ffe4e6 !important; }
body .efp-quiz-reset-btn:focus-visible {
  outline: 3px solid #d9a84e; outline-offset: 2px;
}
html.efp-black .efp-quiz-reset-btn {
  background: #3a171d !important; color: #ffd4d4 !important;
  border-color: #e87575 !important;
}
/* The requested quiz families use square, viewport-flush sticky scorebars on
   desktop, mobile and installed apps. Keep native counter/button layouts. */
html.efp-square-scorebars :is(
  .score-bar, .set-score-bar,
  #app > .max-w-3xl > .flex.items-center.justify-between.mb-3,
  #quizView > .quiz-head,
  .toolbar:has(#scoreTxt)
) {
  top: 0 !important;
  border-radius: 0 !important;
}
/* CA's visible card sits inside the sticky wrapper. Both edges must be flush. */
html.efp-square-scorebars .toolbar:has(#scoreTxt) {
  padding-top: 0 !important;
  background: var(--bg, #f6f2e9) !important;
}
html.efp-square-scorebars .toolbar:has(#scoreTxt) > :is(.barcard, .bar) {
  border-radius: 0 !important;
  background: var(--card, #fff) !important;
}
/* Opaque surfaces hide questions scrolling underneath. Light book/OP pages
   keep their light colour before the site's existing dark-mode inversion. */
html.efp-square-scorebars #app > .max-w-3xl > .flex.items-center.justify-between.mb-3 {
  background: #f7f4ee !important;
}
html.efp-square-scorebars.efp-black #app > .max-w-3xl > .flex.items-center.justify-between.mb-3 {
  background: #0d1726 !important;
}
html.efp-square-scorebars #quizView > .quiz-head {
  background-color: #07101d;
}
/* Phone scorebars sit flush against the viewport when they stick. Include
   landscape phones without changing the desktop toolbar spacing. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .score-bar, .set-score-bar,
  #app > .max-w-3xl > .flex.items-center.justify-between.mb-3,
  #quizView > .quiz-head,
  .efp-mobile-scorebar, .sticky-nav,
  .toolbar:has(#scoreTxt) {
    top: 0 !important;
  }
  /* CA's card is inside the sticky toolbar; remove the outer top gap only. */
  .toolbar:has(#scoreTxt) { padding-top: 0 !important; }
}
/* A single thin row, using Current Affairs' gold progress colour. */
.efp-counter-bar > .efp-quiz-progress {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  flex: 1 0 100%; width: 100%; grid-column: 1 / -1;
  height: 12px; line-height: 1; padding: 0; margin: 0;
}
.efp-quiz-progress-track {
  flex: 1; min-width: 0; height: 4px; overflow: hidden;
  border-radius: 999px; background: rgba(100,116,139,.22);
}
.efp-quiz-progress-fill {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg,#b88628,#d9a84e); transition: width .2s ease;
}
.efp-quiz-progress-pct {
  flex: 0 0 auto; font-family: inherit; font-size: 10px; line-height: 1;
  font-weight: 600; font-variant-numeric: tabular-nums; color: inherit;
}
.efp-blackbook-counts.efp-counter-bar > .efp-quiz-progress {
  flex: 0 1 120px; width: 120px;
}
/* Original Practice progress spans the whole sticky toolbar. */
#app .efp-op-progress-toolbar { padding-bottom: 22px !important; }
#app .efp-op-progress-toolbar > .efp-op-counts { position: static; }
#app .efp-op-counts > .efp-quiz-progress {
  position: absolute; left: 10px; right: 10px; bottom: 5px; width: auto;
}
@media (prefers-reduced-motion: reduce) {
  .efp-quiz-progress-fill { transition: none; }
}
.efp-unattempted { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.efp-unattempted-value { font-weight: inherit; font-variant-numeric: tabular-nums; }
/* Match each native score row instead of making the remaining count heavier. */
.score-bar > .efp-unattempted, .set-score-bar > .efp-unattempted { color: #2c3e50; }
.ef-native-score-chip > .efp-unattempted-value { font-weight: bolder; }
.efp-op-counts { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.efp-op-counts > span { white-space: nowrap; }
.efp-blackbook-counts { flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
.efp-blackbook-counts > .efp-unattempted { flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; }
.efp-blackbook-counts .efp-unattempted-value { font-size: 1.875rem; font-weight: 900; }
.desktop-sticky-score.efp-counter-bar { flex-wrap: wrap; }
.efp-blackbook-total {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; white-space: nowrap; font-weight: 600;
}
.efp-blackbook-total-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.desktop-sticky-score .efp-blackbook-total-value { font-size: 1.125rem; }
.desktop-sticky-score > .efp-unattempted .efp-unattempted-value { font-size: 1.125rem; font-weight: 800; }
.efp-mobile-scorebar > .efp-blackbook-total { color: rgb(71 85 105); }
.efp-mobile-scorebar > .efp-unattempted { color: rgb(71 85 105); font-weight: 600; }
.efp-mobile-scorebar > .efp-unattempted .efp-unattempted-value { font-size: 1.125rem; font-weight: 700; }
html.efp-black .efp-op-counts > .efp-unattempted { background: #263445; color: #f8fafc; }

@media (max-width: 700px) {
  #app .efp-op-counts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 0 100%; width: 100%; gap: 5px;
  }
  #app .efp-op-counts > span { min-width: 0; font-size: 11px; padding: 4px 6px; }
  #scoreTxt.ef-native-score.efp-counter-bar,
  .toolbar > .barcard > .row:first-child.efp-rp-native-score-row #scoreTxt.ef-native-score.efp-counter-bar,
  .toolbar > .bar > .row:first-child.efp-rp-native-score-row #scoreTxt.ef-native-score.efp-counter-bar {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important; gap: 5px !important;
  }
}

/* Original Practice: spread desktop counters across the available width. */
@media (min-width: 701px) and (pointer: fine), (min-width: 1025px) {
  #app .efp-op-progress-toolbar > .efp-op-counts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1; width: auto; margin-left: clamp(12px, 2vw, 30px);
    column-gap: clamp(8px, 2vw, 32px); align-items: center;
  }
  #app .efp-op-counts > span { justify-self: center; }
  #app .efp-op-counts > span:first-child { justify-self: start; }
  #app .efp-op-counts > .efp-unattempted { justify-self: end; }
}
/* Put Chapters beside both mobile counter rows instead of above them. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  #app .efp-op-progress-toolbar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) max-content;
    align-items: center; gap: 5px 6px;
  }
  #app .efp-op-progress-toolbar > .efp-op-counts { display: contents; }
  #app .efp-op-counts > span {
    min-width: 0; font-size: clamp(8.5px, 2.7vw, 11px);
    line-height: 1.35; padding: 4px 6px;
  }
  #app .efp-op-progress-toolbar > button {
    grid-column: 3; grid-row: 1 / span 2;
    align-self: center; justify-self: end;
    min-height: 40px; padding: 5px 6px; margin: 0;
    font-size: clamp(9px, 2.6vw, 11px); line-height: 1.2;
    white-space: nowrap;
  }
}

/* Four Blackbook counters in one row wherever its native desktop bar is shown. */
.desktop-sticky-score > .efp-blackbook-score-group { display: contents; }
@media (min-width: 640px) {
  .desktop-sticky-score.efp-counter-bar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 8px; font-size: clamp(11px, 1.6vw, 14px);
  }
  .desktop-sticky-score > .efp-blackbook-total,
  .desktop-sticky-score > .efp-blackbook-score-group {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    grid-row: 1;
  }
  .desktop-sticky-score > .efp-blackbook-total {
    grid-column: 1; justify-self: start;
  }
  .desktop-sticky-score > .efp-blackbook-score-group:has(> .score-value) {
    grid-column: 2; justify-self: center;
  }
  .desktop-sticky-score > .efp-blackbook-score-group:has(> .wrong-value) {
    grid-column: 3; justify-self: center;
  }
  .desktop-sticky-score > .efp-unattempted {
    grid-column: 4; grid-row: 1; justify-self: end;
  }
  .desktop-sticky-score > span[aria-hidden="true"] { display: none; }
}

/* Desktop book quizzes keep Reset in the counters row, even when it is
   appended after the full-width progress bar. Exclude landscape phones. */
@media (min-width: 701px) and (pointer: fine), (min-width: 1025px) {
  .score-bar.efp-counter-bar:has(> .efp-quiz-reset-btn) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) max-content;
  }
  .score-bar.efp-counter-bar > .efp-quiz-reset-btn {
    grid-column: 5; grid-row: 1; justify-self: end;
  }
  .score-bar.efp-counter-bar:has(> .efp-quiz-reset-btn) > .efp-quiz-progress {
    grid-row: 2;
  }
}

/* Static book quizzes and Bihar sets only. Keep Reset beside both counter
   rows, instead of giving the button an otherwise empty third sticky row.
   Coarse-pointer landscape phones use the same compact mobile layout. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .score-bar.efp-counter-bar, .set-score-bar.efp-counter-bar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center; gap: 4px 8px; padding: 8px 10px;
    border-radius: 10px;
  }
  .score-bar.efp-counter-bar > .score-item,
  .set-score-bar.efp-counter-bar > .score-item {
    min-width: 0; font-size: clamp(10px, 2.7vw, 12px);
    line-height: 1.35; white-space: nowrap;
  }
  .score-bar.efp-counter-bar:has(> .efp-quiz-reset-btn) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 34px;
  }
  .score-bar.efp-counter-bar > .efp-quiz-reset-btn {
    grid-column: 3; grid-row: 1 / span 2; justify-self: end;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; min-width: 34px; padding: 0;
    margin: 0; font-size: 0; border-radius: 9px;
  }
  .score-bar.efp-counter-bar > .efp-quiz-reset-btn::before {
    content: "\21bb"; font-size: 19px; line-height: 1;
  }
  .set-score-bar.efp-counter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    /* Keep the left edge flush when the mobile scorebar sticks. */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .set-score-bar.efp-counter-bar > .current-set-badge {
    grid-column: 3; grid-row: 1 / span 2;
    align-self: center; justify-self: center; white-space: nowrap;
    font-size: 10px; line-height: 1.2; padding: 2px 7px;
    margin: 0; border-radius: 5px;
  }
}
@media (max-width: 639px) {
  .efp-mobile-scorebar.efp-counter-bar {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    /* Keep both golden side edges clear of mobile viewport/app clipping. */
    width: calc(100% - 12px); margin-inline: 6px;
    /* Override the bookmark script's legacy !important centering. Equal
       fractional rows keep the native divs and added spans the same size. */
    grid-template-rows: repeat(2, minmax(36px, 1fr)) 12px;
    align-items: stretch !important; gap: 6px !important; padding: 6px 8px !important;
  }
  .efp-mobile-scorebar.efp-counter-bar > .efp-blackbook-total,
  .efp-mobile-scorebar.efp-counter-bar > div:not(.efp-quiz-progress),
  .efp-mobile-scorebar.efp-counter-bar > .efp-unattempted {
    display: flex; flex-direction: row; align-items: center;
    justify-content: center; align-self: stretch; justify-self: stretch;
    min-width: 0; min-height: 36px;
    box-sizing: border-box; padding: 5px 6px; margin: 0;
    border: 1px solid #dce3eb; border-radius: 4px;
    background: #f1f5f9;
    gap: 5px !important; font-size: clamp(10px, 2.8vw, 11px) !important; line-height: 1.25;
    white-space: nowrap;
  }
  .efp-mobile-scorebar.efp-counter-bar > div:has(> #mobile-score) {
    background: #eff6ff; border-color: #bfdbfe;
  }
  .efp-mobile-scorebar.efp-counter-bar > div:has(> #mobile-wrong) {
    background: #fff1f2; border-color: #fecdd3;
  }
  .efp-mobile-scorebar.efp-counter-bar > .efp-unattempted {
    background: #fff8e8; border-color: #ead9af;
  }
  .efp-mobile-scorebar.efp-counter-bar :is(
    .efp-blackbook-total-value, #mobile-score, #mobile-wrong, .efp-unattempted-value
  ) {
    font-size: clamp(13px, 3.6vw, 15px) !important; font-weight: 800; line-height: 1.25;
  }
  .efp-mobile-scorebar.efp-counter-bar > .efp-quiz-progress {
    flex-direction: row; gap: 7px !important;
  }
}

/* Keep the day-mode frame inside the painted score surface. A viewport-edge
   border can be clipped by browser/app chrome during sticky scrolling. The
   inset outline survives that edge clipping without moving the toolbar or
   adding a gap. A layer keeps legacy per-page !important borders from winning. */
@layer efp-quiz-frame {
  html:not(.dark):not(.efp-black):not(.efp-black-invert) body:not(.dark) :is(
    .score-bar, .set-score-bar,
    #app > .max-w-3xl > .flex.items-center.justify-between.mb-3,
    #quizView > .quiz-head,
    .toolbar:has(#scoreTxt) > :is(.barcard, .bar),
    .efp-mobile-scorebar, .desktop-sticky-score
  ) {
    border-color: transparent !important;
    outline: 1px solid var(--efp-scorebar-border, #b8863f) !important;
    outline-offset: -3px !important;
  }
  /* CA phones paint the row; the outer toolbar/card use display:contents. */
  @media (max-width: 650px) {
    html:not(.dark):not(.efp-black):not(.efp-black-invert) body:not(.dark) .toolbar > :is(.barcard, .bar) > .row:first-child:has(#scoreTxt) {
      border-color: transparent !important;
      outline: 1px solid var(--efp-scorebar-border, #b8863f) !important;
      outline-offset: -3px !important;
    }
  }
}