/* ============================================================
   FuelEU Pool Tool - freemium layer styling
   ------------------------------------------------------------
   Applies the gate treatment described in the freemium guidance:
   gated elements stay in the layout, greyed and locked, never
   removed. Built on the tool's own locked-state vocabulary
   (.is-soon opacity .45 + not-allowed; .menu-off opacity .4 +
   pointer-events none) so a gate reads as the same software,
   not a bolt-on. Loaded only alongside freemium.js; inert
   otherwise. British spelling, navy #0A1543, Poppins inherited.
   ============================================================ */

/* 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;
}
: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");
}

/* Generic locked control: an input, slider, button or menu item the
   free user can see at its default but cannot operate. Reuses the
   is-soon feel. The info icon inside stays live so its tooltip works. */
.fm-locked {
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.fm-locked .ii,
.fm-locked ~ .ii {
  pointer-events: auto;
  cursor: help;
  opacity: 1;
}

/* A slider rendered at its default, greyed and non-draggable. The
   track and thumb are dimmed; the value label beside it stays legible
   so the user can read the assumption they cannot change. */
input[type="range"].fm-locked {
  filter: grayscale(1);
}

/* A withheld table cell. One word, Premium, muted and centred, in
   place of a value the free tier does not carry. */
.fm-cell {
  color: var(--ink-muted, #6b6b75);
  font-style: italic;
  text-align: center;
  opacity: .8;
}

/* A withheld column header: the field name stays readable so the user
   sees what is recorded, with a lock ahead of it. */
th.fm-col {
  color: var(--ink-muted, #6b6b75) !important;
}
th.fm-col .fm-lock {
  margin-right: 3px;
}

/* A withheld option in a fuel select: listed, so the user sees the fuel
   exists, but not selectable. */
option.fm-opt { color: var(--ink-muted, #6b6b75) }

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

/* The single upgrade route. One consistent link, navy, no shouting.
   Appears once per gated area, never as a per-element nag. */
.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 controls that are not table
   cells (a locked action button, a locked panel heading). */
.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);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: 1px;
}
.fm-tag .fm-lock {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  background: var(--navy, #0A1543);
}

/* The snapshot line sitting on the prices section. */
.fm-snapshot {
  font-size: 12px;
  color: var(--ink-muted, #6b6b75);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The upgrade route at the foot of the Save case menu. */
.fm-menu-upgrade {
  display: block;
  padding: 9px 14px;
  border-top: 1px solid var(--line, #e6e9f0);
  white-space: normal;
  font-size: .85rem
}

/* A gated menu item: shown, so the user sees the action exists, but inert. */
#tool .dz-menu a.fm-off {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed
}

/* Square corners, like everything else in this tool. */
.fm-tag { border-radius: 0 }

/* The notes sit inside a section, under the table they describe. */
.fm-note { margin: 10px 0 0 }
.fm-snapshot { margin: 0 0 12px }

/* The transient notice. */
.fm-notice {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(560px, 92vw);
  background: #fff;
  color: var(--ink, #15151a);
  border: 1px solid var(--navy, #0A1543);
  padding: 10px 14px;
  font-family: Poppins, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(10, 21, 67, .16);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity .4s
}