/* /demos/rag-lab — the metric table, the question picker and the per-question
 * ranked list.
 *
 * THE LISTBOX SKIN IS THIS PAGE'S OWN, and that is the deliberate half of the
 * arrangement PF-S306 set up. The BEHAVIOR is shared — one implementation in
 * static/js/unselect2port.js, instantiated by this page and by /demos/sba-lab —
 * and the class prefix is a parameter of it. What is NOT shared is the
 * appearance: a stylesheet common to both pages would make every future visual
 * change to one of them a change to the other, which is a coupling neither page
 * asked for. One behavior, two skins.
 *
 * EVERY SURFACE NAMES BOTH ITS BACKGROUND AND ITS FOREGROUND. `color: inherit`
 * on a floating panel inherits from whatever happens to be behind it, which is
 * exactly how the native control failed and why it was replaced. A token that
 * goes missing must produce a visibly wrong panel rather than an invisible one.
 */

/* ---- the headline metrics --------------------------------------------- */

.rag-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.rag-metric {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color, #d8dde3);
  border-radius: 8px;
  background: var(--surface-1, #fff);
  color: var(--text-color, #1c2430);
}

.rag-metric__value {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.rag-metric__name {
  display: block;
  margin-top: 0.2rem;
  font-weight: 600;
}

.rag-metric__note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ---- the method box ---------------------------------------------------- */

/* PINNED, and visually distinct on purpose. Everything the page claims about
 * how the figures were produced is in this one box, so a reader can check the
 * method without reading the prose around it and a later edit that softened a
 * clause would be softening something conspicuous. */
.rag-method {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-color, #d8dde3);
  border-left: 4px solid var(--link-color, #2563eb);
  border-radius: 8px;
  background: var(--surface-1, #fff);
  color: var(--text-color, #1c2430);
}

.rag-method h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

.rag-method ul {
  margin: 0.5rem 0 0;
  padding-left: 1.15rem;
}

.rag-method li {
  margin: 0.3rem 0;
}

/* ---- the question picker ----------------------------------------------- */

.rag-picker {
  margin: 1.5rem 0 0.75rem;
  max-width: 44rem;
}

.rag-picker__label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

/* ---- the per-question view --------------------------------------------- */

.rag-question {
  margin: 1rem 0 2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-color, #d8dde3);
  border-radius: 8px;
  background: var(--surface-1, #fff);
  color: var(--text-color, #1c2430);
}

.rag-question__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
}

.rag-question__id {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rag-question__text {
  font-weight: 600;
}

/* THE VERDICT CHIP IS A SHAPE AS WELL AS A COLOR. Color alone would carry no
 * information for a reader who cannot distinguish these two, and the whole
 * point of the per-question view is that a failure is as legible as a success —
 * so each chip also carries its own word. */
.rag-verdict {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid currentcolor;
}

.rag-verdict--hit {
  color: #14713b;
}

.rag-verdict--miss {
  color: #a3231f;
}

.rag-question__sources {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
}

.rag-question__scores {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.92rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.rag-hits {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.rag-hit {
  display: grid;
  grid-template-columns: 2.2rem 1fr 4rem;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
}

.rag-hit__rank {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.rag-hit__score {
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.rag-hit__url {
  overflow-wrap: anywhere;
}

.rag-hit__excerpt {
  grid-column: 2 / -1;
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  opacity: 0.8;
}

/* A GOLD PASSAGE IS MARKED WITH A BORDER AND A WORD, not with a background
 * tint alone. The mark is the single most important thing in this list — it is
 * what lets a reader check the grade rather than take it — so it must not
 * depend on a reader distinguishing two similar fills. */
.rag-hit--gold {
  border-color: #14713b;
  background: rgba(20, 113, 59, 0.08);
}

.rag-hit__gold {
  font-size: 0.75rem;
  font-weight: 700;
  color: #14713b;
  white-space: nowrap;
}

/* THE CUT IS DRAWN, not described. k is 5 and the list runs to 10, so the rule
 * below rank 5 is what makes "a gold page at rank 7" legible as the near miss
 * it is rather than as an ordinary row. */
.rag-hit--cut {
  border-bottom: 2px dashed var(--border-color, #d8dde3);
  padding-bottom: 0.6rem;
  margin-bottom: 0.35rem;
}

.rag-cut-note {
  margin: 0.35rem 0 0.6rem;
  font-size: 0.82rem;
  opacity: 0.75;
}

/* ---- the listbox ------------------------------------------------------- */

.rag-us2 {
  position: relative;
  width: 100%;
}

.rag-us2__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-color, #d8dde3);
  border-radius: 6px;
  background: var(--surface-1, #fff);
  color: var(--text-color, #1c2430);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rag-us2__field:focus-visible {
  outline: 3px solid var(--link-color, #2563eb);
  outline-offset: 2px;
}

.rag-us2__value {
  flex: 1 1 auto;
  min-width: 0;
  /* The CLOSED control may ellipsize; the open list never does, and the button
   * carries a title attribute so the whole question stays reachable. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rag-us2__caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentcolor;
}

.rag-us2--open .rag-us2__caret {
  transform: rotate(180deg);
}

.rag-us2__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 22rem;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--border-color, #d8dde3);
  border-radius: 6px;
  background: var(--surface-1, #fff);
  color: var(--text-color, #1c2430);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.rag-us2__option {
  padding: 0.4rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  /* NO TRUNCATION IN THE OPEN LIST. These options are whole questions — the
   * longest is 92 characters — and ellipsizing would leave a reader choosing
   * between rows that read identically for their first forty. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.rag-us2__option--active {
  background: var(--surface-2, rgba(127, 127, 127, 0.16));
}

.rag-us2__option[aria-selected="true"] {
  font-weight: 700;
}

/* The dark half, for the control and the panel and for the two verdict colors.
 *
 * THE VALUES ARE DECLARED ONCE; THE CONDITIONS CANNOT MERGE. There are two ways
 * a reader ends up on the dark theme and they are not expressible as one
 * selector: an explicit choice stamps [data-theme="dark"] on the root, while
 * the DEFAULT "system" setting stamps nothing at all and is visible only to
 * prefers-color-scheme. A media query keys on the environment, which no
 * attribute selector can reach. Two conditions is the floor — and the literals
 * live in one place so editing the panel for an explicit dark reader and not
 * for a system-dark one cannot happen silently. */
:root {
  --rag-dark-surface: #161b22;
  --rag-dark-ink: #e6edf3;
  --rag-dark-line: #30363d;
  --rag-dark-active: rgba(255, 255, 255, 0.1);
  --rag-dark-hit: #4ade80;
  --rag-dark-miss: #f87171;
}

[data-theme="dark"] .rag-us2__field,
[data-theme="dark"] .rag-us2__list,
[data-theme="dark"] .rag-metric,
[data-theme="dark"] .rag-method,
[data-theme="dark"] .rag-question {
  background: var(--surface-1, var(--rag-dark-surface));
  color: var(--text-color, var(--rag-dark-ink));
  border-color: var(--border-color, var(--rag-dark-line));
}

[data-theme="dark"] .rag-us2__option--active {
  background: var(--surface-2, var(--rag-dark-active));
}

[data-theme="dark"] .rag-verdict--hit,
[data-theme="dark"] .rag-hit__gold {
  color: var(--rag-dark-hit);
}

[data-theme="dark"] .rag-hit--gold {
  border-color: var(--rag-dark-hit);
  background: rgba(74, 222, 128, 0.12);
}

[data-theme="dark"] .rag-verdict--miss {
  color: var(--rag-dark-miss);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .rag-us2__field,
  html:not([data-theme="light"]) .rag-us2__list,
  html:not([data-theme="light"]) .rag-metric,
  html:not([data-theme="light"]) .rag-method,
  html:not([data-theme="light"]) .rag-question {
    background: var(--surface-1, var(--rag-dark-surface));
    color: var(--text-color, var(--rag-dark-ink));
    border-color: var(--border-color, var(--rag-dark-line));
  }

  html:not([data-theme="light"]) .rag-us2__option--active {
    background: var(--surface-2, var(--rag-dark-active));
  }

  html:not([data-theme="light"]) .rag-verdict--hit,
  html:not([data-theme="light"]) .rag-hit__gold {
    color: var(--rag-dark-hit);
  }

  html:not([data-theme="light"]) .rag-hit--gold {
    border-color: var(--rag-dark-hit);
    background: rgba(74, 222, 128, 0.12);
  }

  html:not([data-theme="light"]) .rag-verdict--miss {
    color: var(--rag-dark-miss);
  }
}

@media (max-width: 640px) {
  .rag-hit {
    grid-template-columns: 2rem 1fr;
  }

  .rag-hit__score {
    grid-column: 2;
    text-align: left;
  }
}