.omet {
  /* ---- chrome: driven by the theme, with light-mode fallbacks ---- */
  --omet-ink: var(--bs-body-color, #1a2233);
  --omet-bg: var(--bs-body-bg, #faf9f6);
  --omet-muted: var(--bs-secondary-color, #6a737b);
  --omet-line: var(--bs-border-color, #e0ddd4);
  --omet-accent: var(--bs-link-color, #39729e);
  --omet-gold: #c39329;
  /* surfaces derived from the theme so they raise/recede correctly in both modes */
  --omet-panel: var(--bs-body-bg, #fff);
  --omet-panel: color-mix(in srgb, var(--bs-body-color, #000) 4%, var(--bs-body-bg, #fff));
  --omet-reflect-bg: color-mix(in srgb, var(--bs-body-bg, #fff) 88%, var(--omet-gold) 12%);

  /* ---- semantic data palette: light-mode values (switched for dark below) ---- */
  --omet-pos: #2f7d5a;
  --omet-mix: #b9832b;
  --omet-sug: #3a77a6;
  --omet-crit: #b23a2e;
  --omet-na: #8a8f98;
  /* diverging Likert ramp: strongly-disagree -> strongly-agree */
  --omet-lk-1: #a6342a;
  --omet-lk-2: #d59689;
  --omet-lk-3: #ccc6ba;
  --omet-lk-4: #93c0a6;
  --omet-lk-5: #2f7d5a;
}

/* Dark-mode overrides. Quarto toggles `body.quarto-dark`; the attribute selector
   also covers Bootstrap's native colour-mode if you ever switch to it. */
body.quarto-dark .omet,
.omet[data-bs-theme="dark"],
[data-bs-theme="dark"] .omet {
  --omet-gold: #d8b24a;
  --omet-pos: #5aa17d;
  --omet-mix: #d6a24a;
  --omet-sug: #6fa8cf;
  --omet-crit: #e06a55;
  --omet-na: #9aa1ab;
  --omet-lk-1: #ef6d5e;
  --omet-lk-2: #c98a80;
  --omet-lk-3: #8b93a0;
  --omet-lk-4: #7fbf9f;
  --omet-lk-5: #46b184;
}

/* stat strip under the title */
.omet .omet-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--omet-line);
  border-bottom: 1px solid var(--omet-line);
  padding: .75rem 0;
  margin: 1.2rem 0 2rem;
}

.omet .omet-stats .cell {
  padding: 0 1.1rem;
  border-right: 1px solid var(--omet-line);
}

.omet .omet-stats .cell:first-child {
  padding-left: 0;
}

.omet .omet-stats .cell:last-child {
  border-right: 0;
}

.omet .omet-stats b {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--omet-accent);
  font-variant-numeric: tabular-nums;
}

.omet .omet-stats span {
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--omet-muted);
}

/* chart panels — flex column centres whatever Plot appends (bare <svg>, or a
   <figure> when there's a legend), so the chart sits centred in the box even
   when it's narrower than the panel. min-width:0 lets it shrink on mobile. */
.omet .omet-panel {
  background: var(--omet-panel);
  border: 1px solid var(--omet-line);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  margin: 1.3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.omet .omet-panel>svg,
.omet .omet-panel>figure {
  max-width: 100%;
  min-width: 0;
}

.omet figure {
  margin: 0;
}

/* comment explorer */
.omet .omet-cards {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: .5rem;
}

.omet .omet-card {
  background: var(--omet-panel);
  border: 1px solid var(--omet-line);
  border-radius: 10px;
  padding: 1.05rem 1.2rem;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0 .1rem;
}

.omet .omet-gutter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding-top: .15rem;
}

.omet .omet-id {
  font-size: .72rem;
  color: var(--omet-muted);
  font-weight: 500;
}

.omet .omet-sdot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--s, var(--omet-na));
}

.omet .omet-ctext {
  margin: 0 0 .55rem;
  line-height: 1.55;
  white-space: pre-line;
}

.omet .omet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}

.omet .omet-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  font-weight: 500;
  padding: .16rem .5rem;
  border-radius: 5px;
  background: transparent;
  border: 1px solid var(--omet-line);
  color: var(--omet-muted);
}

.omet .omet-pill.omet-prompt {
  border-style: dashed;
}

/* sentiment classes set --s; pills are self-tinted chips (legible in both modes, no white-on-amber) */
.omet .s-positive {
  --s: var(--omet-pos);
}

.omet .s-mixed {
  --s: var(--omet-mix);
}

.omet .s-suggestion {
  --s: var(--omet-sug);
}

.omet .s-critical {
  --s: var(--omet-crit);
}

.omet .s-na {
  --s: var(--omet-na);
}

.omet .omet-pill.omet-sent {
  color: var(--s);
  border-color: color-mix(in srgb, var(--s) 34%, transparent);
  background: color-mix(in srgb, var(--s) 13%, transparent);
}

.omet mark {
  background: color-mix(in srgb, var(--omet-accent) 24%, transparent);
  color: inherit;
  padding: 0 .05em;
  border-radius: 2px;
}

.omet .omet-empty {
  text-align: center;
  color: var(--omet-muted);
  padding: 2.5rem 1rem;
}

/* reflection */
.omet .omet-reflection {
  margin-top: .85rem;
  border-left: 3px solid var(--omet-gold);
  background: var(--omet-reflect-bg);
  border-radius: 0 6px 6px 0;
  padding: .7rem .9rem;
}

.omet .omet-rhead {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--omet-gold);
  font-weight: 700;
  margin-bottom: .3rem;
}

.omet .omet-reflection p {
  font-size: .94rem;
  line-height: 1.5;
  margin: 0;
}

@media (max-width:640px) {
  .omet .omet-card {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .omet .omet-gutter {
    flex-direction: row;
    align-items: center;
  }
}

.omet .s-negative {
  --s: var(--omet-crit);
}

.omet .s-neutral {
  --s: var(--omet-na);
}

.omet .omet-count {
  font-size: .68rem;
  color: var(--omet-muted);
  font-variant-numeric: tabular-nums;
}

.omet .omet-seg {
  border-radius: 3px;
  padding: .02em .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: color-mix(in srgb, var(--c, var(--omet-na)) 15%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c, var(--omet-na)) 60%, transparent);
  transition: opacity .15s ease, background .15s ease;
}

.omet .omet-seg.is-off {
  opacity: .4;
  background: transparent;
  box-shadow: none;
}

.omet .omet-seg-num {
  font-size: .62em;
  font-weight: 700;
  line-height: 0;
  padding-left: .12em;
  vertical-align: super;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c, var(--omet-na)) 85%, var(--omet-ink));
}

.omet .omet-seg.is-off .omet-seg-num {
  color: inherit;
}

.omet .omet-seglist {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .15rem;
}

.omet .omet-segrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

.omet .omet-segrow.is-off {
  opacity: .42;
}

.omet .omet-segrow .omet-sdot {
  flex: 0 0 auto;
}

.omet .omet-badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  font-weight: 600;
  padding: .12rem .45rem;
  border-radius: 5px;
  color: var(--omet-pos);
  border: 1px solid color-mix(in srgb, var(--omet-pos) 40%, transparent);
  background: color-mix(in srgb, var(--omet-pos) 12%, transparent);
}

.omet .omet-pill.omet-conf {
  font-variant-numeric: tabular-nums;
}

.omet .omet-scard .omet-context {
  margin-top: .65rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--omet-line);
  font-size: .86rem;
  line-height: 1.55;
  color: var(--omet-muted);
}

.omet .omet-context-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--omet-muted);
  margin-right: .4rem;
}

.omet {
  --omet-cat-1: #2f6fb0;
  /* Clarity of explanation            — blue    */
  --omet-cat-2: #148a80;
  /* Organization and structure        — teal    */
  --omet-cat-3: #7a4fb0;
  /* Assessment, grading, and feedback — purple  */
  --omet-cat-4: #c0392b;
  /* Workload, pace, and difficulty    — crimson */
  --omet-cat-5: #3f8f5a;
  /* Course content and materials      — green   */
  --omet-cat-6: #cf7a1c;
  /* Availability and responsiveness   — orange  */
  --omet-cat-7: #b8377f;
  /* Enthusiasm and engagement         — magenta */
  --omet-cat-8: #4a52c4;
  /* Interaction, inclusion, climate   — indigo  */
  --omet-cat-9: #8a7320;
  /* Logistics and environment         — olive   */
  --omet-cat-10: #566a86;
  /* Non-pedagogical / identity        — slate   */
  --omet-cat-11: #8a746a;
  /* Off-topic or uninformative        — taupe   */
}

body.quarto-dark .omet,
.omet[data-bs-theme="dark"],
[data-bs-theme="dark"] .omet {
  --omet-cat-1: #79aee0;
  --omet-cat-2: #47c5bd;
  --omet-cat-3: #b98fe4;
  --omet-cat-4: #ef7264;
  --omet-cat-5: #74c891;
  --omet-cat-6: #eaa64f;
  --omet-cat-7: #ec7cb8;
  --omet-cat-8: #949bef;
  --omet-cat-9: #d0b85a;
  --omet-cat-10: #9aadca;
  --omet-cat-11: #c6b4a8;
}

.omet .omet-c0 {
  --c: var(--omet-na);
}

.omet .omet-c1 {
  --c: var(--omet-cat-1);
}

.omet .omet-c2 {
  --c: var(--omet-cat-2);
}

.omet .omet-c3 {
  --c: var(--omet-cat-3);
}

.omet .omet-c4 {
  --c: var(--omet-cat-4);
}

.omet .omet-c5 {
  --c: var(--omet-cat-5);
}

.omet .omet-c6 {
  --c: var(--omet-cat-6);
}

.omet .omet-c7 {
  --c: var(--omet-cat-7);
}

.omet .omet-c8 {
  --c: var(--omet-cat-8);
}

.omet .omet-c9 {
  --c: var(--omet-cat-9);
}

.omet .omet-c10 {
  --c: var(--omet-cat-10);
}

.omet .omet-c11 {
  --c: var(--omet-cat-11);
}

.omet .omet-segnum {
  flex: 0 0 auto;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 .3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c, var(--omet-na)) 78%, var(--omet-ink));
  background: color-mix(in srgb, var(--c, var(--omet-na)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--omet-na)) 42%, transparent);
}

.omet .omet-pill.omet-cat-pill {
  color: color-mix(in srgb, var(--c, var(--omet-na)) 82%, var(--omet-ink));
  border-color: color-mix(in srgb, var(--c, var(--omet-na)) 40%, transparent);
  background: color-mix(in srgb, var(--c, var(--omet-na)) 12%, transparent);
}

.omet .omet-codebook {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 1.3rem 0;
}

.omet .omet-catgroup {
  display: flex;
  flex-direction: column;
}

.omet .omet-cathead {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .5rem;
  margin-bottom: .85rem;
  border-bottom: 2px solid color-mix(in srgb, var(--c, var(--omet-line)) 55%, transparent);
}

.omet .omet-catswatch {
  flex: 0 0 auto;
  width: .9rem;
  height: .9rem;
  border-radius: 3px;
  background: var(--c, var(--omet-na));
}

.omet .omet-catname {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--omet-ink);
}

.omet .omet-catcount {
  margin-left: auto;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--omet-muted);
  font-variant-numeric: tabular-nums;
}

.omet .omet-thead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .4rem;
}

.omet .omet-tlabel {
  font-size: 1rem;
  font-weight: 600;
  color: var(--omet-ink);
}

.omet .omet-prev-dots {
  letter-spacing: .12em;
  font-size: .82em;
}

.omet .omet-evidence {
  list-style: none;
  margin: .65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.omet .omet-evidence li {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--omet-muted);
  border-left: 2px solid color-mix(in srgb, var(--c, var(--omet-line)) 50%, transparent);
  padding-left: .6rem;
}

.omet form[class*="oi-"] {
  display: grid;
  max-width: none;
  width: 100%;
}

.omet form[class*="oi-"][class*="-checkbox"]>div {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.25rem;
  flex: 1;
  min-width: 0;
  max-width: none;
}

.omet form[class*="oi-"][class*="-checkbox"]>div>label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.omet .omet-aside {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--omet-muted);
  margin: .4rem 0 1.6rem;
}

/* survey prompts (the open-response questions) */
.omet .omet-prompts {
  list-style: none;
  margin: 1.3rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.omet .omet-prompt-row {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  background: var(--omet-panel);
  border: 1px solid var(--omet-line);
  border-radius: 10px;
  padding: .8rem 1rem;
}

.omet .omet-prompt-key {
  flex: 0 0 auto;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 .35em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .8rem;
  font-weight: 700;
  color: var(--omet-accent);
  background: color-mix(in srgb, var(--omet-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--omet-accent) 40%, transparent);
}

.omet .omet-prompt-q {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--omet-ink);
}

.omet .omet-prompt-row .omet-count {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width:640px) {
  .omet .omet-prompt-row {
    flex-wrap: wrap;
    gap: .3rem .6rem;
  }
}