/* ============================================================
   agTeachingDemos.css
   ------------------------------------------------------------
   Generic style definitions for AG teaching demos, presentations
   and documents. Any HTML page with inline SVG can link this
   file and use the semantic classes below; every demo built on
   it stays visually consistent, and a change made here updates
   all of them.

     <link rel="stylesheet" href="agTeachingDemos.css">

   All names are prefixed "ag-" so they never collide with the
   CSS of a host environment (presentation frameworks, VLEs,
   exported documents, etc.).

   ORGANISATION: the file is split into topic sections (GENERAL,
   MATERIALS, PARTICLES, ARROWS, GRAPHS, SLIDERS, and more to
   come). Each section is self-contained:
   its colour/size variables sit in a :root block at the top of
   the section, followed by its classes. (CSS allows any number
   of :root blocks; grouping them by section keeps each topic in
   one place.)

   See agTeachingDemosGuide.html for a rendered reference.
   ============================================================ */


/* ============================================================
   GENERAL
   ------------------------------------------------------------
   Basic drawing elements shared by all demos. Lines come in
   three weights, all the same colour.
   ============================================================ */

:root {
  --ag-c-line:   #1c2733;
  --ag-sw-thin:   1px;
  --ag-sw-medium: 2px;
  --ag-sw-thick:  4px;

  /* Font stacks shared by every section that sets text
     (graph labels, slider controls, ...) */
  --ag-font-ui:   "Segoe UI", system-ui, sans-serif;
  --ag-font-mono: Consolas, "Cascadia Mono", monospace;
}

.ag-line-thin   { stroke: var(--ag-c-line); stroke-width: var(--ag-sw-thin);   fill: none; }
.ag-line-medium { stroke: var(--ag-c-line); stroke-width: var(--ag-sw-medium); fill: none; }
.ag-line-thick  { stroke: var(--ag-c-line); stroke-width: var(--ag-sw-thick);  fill: none; }


/* ============================================================
   MATERIALS
   ------------------------------------------------------------
   Material classes are pure fills — no stroke. To outline a
   material region, add .ag-outline alongside the material
   class:

       <rect class="ag-metal ag-outline" .../>

   The outline is the same for every material, and is specific
   to materials — general drawing lines belong to GENERAL above.

   .ag-metal is "shiny" when the standard gradient defs block
   (see the guide) is present in the SVG; otherwise it falls
   back automatically to the flat --ag-c-metal grey.

   FLAT fills (any material without an active gradient) can be
   retinted per element by overriding the colour variable, the
   same rule as flat particles. The NAMED TINTS below keep those
   override colours consistent across demos — use them rather
   than inventing local colours:

       <rect class="ag-metal"
             style="--ag-c-metal: var(--ag-c-metal-copper)"/>
   ============================================================ */

:root {
  /* Material fill colours (flat fills / gradient fallbacks) */
  --ag-c-metal:      #b9c2cb;
  --ag-c-water:      #8fc4ea;
  --ag-c-air:        #e3f1fb;
  --ag-c-insulation: #e8d9a0;
  --ag-c-brick:      #d69c7e;
  --ag-c-wood:       #c99a5b;
  --ag-c-plastic:    #ecefe6;
  --ag-c-stone:      #a9a294;

  /* Named tints: standard override colours for distinguishing
     specific materials when several of one family appear
     together (flat fills only — a gradient, being shared
     per-SVG, ignores per-element overrides). */
  --ag-c-metal-iron:      #6e7780;
  --ag-c-metal-titanium:  #8f979f;
  --ag-c-metal-aluminium: #aeb9c2;
  --ag-c-metal-gold:      #d9b83f;
  --ag-c-metal-copper:    #b96a45;

  /* Outline applied to material regions via .ag-outline */
  --ag-c-outline:  #1c2733;
  --ag-sw-outline: 2px;
}

.ag-metal      { fill: url(#agMetalGradient) var(--ag-c-metal); }
.ag-water      { fill: var(--ag-c-water); }
.ag-air        { fill: var(--ag-c-air); }
.ag-insulation { fill: var(--ag-c-insulation); }
.ag-brick      { fill: var(--ag-c-brick); }
.ag-wood       { fill: var(--ag-c-wood); }
.ag-plastic    { fill: var(--ag-c-plastic); }
.ag-stone      { fill: var(--ag-c-stone); }

/* Toggleable outline for material regions */
.ag-outline {
  stroke: var(--ag-c-outline);
  stroke-width: var(--ag-sw-outline);
}


/* ============================================================
   PARTICLES
   ------------------------------------------------------------
   Small dots representing atoms/molecules in particle views
   (conduction lattices, gas models, ...). Any motion is the
   demo's job (JavaScript); the framework styles the dot: size,
   body colour, and outline are all variables a demo can
   override (on the svg, a group, or a single particle):

       <circle class="ag-particle" cx="..." cy="..."/>
       <svg style="--ag-c-particle: #1f4e79">  <!-- blue demo -->

   Note the radius comes from the STYLESHEET (the CSS r property
   overrides any r="" attribute in the markup) — resize via
   --ag-particle-r, not the attribute.

   Like metal, particles are "shiny" (3-D ball look) when the
   standard agParticleGradient defs block (see the guide) is in
   the SVG. The gradient derives its highlight and shade from
   --ag-c-particle with color-mix(), so overriding that one
   variable retints the whole ball. With the gradient active the
   colour is per-SVG (the gradient is shared); flat particles
   (no defs block) can be recoloured per element. Browsers
   without color-mix() (pre-2023) get flat particles.
   ============================================================ */

:root {
  --ag-c-particle:         #4a5560;   /* body colour */
  --ag-c-particle-outline: #2c343c;
  --ag-sw-particle:        1px;
  --ag-particle-r:         3.5px;
}

.ag-particle {
  fill: url(#agParticleGradient) var(--ag-c-particle);
  stroke: var(--ag-c-particle-outline);
  stroke-width: var(--ag-sw-particle);
  r: var(--ag-particle-r);
}


/* ============================================================
   ARROWS
   ------------------------------------------------------------
   Arrows are drawn as a stroked line/path plus a separate
   filled polygon for the head:

       <line    class="ag-heat-arrow"      x1=... y1=... x2=... y2=.../>
       <polygon class="ag-heat-arrow-head" points="..."/>

   (Plain polygons are used instead of SVG <marker>s because
   browsers cannot reliably re-colour marker content from CSS,
   which would break single-file theming.)

   The heat arrow animates: its dashes march along the line.
   Speed can be overridden per element for physical feedback,
   e.g. faster when the heat flux is larger:

       el.style.setProperty("--ag-heat-arrow-speed", "0.3s");

   The animation is disabled automatically for users whose
   system requests reduced motion.
   ============================================================ */

:root {
  --ag-c-heat-arrow:     #e07b39;
  --ag-sw-arrow:         3px;
  --ag-heat-arrow-speed: 0.7s;   /* seconds per dash cycle (lower = faster) */
}

.ag-heat-arrow {
  stroke: var(--ag-c-heat-arrow);
  stroke-width: var(--ag-sw-arrow);
  fill: none;
  stroke-dasharray: 8 6;
  animation: ag-heat-march var(--ag-heat-arrow-speed) linear infinite;
}

.ag-heat-arrow-head { fill: var(--ag-c-heat-arrow); }

/* One full dash cycle: offset must equal dash + gap (8 + 6) */
@keyframes ag-heat-march {
  to { stroke-dashoffset: -14; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-heat-arrow { animation: none; }
}


/* ============================================================
   GRAPHS
   ------------------------------------------------------------
   Elements for plots drawn inside demo SVGs: axes, axis label
   text, and gridlines (light reference lines that divide or
   locate regions of a figure — usable outside graphs too).
   ============================================================ */

:root {
  --ag-c-axis:        #45535f;
  --ag-sw-axis:       1.5px;
  --ag-c-gridline:    #dfe5ea;
  --ag-sw-gridline:   1px;
  --ag-fs-axis-label: 13px;

  /* Default data-curve colours: dark red (1) and dark blue (2).
     Demos with special needs may restyle locally, but unless
     otherwise stated these are the curve colours. */
  --ag-c-curve1:      #a93226;
  --ag-c-curve2:      #1f4e79;
  --ag-sw-curve:      2.5px;

  --ag-c-graph-label: #333333;
}

.ag-axis {
  stroke: var(--ag-c-axis);
  stroke-width: var(--ag-sw-axis);
  fill: none;
}

.ag-axis-label {
  font-family: var(--ag-font-ui);
  font-size: var(--ag-fs-axis-label);
  fill: var(--ag-c-axis);
}

/* Modifier: add ALONGSIDE .ag-axis-label to run a y-axis title
   vertically (rotated 90° anticlockwise about its own centre).
   Place the text at the desired centre point:

       <text class="ag-axis-label ag-axis-label-vertical"
             x="56" y="375">T (&deg;C)</text>              */
.ag-axis-label-vertical {
  text-anchor: middle;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
}

.ag-gridline {
  stroke: var(--ag-c-gridline);
  stroke-width: var(--ag-sw-gridline);
  fill: none;
}

/* Data curves (lines, polylines or paths) */
.ag-default-curve1 {
  stroke: var(--ag-c-curve1);
  stroke-width: var(--ag-sw-curve);
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ag-default-curve2 {
  stroke: var(--ag-c-curve2);
  stroke-width: var(--ag-sw-curve);
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Annotation text on figures and graphs that is not an axis
   label ("insulation", "q-in", region names, ...) */
.ag-graph-label {
  font-family: var(--ag-font-ui);
  font-size: var(--ag-fs-axis-label);
  fill: var(--ag-c-graph-label);
}


/* ============================================================
   SLIDERS
   ------------------------------------------------------------
   Styling for the HTML control panel that accompanies a demo.
   Unlike the sections above, these style HTML elements rather
   than SVG. Expected markup:

       <div class="ag-controls">
         <label for="iQ">heat flux q&Prime;
           <span class="ag-readout" id="oQ">3.5</span>
         </label>
         <input type="range" id="iQ" min="1" max="5" step="0.1">
       </div>

   Keep <label for=...> / id pairs so sliders stay accessible.
   ============================================================ */

:root {
  --ag-c-control-accent: #0b6e99;
  --ag-c-control-text:   #1c2733;
}

.ag-controls {
  font-family: var(--ag-font-ui);
  color: var(--ag-c-control-text);
}

.ag-controls label,
.ag-controls .ag-meter-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.88rem;
  margin: 0.7rem 0 0.15rem;
}

.ag-controls input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--ag-c-control-accent);
}

/* Live numeric value shown beside a slider (or elsewhere) */
.ag-readout {
  font-family: var(--ag-font-mono);
  font-weight: 600;
  color: var(--ag-c-control-accent);
}

/* ------------------------------------------------------------
   Read-only meter: displays a value the user cannot adjust
   (e.g. a quantity computed from other sliders). A filled bar
   with NO thumb — the missing thumb is the "display, not
   control" signal. Markup contract (role="meter" keeps it
   readable by screen readers; update aria-valuenow and the
   fill's width from JavaScript together):

       <span class="ag-meter-label" id="hLabel">h</span>
       <div class="ag-meter" role="meter" aria-labelledby="hLabel"
            aria-valuemin="0" aria-valuemax="1" aria-valuenow="0.75">
         <div class="ag-meter-fill" style="width: 75%"></div>
       </div>
   ------------------------------------------------------------ */

:root {
  --ag-c-meter-track:  #eef2f5;
  --ag-c-meter-border: #d4dbe2;
}

.ag-meter {
  height: 10px;
  border: 1px solid var(--ag-c-meter-border);
  border-radius: 5px;
  background: var(--ag-c-meter-track);
  overflow: hidden;
}

.ag-meter-fill {
  height: 100%;
  background: var(--ag-c-control-accent);
  transition: width 0.15s;
}