/* ============================================================
   Decarbonizer - 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;
}

/* Locked ghost rows in the vessel table: the free tier shows one real
   vessel, the rest are present as locked rows so the scale of the
   database is visible. Text is dimmed and the row does not respond. */
tr.fm-ghost {
  pointer-events: none;
}
tr.fm-ghost td {
  color: var(--ink-muted, #6b6b75);
  opacity: .5;
}
tr.fm-ghost .l-ck::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--ink-muted, #6b6b75);
  -webkit-mask: var(--fm-lock-svg) center / contain no-repeat;
  mask: var(--fm-lock-svg) center / contain no-repeat;
  opacity: .6;
}
tr.fm-ghost input[type="radio"] {
  display: none;
}

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