/* Allostatic load lesson. All rules scoped under .al-* */

.al-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.al-cap { font-size: 13px; color: var(--dim); text-align: center; }

/* the strip chart */
.al-lanebox { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 4px; }
.al-lane { width: 100%; display: block; overflow: visible; }
.al-stress { fill: rgba(216, 85, 85, .16); }
.al-base { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }
.al-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; }
.al-area { fill: rgba(252, 192, 80, .18); }
.al-b .al-line { stroke: #FF8A8A; }
.al-b .al-area { fill: rgba(216, 85, 85, .2); }
.al-tk { font: 600 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.al-mk { stroke: var(--violet-bright); stroke-width: 1.5; stroke-dasharray: 4 4; }
.al-mkt { font: 700 13px var(--sans); fill: var(--violet-bright); }
.al-name { font: 700 13px var(--sans); fill: var(--text); }
.al-tk0 { text-anchor: start; }
.al-wear { width: 100%; }
.al-meters { width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.al-mini { margin-bottom: 2px; }
.al-mini .al-tk { display: none; }

/* the sprinter */
.al-run { width: 100%; max-width: 380px; }
.al-hr { width: 100%; display: block; overflow: visible; }
.al-hrl { fill: none; stroke: #FF8A8A; stroke-width: 3.5; stroke-linejoin: round; }
.al-gun { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 4; }
.al-gunt { font: 700 13px var(--sans); fill: var(--gold); }

/* the dashboards */
.al-dash { width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.al-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 4px; }
.al-card > b { font: 700 16px var(--serif); }
.al-row { display: flex; flex-direction: column; gap: 1px; }
.al-row span { font-size: 12px; color: var(--dim); line-height: 1.15; }
.al-bar { position: relative; height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--raised) 75%, rgba(216, 85, 85, .35) 75%); }
.al-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--violet-bright); }
.al-row.red .al-bar i { background: #FF6B6B; }
.al-pts { font-style: normal; font-weight: 800; font-size: 14px; color: var(--gold); min-height: 18px; }
.al-dash.scored .al-row.red span { color: #FF8A8A; font-weight: 700; }

@media (max-height: 700px) {
  .al-card { padding: 6px 7px 4px; gap: 2px; }
  .al-lanebox { gap: 2px; }
}