/* ============================================================
   FuelEU Quickscan - freemium layer styling
   ------------------------------------------------------------
   Applies the gate treatment from the freemium guidance: gated
   elements stay in the layout, greyed and locked, never removed.
   Same vocabulary as the Decarbonizer's freemium layer, so the
   two tools read as one product family. Loaded only alongside
   freemium.js; inert otherwise.
   ============================================================ */

:root {
  --fm-lock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V7a6 6 0 0 1 12 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h8V7a4 4 0 0 0-8 0v3z'/%3E%3C/svg%3E");
}

/* The single lock glyph, drawn not typed, so it carries no font
   dependency and no emoji. Sized to sit on a line of body text. */
.fm-lock {
  display: inline-block;
  width: 11px;
  height: 11px;
  vertical-align: -1px;
  margin-right: 5px;
  flex: none;
  background: var(--ink-muted, #6b6b75);
  -webkit-mask: var(--fm-lock-svg) center / contain no-repeat;
  mask: var(--fm-lock-svg) center / contain no-repeat;
}

/* A locked control: shown at its default value, greyed, not operable.
   pointer-events is off, so the tooltip is carried by the field wrapper
   rather than by the control itself; freemium.js places it there. */
.fm-locked {
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* The field wrapper of a locked control answers the mouse in its place,
   so the gate can still explain itself on hover. */
.kv > .f.fm-host,
th.fm-host {
  cursor: help;
}

/* The count and snapshot lines. Reuses the tool's own note rhythm; the
   lock and the single upgrade link live here. Factual, not a banner. */
.fm-note,
.fm-snapshot {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-muted, #6b6b75);
  line-height: 1.5;
}
.fm-note { margin: 14px 0 0 }
.fm-snapshot { margin: 0 0 20px }
.fm-note .fm-lock,
.fm-snapshot .fm-lock { align-self: center }

/* The single upgrade route. One consistent link, navy, no shouting. */
.fm-upgrade {
  color: var(--navy, #0A1543);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 21, 67, .35);
  cursor: pointer;
  white-space: nowrap;
}
.fm-upgrade:hover { border-bottom-color: var(--navy, #0A1543) }

/* A small inline tag reading Premium, for a locked control that is not a
   table cell. Square, like everything else in the tool. */
.fm-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--navy, #0A1543);
  background: var(--soft, #f6f7fa);
  border: 1px solid var(--line, #e6e9f0);
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: 1px;
}
.fm-tag .fm-lock {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  background: var(--navy, #0A1543);
}

/* A withheld table cell. One word, Premium, muted, in place of a value the
   free tier does not carry. The row keeps its year, so the shape and length
   of the trajectory stay visible. */
.fm-cell {
  color: var(--ink-muted, #6b6b75);
  font-style: italic;
  opacity: .8;
}
tr.fm-row td:first-child {
  color: var(--ink-muted, #6b6b75);
  opacity: .8;
}

/* A withheld option stays in the list so the full set is visible. */
option:disabled {
  color: var(--ink-muted, #6b6b75);
}