/* ===========================================================================
   Shared chrome for the standalone interactive pages under
   /teaching/... and /publications/...

   These pages are static HTML (no front matter), so they never get the Jekyll
   layout. This file gives them the site's palette, type stack and control
   styling so they read as part of wild-inter.net rather than as visitors.

   The token values are the *same* numbers as css/main.scss, including the
   ones Sass derives:

       --wi-bg          $background-color                 #F1EED9
       --wi-ink         $text-color                       #46433A
       --wi-ink-strong  darken($text-color, 5%)           #38362e
       --wi-accent      $headings-color / $brand-color    #902015
       --wi-link        mix($headings-color, black, 90%)  #821d13
       --wi-border      lighten($text-color, 40%)         #aeaa9e
       --wi-panel       lighten($background-color, 5%)    #f8f6ec
       --wi-accent-soft mix($headings-color, $bg, 50%)    #c08777

   If you ever change a colour in css/main.scss, change it here too. They are
   two separate systems on purpose -- these pages must work when opened
   directly, without a Sass build.
   =========================================================================== */

:root {
  /* --- surfaces ------------------------------------------------------- */
  --wi-bg:            #F1EED9;
  --wi-panel:         #f8f6ec;
  --wi-panel-2:       #fbfaf4;
  --wi-controls:      #e7e3ca;

  /* --- lines ---------------------------------------------------------- */
  --wi-border:        #aeaa9e;
  --wi-border-soft:   #cdc9bb;
  --wi-border-strong: #8d897c;

  /* --- text ----------------------------------------------------------- */
  --wi-ink:           #46433A;
  --wi-ink-strong:    #38362e;
  --wi-ink-soft:      #6b675c;
  --wi-ink-faint:     #8b8779;

  /* --- brand ---------------------------------------------------------- */
  --wi-accent:        #902015;
  --wi-accent-dark:   #6d180f;
  --wi-accent-soft:   #c08777;
  --wi-link:          #821d13;

  /* --- semantic states -------------------------------------------------
     Kept distinguishable, but pulled off pure hues so they sit on cream
     without vibrating. Pure #ff0000 in particular was fighting the palette. */
  --wi-active:        #cc2f22;   /* the thing happening right now          */
  --wi-examine:       #b07d18;   /* iterator currently looking at this     */
  --wi-queue:         #2a6a63;   /* in the queue / frontier                */
  --wi-relax:         #4a7c3f;   /* successful relaxation / improvement    */
  --wi-done:          #902015;   /* finished                               */
  --wi-inert:         #b6b1a1;   /* untouched / unseen                     */
  --wi-inert-border:  #8d897c;

  /* --- ramp for value-carrying fills (near -> far, low -> high) -------- */
  --wi-ramp-lo:       #e5c0b4;
  --wi-ramp-hi:       #902015;

  /* --- type ----------------------------------------------------------- */
  --wi-font-body:   texgyrepagella, Palatino, "Palatino Linotype", "Palatino LT STD", "URWPalladioL", "URW Palladio L", serif;
  --wi-font-head:   epigrafica, Optima, "URWClassicoT", "URW Classico", "URW Classico T", sans-serif;
  --wi-font-mono:   ui-monospace, Menlo, Consolas, monospace;

  --wi-radius:      4px;
  --wi-radius-lg:   5px;
}

/* --- page ------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--wi-bg);
  color: var(--wi-ink);
  font-family: var(--wi-font-body);
  font-size: 19px;
  line-height: 1.5;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wi-font-head);
  color: var(--wi-accent);
  font-weight: bold;
  letter-spacing: .05em;
}

a {
  color: var(--wi-link);
  text-decoration: none;
}

a:hover {
  color: var(--wi-ink);
  text-shadow: 0 0 5px var(--wi-accent-soft);
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--wi-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

code, kbd, samp, pre {
  font-family: var(--wi-font-mono);
  font-size: .8em;
}

/* --- the "back to the course" strip ------------------------------------
   These pages are reached from a module page and previously offered no way
   back. Mirrors .site-header in _sass/_layout.scss. */

.wi-topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
  margin: 0 0 1.25em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--wi-border);
  font-family: var(--wi-font-head);
  letter-spacing: .03em;
}

.wi-topbar .wi-home {
  color: var(--wi-ink-strong);
  font-size: 1.05em;
}

.wi-topbar .wi-back {
  font-size: .85em;
}

/* --- controls ---------------------------------------------------------- */

.wi-controls,
.controls {
  background-color: var(--wi-controls);
  border: 1px solid var(--wi-border-soft);
  border-radius: var(--wi-radius-lg);
}

button,
.wi-btn {
  font-family: var(--wi-font-head);
  letter-spacing: .03em;
  background-color: var(--wi-panel);
  color: var(--wi-ink-strong);
  border: 1px solid var(--wi-border);
  border-radius: var(--wi-radius);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

button:hover,
.wi-btn:hover {
  background-color: var(--wi-panel-2);
  border-color: var(--wi-border-strong);
}

button:disabled,
.wi-btn:disabled {
  opacity: .4;
  cursor: default;
}

button.pri,
.wi-btn.pri {
  background-color: var(--wi-accent);
  border-color: var(--wi-accent);
  color: var(--wi-panel-2);
}

button.pri:hover,
.wi-btn.pri:hover {
  background-color: var(--wi-accent-dark);
  border-color: var(--wi-accent-dark);
}

select, input[type="text"], input[type="number"] {
  font-family: var(--wi-font-body);
  background-color: var(--wi-panel);
  color: var(--wi-ink);
  border: 1px solid var(--wi-border);
  border-radius: var(--wi-radius);
  padding: 2px 6px;
}

input[type="range"] {
  accent-color: var(--wi-accent);
}

/* --- panels ------------------------------------------------------------ */

.wi-panel,
.sim-box {
  background-color: var(--wi-panel);
  border: 1px solid var(--wi-border-soft);
  border-radius: var(--wi-radius-lg);
}

.wi-caption,
.sim-title {
  font-family: var(--wi-font-head);
  color: var(--wi-ink-faint);
  letter-spacing: .06em;
}

/* --- misc -------------------------------------------------------------- */

.wi-legend-swatch {
  display: inline-block;
  width: .8em;
  height: .8em;
  border: 1px solid var(--wi-border);
  border-radius: 2px;
  vertical-align: -.05em;
  margin-right: .35em;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}