/* The embeddable gauge card. Same palette and type as the site, sized for an iframe of about 380 × 240. */
@font-face { font-family: Alegreya; src: url(/fonts/alegreya-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Alegreya; src: url(/fonts/alegreya-latin-500-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/alegreya-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/fonts/alegreya-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --sea: #DCE9EA;
  --water: #BCDAE3;
  --plate: #F8FAF5;
  --ink: #14363F;
  --ink-2: #365762;
  --river: #1A5D7A;
  --deep: #134C68;
  --heather: #843A79;
  --quiet: #5C6F75;
  --serif: Alegreya, Georgia, serif;
  --sans: "Alegreya Sans", "Gill Sans", Calibri, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--plate); color: var(--ink); font: 400 15px/1.3 var(--sans); font-variant-numeric: lining-nums; overflow: hidden; }
p { margin: 0; }
a { color: var(--river); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--heather); outline-offset: 1px; }
svg { display: block; }

.e { display: grid; grid-template-columns: 32px minmax(0, 1fr); height: 100%; border: 1px solid rgba(20, 54, 63, .28); background: var(--plate); }
.e-staff { width: 32px; height: 100%; }
.e-staff-plate { fill: #E9EFE9; }
.e-staff-marks { fill: var(--ink); }
.e-staff-water { fill: #2A7A9B; opacity: .42; }
.e-staff-level { stroke: var(--deep); stroke-width: 2.4; vector-effect: non-scaling-stroke; }

.e-body { display: flex; flex-direction: column; min-width: 0; padding: 9px 12px 8px; }
.e-name { font: 500 1.32rem/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-name a { color: var(--ink); text-decoration: none; }
.e-name a:hover { text-decoration: underline; }
.e-place { font: italic 500 .98rem/1.2 var(--serif); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.e-level { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin-top: 4px; }
.e-num { font: 500 1.9rem/1.05 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.e-tag { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--quiet); }
.e-move { font-size: .95rem; color: var(--ink-2); }
.e-spark { flex: 1; width: 100%; min-height: 26px; margin-top: 4px; }
.e-area { fill: var(--water); }
.e-line { fill: none; stroke: var(--deep); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.e-high { stroke: var(--heather); stroke-width: 1.2; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.e-when { font-size: .8rem; color: var(--quiet); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(20, 54, 63, .2); font-size: .78rem; color: var(--ink-2); }
.e-brand { font: italic 500 .98rem/1 var(--serif); color: var(--ink); text-decoration: none; margin-right: auto; }
.e-warn { font-weight: 500; color: var(--ink); }
.e-src { width: 100%; }

.e-stale .e-num, .e-stale .e-name a { color: var(--quiet); }
.e-stale .e-spark { display: none; }
.e-stale .e-when { flex: 1; color: var(--ink-2); font-size: .9rem; white-space: normal; }