/*----------------------------------------------------------------------
  _theme.scss -- shared styling for the course walkthroughs.

  Referenced from each day's YAML as:

      format:
        html:
          theme: [cosmo, ../_theme.scss]

  It combines readable typography, Michigan State colors, responsive
  figures and tables, runtime badges, break banners, and dark-mode
  fallbacks.
----------------------------------------------------------------------*/

/*-- scss:defaults --*/

// Use a comfortable base size on both large and small screens.
$font-size-root:       17px;
$code-block-font-size: 0.92em;
$body-color:           #000000;
$link-color:           #18453B;


/*-- scss:rules --*/

body { line-height: 1.6; }
a:hover { color: #008208; }
h1, h2, h3 { color: #18453B; }

/* Readable measure. Wide content scrolls inside its own box (below);
   the page body itself must never scroll sideways. */
main { max-width: 48rem; }
body { overflow-x: hidden; }

/* Code is the thing students actually stare at. Give it room. */
pre > code.sourceCode { line-height: 1.5; }
div.sourceCode { margin: 1.1em 0; }

/* A 40-line summary() dump should not push the next section off the
   bottom of the screen. Cap it and let it scroll. */
.cell-output pre {
  max-height: 22em;
  overflow-y: auto;
  font-size: 0.88rem;
}

/* Section starts are the landmarks you navigate by when scrolling live. */
h2 {
  border-top: 3px solid #7BBD00;
  padding-top: .7em;
  margin-top: 2.2em;
}

/* Exercises must be unmissable when you scroll past them. */
.callout.callout-style-default.callout-tip {
  border-left: 6px solid #008934;
}

/* Tables: model output is read across rows, so stripe them. */
table { font-size: 0.95rem; }
thead { border-bottom-color: #18453B; }
tbody tr:nth-child(odd) { background: rgba(24,69,59,0.045); }

/* ---- Runtime badge: marks whether a displayed result is precomputed. ---- */
.rt {
  display: inline-block;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.78em;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.08em 0.5em;
  margin-left: 0.35em;
  border: 1px solid transparent;
}
.rt-live   { background: rgba(123,189,0,0.16); color: #18453B; border-color: #7BBD00; }
.rt-slow   { background: rgba(11,154,109,0.14); color: #18453B; border-color: #0B9A6D; }
.rt-precmp { background: rgba(24,69,59,0.10); color: #18453B; border-color: #18453B; }

/* ---- Break banner. ---- */
.brk {
  margin: 2.2rem 0;
  padding: 0.85rem 1.1rem;
  border-left: 5px solid #18453B;
  background: rgba(24,69,59,0.07);
  border-radius: 0 6px 6px 0;
  font-weight: 600;
}
.brk .sub { display: block; font-weight: 400; font-size: 0.9em; color: #18453B; margin-top: 0.2rem; }

/* ---- Responsive figures. ---- */
.cell-output-display img { max-width: 100%; height: auto; }

/* ---- Wide printed output (coefficient tables, gof tables) scrolls inside
        its own box; the page never scrolls sideways. ---- */
div.sourceCode,
pre.sourceCode,
.cell-output pre,
.cell-output-stdout pre { overflow-x: auto; max-width: 100%; }

.cell-output table,
.table-responsive { display: block; overflow-x: auto; max-width: 100%; }

/* Scale type on large displays without increasing the line length. */
@media (min-width: 1600px) { body { font-size: 1.06rem; } }

/* ---- Dark mode: keep badges, banners, landmarks, and stripes legible
        for a student reading on a dark-themed laptop. ---- */
@media (prefers-color-scheme: dark) {
  h2   { border-top-color: #7BBD00; }
  tbody tr:nth-child(odd) { background: rgba(255,255,255,0.035); }
  .brk { background: #18453B; color: #FFFFFF; }
  .brk .sub { color: #FFFFFF; }
  .rt-live   { background: #18453B; color: #FFFFFF; border-color: #7BBD00; }
  .rt-slow   { background: #18453B; color: #FFFFFF; border-color: #0B9A6D; }
  .rt-precmp { background: #18453B; color: #FFFFFF; border-color: #008934; }
}
