/* Gauge's shared drawing parts, used by the app and the run site (src/gauge/ui-art.ts, ui-ruler.ts): the cyanotype
   sheet, the long tick scale, the reading ruler, chips and the brand lockup. Tokens are in rer-theme.css. */
.g-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The sheet: Prussian blue with paper grain, edges torn by the deckle filter, white construction lines inset 24px
   that cross at the corners. Content inside is real text in white. */
.g-sheet { position: relative; isolation: isolate; color: #fff; padding: 48px; }
.g-sheet::before { content: ''; position: absolute; inset: 6px; z-index: -2; background: var(--g-cyan) url('/brand/grain.svg'); filter: url(#g-deckle); }
.g-sheet::after {
  content: ''; position: absolute; inset: 12px; z-index: -1; pointer-events: none; opacity: .7;
  background:
    linear-gradient(#fff, #fff) 0 12px / 100% 1px no-repeat,
    linear-gradient(#fff, #fff) 0 calc(100% - 12px) / 100% 1px no-repeat,
    linear-gradient(#fff, #fff) 12px 0 / 1px 100% no-repeat,
    linear-gradient(#fff, #fff) calc(100% - 12px) 0 / 1px 100% no-repeat;
}
.g-scale {
  position: absolute; left: 30px; right: 30px; bottom: 24px; height: 12px; pointer-events: none; opacity: .85;
  background:
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 60px) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat;
}

/* The reading ruler (SVG drawn in percentages). */
.g-ruler { display: block; overflow: visible; color: var(--rer-text); }
.g-ruler .g-base { stroke: var(--g-tick); stroke-width: 1; }
.g-ruler .g-tick { stroke: var(--g-tick); stroke-width: 1; }
.g-ruler .g-fill, .g-ruler .g-mark { fill: var(--g-cyan); }
.g-ruler--over .g-fill { fill: var(--g-cyan); }
.g-ruler--over .g-mark, .g-ruler--over .g-reading { fill: var(--g-warn); }
.g-ruler text { font-size: 12px; fill: var(--rer-muted); }
.g-ruler .g-reading { fill: var(--rer-text); font-weight: 600; }
.g-ruler--light .g-base, .g-ruler--light .g-tick { stroke: #fff; stroke-opacity: .85; }
.g-ruler--light .g-fill, .g-ruler--light .g-mark, .g-ruler--light text, .g-ruler--light .g-reading { fill: #fff; }

/* Chips: approved in the accent, warnings in rust on its wash, everything else ink. */
.g-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid currentColor; border-radius: var(--g-radius-chip); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--rer-text); background: transparent; }
.g-chip--approved { color: var(--g-cyan); }
.g-chip--warn { color: var(--g-warn); background: var(--g-warn-wash); border-color: color-mix(in srgb, var(--g-warn) 45%, transparent); }
.g-sheet .g-chip { color: #fff; }

.g-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--rer-text); text-decoration: none; font-family: var(--rer-font-heading); font-weight: 700; font-size: 22px; letter-spacing: var(--g-track-heading); }
.g-brand img { display: block; width: 38px; height: 20px; }