/* KG Portal V11.2 R11.9 — durable AI review, exercise lifecycle and text contrast. */

/* Loaded last on purpose: older generic button rules gave these disclosure rows
   a light button fill while their descendants retained Dark-theme text. */
html[data-kg-theme="dark"] .mainContent .v11ExercisePage .v118ArchivedToggle,
html[data-kg-theme="dark"] .mainContent .v11ExercisePage .v11HistoryToggle {
  color: #f4f3ef !important;
  border-color: #334256 !important;
  background: #172231 !important;
  box-shadow: none !important;
}

html[data-kg-theme="light"] .mainContent .v11ExercisePage .v118ArchivedToggle,
html[data-kg-theme="light"] .mainContent .v11ExercisePage .v11HistoryToggle {
  color: #191b1e !important;
  border-color: #d8d2c8 !important;
  background: #f8f5ef !important;
  box-shadow: none !important;
}

html[data-kg-theme] .mainContent .v11ExercisePage .v118ArchivedToggle :where(.v11Eyebrow, b),
html[data-kg-theme] .mainContent .v11ExercisePage .v11HistoryToggle b {
  color: inherit !important;
  opacity: 1 !important;
}

html[data-kg-theme="dark"] .mainContent .v11ExercisePage .v118ArchivedToggle > span:last-child,
html[data-kg-theme="dark"] .mainContent .v11ExercisePage .v11HistoryToggle :where(small, span:last-child) {
  color: #c0c7d0 !important;
  opacity: 1 !important;
}

html[data-kg-theme="light"] .mainContent .v11ExercisePage .v118ArchivedToggle > span:last-child,
html[data-kg-theme="light"] .mainContent .v11ExercisePage .v11HistoryToggle :where(small, span:last-child) {
  color: #555d66 !important;
  opacity: 1 !important;
}

html[data-kg-theme] .mainContent .v11ExercisePage :where(.v118ArchivedToggle, .v11HistoryToggle):hover {
  border-color: var(--v11-border-strong) !important;
  filter: brightness(1.05);
}

html[data-kg-theme] .mainContent .v11ExercisePage :where(.v118ArchivedToggle, .v11HistoryToggle):focus-visible {
  outline: 3px solid var(--v11-border-strong) !important;
  outline-offset: -3px;
}

.v119IncompleteBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--v11-warning) 55%, var(--v11-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--v11-warning) 8%, var(--v11-panel));
}

.v119IncompleteBanner :where(b, small) {
  display: block;
}

.v119IncompleteBanner b {
  color: var(--v11-text);
}

.v119IncompleteBanner small {
  margin-top: 4px;
  color: var(--v11-muted);
  line-height: 1.45;
}

.v119ReviewQueue,
.v119DeletedExercises {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
  color: var(--v11-text);
  border: 1px solid var(--v11-border);
  border-radius: 20px;
  background: var(--v11-panel);
  box-shadow: var(--v11-shadow);
}

.v119QueueHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.v119QueueHead h2 {
  margin: 6px 0 7px;
  color: var(--v11-text);
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.035em;
}

.v119QueueHead p {
  max-width: 850px;
  margin: 0;
  color: var(--v11-muted);
  line-height: 1.55;
}

.v119QueueStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.v119QueueStats > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--v11-border);
  border-radius: 12px;
  background: var(--v11-elevated);
}

.v119QueueStats b {
  color: var(--v11-text);
  font-size: 24px;
}

.v119QueueStats span {
  color: var(--v11-muted);
  font-size: 12px;
}

.v119QueueList,
.v119DeletedList {
  display: grid;
  gap: 12px;
}

.v119QueueCard {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(230px, 0.8fr) auto;
  gap: 18px;
  align-items: center;
  padding: 17px;
  border: 1px solid var(--v11-border);
  border-radius: 14px;
  background: var(--v11-elevated);
}

.v119QueueIdentity code {
  color: var(--v11-muted);
}

.v119QueueIdentity .v11Badge {
  margin-left: 9px;
}

.v119QueueIdentity h3,
.v119DeletedCard h3 {
  margin: 8px 0 5px;
  color: var(--v11-text);
  font-size: 19px;
}

.v119QueueIdentity p,
.v119DeletedCard p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--v11-muted);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.v119QueueEvidence {
  display: grid;
  gap: 7px;
  color: var(--v11-muted);
  font-size: 12px;
}

.v119QueueEvidence b {
  color: var(--v11-text);
}

.v119QueueEvidence p {
  margin: 3px 0 0;
  color: var(--v11-danger);
  line-height: 1.45;
}

.v119QueueActions,
.v119DeletedActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

html[data-kg-theme] .mainContent .v11ExercisePage :where(.v119QueueActions, .v119DeletedActions) button.reject,
html[data-kg-theme] .mainContent .v11ExercisePage .v119DeleteExerciseButton {
  color: var(--v11-danger) !important;
  border-color: color-mix(in srgb, var(--v11-danger) 55%, var(--v11-border)) !important;
  background: color-mix(in srgb, var(--v11-danger) 8%, var(--v11-panel)) !important;
  box-shadow: none !important;
}

.v119DeletedCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px;
  border: 1px solid var(--v11-border);
  border-radius: 14px;
  background: var(--v11-elevated);
}

.v119DeletedCard > div:first-child {
  min-width: 0;
}

.v119DeletedCard small {
  display: block;
  margin-top: 8px;
  color: var(--v11-muted);
}

.v119ExerciseLifecycleBackdrop {
  z-index: 1700;
}

.v119ExerciseLifecycleDialog {
  width: min(680px, calc(100% - 28px));
}

@media (max-width: 980px) {
  .v119QueueStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .v119QueueCard {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .v119QueueActions {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .v119QueueHead,
  .v119IncompleteBanner,
  .v119DeletedCard {
    align-items: stretch;
    flex-direction: column;
  }

  .v119QueueStats {
    grid-template-columns: 1fr;
  }

  .v119QueueActions,
  .v119DeletedActions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .v119QueueActions button,
  .v119DeletedActions button,
  .v119IncompleteBanner button {
    width: 100%;
  }
}