/* PBS 0.6.8 reference instruments: live labels and selectable gauge faces. */

.pbs-reference-instrument {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  filter:
    drop-shadow(0 14px 20px rgba(0, 0, 0, .58))
    drop-shadow(0 3px 4px rgba(0, 0, 0, .72));
}

.pbs-reference-instrument svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  font-family: "Bahnschrift SemiCondensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-rendering: geometricPrecision;
}

/* The compass selection box must describe the complete visible footprint.
   Pull the round instrument in slightly and use a compact shadow so neither
   bezel nor shadow is clipped by the widget boundary. */
.pbs-reference-compass {
  width: 100%;
  height: 100%;
  filter: none;
}

.pbs-ref-major-tick,
.pbs-ref-compass-major-tick {
  stroke: #f5f2e9;
  stroke-width: 1.18;
  stroke-linecap: square;
}

.pbs-ref-minor-tick,
.pbs-ref-compass-minor-tick {
  stroke: #d9d9d4;
  stroke-width: .32;
  opacity: .9;
}

.pbs-ref-compass-medium-tick {
  stroke: #ece9df;
  stroke-width: .62;
  opacity: .95;
}

.pbs-ref-minute-number,
.pbs-ref-compass-degree {
  fill: #f1eee6;
  font-weight: 650;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke fill;
  stroke: #010202;
}

.pbs-ref-minute-number {
  font-size: 10.3px;
  letter-spacing: -.24px;
  stroke-width: .16px;
}

.pbs-ref-minute-number.top {
  fill: #cf2835;
}

.pbs-ref-clock-index {
  stroke: #c82130;
  stroke-width: 2.15;
  stroke-linecap: round;
  filter: drop-shadow(0 0 .8px rgba(200, 33, 48, .48));
}

.pbs-ref-hour-hand-asset,
.pbs-ref-minute-hand-asset {
  overflow: visible;
  pointer-events: none;
  filter:
    drop-shadow(.65px 1.05px .7px rgba(0, 0, 0, .86))
    drop-shadow(0 0 .25px rgba(255, 255, 255, .14));
}

.pbs-ref-glass-highlight {
  fill: none;
  stroke: #ffffff;
  stroke-width: .55;
  stroke-linecap: round;
  opacity: .11;
}

.pbs-ref-widget-label {
  font-family: "Bahnschrift SemiCondensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .48px;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke fill;
  stroke: #000;
  stroke-width: .15px;
}

.pbs-ref-compass-degree {
  fill: #e8e5dc;
  font-size: 3.65px;
  font-weight: 600;
  letter-spacing: -.08px;
  stroke-width: .12px;
}

.pbs-ref-compass-direction {
  fill: #f0ede5;
  font-weight: 650;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke fill;
  stroke: #020303;
  stroke-width: .16px;
}

.pbs-ref-compass-direction.major {
  font-size: 7.65px;
}

.pbs-ref-compass-direction.minor {
  font-size: 3.75px;
  letter-spacing: -.08px;
}

.pbs-ref-compass-direction.north {
  fill: #d92d3a;
  font-size: 7.65px;
}

.pbs-ref-compass-north-arrow {
  fill: #d92d3a;
  filter: drop-shadow(0 0 .7px rgba(217, 45, 58, .44));
}

.pbs-ref-compass-top-bug {
  fill: #d92d3a;
  stroke: #4c090f;
  stroke-width: .38;
  filter: drop-shadow(0 0 .7px rgba(217, 45, 58, .38));
}

.pbs-ref-compass-reference-bug {
  fill: transparent;
  stroke: #d92d3a;
  stroke-width: .72;
  filter: drop-shadow(0 0 .45px rgba(217, 45, 58, .34));
}

.pbs-ref-compass-inner-ring {
  filter: drop-shadow(0 1px .6px rgba(0, 0, 0, .72));
}

.pbs-ref-compass-center-core {
  filter: drop-shadow(0 1.2px .9px rgba(0, 0, 0, .78));
}

.pbs-ref-heading-value {
  fill: #f4f1e9;
  font-family: "Bahnschrift SemiCondensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 8.7px;
  font-weight: 450;
  letter-spacing: -.18px;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke fill;
  stroke: #000;
  stroke-width: .2px;
}

.pbs-ref-heading-direction {
  fill: #63d8ff;
  font-family: "Bahnschrift SemiCondensed", "DIN Alternate", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 11.1px;
  font-weight: 420;
  letter-spacing: .1px;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke fill;
  stroke: #000;
  stroke-width: .2px;
}

/* Face-specific finishing. No manufacturer logos are rendered. */
.pbs-face-vdo .pbs-ref-minute-number,
.pbs-face-vdo .pbs-ref-compass-degree,
.pbs-face-vdo .pbs-ref-compass-direction {
  fill: #eee9dc;
}

.pbs-face-vdo .pbs-ref-minute-number.top {
  fill: #d24b31;
}

.pbs-face-vdo .pbs-ref-clock-index {
  stroke: #d24b31;
}

.pbs-face-vdo .pbs-ref-glass-highlight,
.pbs-face-plain-black .pbs-ref-glass-highlight {
  opacity: .035;
}

.pbs-face-carbon-fiber .pbs-ref-glass-highlight {
  opacity: .075;
}

.pbs-face-plain-black .pbs-ref-widget-label {
  opacity: .82;
}

.dashboard-widget[data-definition-type="instrumentClock"],
.dashboard-widget[data-definition-type="instrumentCompass"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
}

.dashboard-widget[data-definition-type="instrumentClock"] .widget-frame {
  overflow: visible;
}

/* Keep every visible compass pixel inside the editor's reported widget bounds.
   The reference compass shadow used to bleed past the frame, so the selection
   box could report a smaller size than the rendered instrument. */
.dashboard-widget[data-definition-type="instrumentCompass"] .widget-frame {
  overflow: hidden;
}