/* Shared styles for every DSCI 100 Section 008 deck.
   Add to a deck's front matter with:  css: slides.css
   Colours: blue #2a78d6, orange #eb6834, warm grey #b8b6b0, ink #52514e. */

/* ===================== Observable inputs and charts ===================== */

/* Observable Inputs (sliders, checkboxes, toggles, radios) inside reveal slides */
.reveal form[class*="oi-"] { font-size: 0.55em; align-items: center; margin: 0.2em 0; }
.reveal form[class*="oi-"] > label { width: auto !important; margin-right: 0.8em; white-space: nowrap; }
.reveal form[class*="oi-"] input[type="range"] { width: 320px; }
.reveal form[class*="oi-"] input[type="number"] { width: 4.5em; }
.reveal form[class*="oi-"] input[type="checkbox"],
.reveal form[class*="oi-"] input[type="radio"] { width: 1em; height: 1em; }

/* Observable Plot legends */
.reveal div[class*="-swatches"] { font-size: 16px !important; --swatchWidth: 18px !important; --swatchHeight: 18px !important; }

/* One-line numeric readouts under interactive charts */
.reveal .ojs-readout { font-size: 0.6em; margin: 0.2em 0; }
.reveal .ojs-readout .blue   { color: #2a78d6; font-weight: bold; }
.reveal .ojs-readout .orange { color: #eb6834; font-weight: bold; }
.reveal .ojs-readout .grey   { color: #8a8880; }

/* ===================== Note boxes students type into ===================== */

/* Paired with helper.js, which saves what students type to localStorage.
   Use: ::: {#note-tidy .persistent-notes contenteditable="true"}
        Notes:
        ::: */
.reveal .persistent-notes {
  border: 1px solid #b8b6b0; border-radius: 6px;
  padding: 8px 10px; font-size: 0.6em; min-height: 2.4em;
  background: #fcfcfb; color: #52514e;
}
.reveal .persistent-notes:focus { outline: 2px solid #2a78d6; border-color: #2a78d6; }

/* ===================== Small reusable slide pieces ===================== */

/* A caption under a figure or an interactive widget */
.reveal .ds-caption { font-size: 0.55em; color: #52514e; margin: 0.3em 0; text-align: center; }

/* A row of small boxes, one per value, for stepping through data by hand */
.reveal .cell-row { display: flex; gap: 6px; margin: 0.4em 0; flex-wrap: wrap; justify-content: center; }
.reveal .cell-box {
  min-width: 48px; height: 44px; padding: 0 8px; border-radius: 6px;
  border: 2px solid #d9d8d4; background: #fcfcfb; color: #52514e;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.reveal .cell-box.kept    { background: #2a78d6; border-color: #2a78d6; color: #ffffff; font-weight: bold; }
.reveal .cell-box.dropped { background: #f2f1ee; border-style: dashed; color: #b8b6b0; }
.reveal .cell-box.changed { background: #eb6834; border-color: #eb6834; color: #ffffff; font-weight: bold; }

/* Tables that need to fit on one slide without shrinking the whole slide */
.reveal table.compact { font-size: 0.55em; border-collapse: collapse; }
.reveal table.compact th,
.reveal table.compact td { padding: 4px 10px; }

/* Tables whose cells hold short bullet lists, e.g. feedback and response.
   Use: wrap the markdown table in ::: {.bullet-table} and write the bullets
   as <ul><li>...</li></ul> inside the cell. */
.reveal .bullet-table table { border-collapse: collapse; }
.reveal .bullet-table th,
.reveal .bullet-table td { padding: 6px 10px; vertical-align: top; }
.reveal .bullet-table ul { display: block; margin: 0; padding-left: 1.1em; }
.reveal .bullet-table li { margin: 0 0 0.25em 0; }
.reveal .bullet-table li:last-child { margin-bottom: 0; }

/* next / back buttons of a step-through (Inputs.button) */
.reveal form[class*="oi-"] button { font-size: 20px !important; padding: 4px 16px !important; cursor: pointer; }