/* ============================================================
   Shore Power Terminal Tool - freemium layer styling
   ------------------------------------------------------------
   Taken from the Decarbonizer Freemium build's freemium.css so
   the two tools gate identically: same lock glyph, same greyed
   vocabulary, same Premium cell, same note and upgrade link.
   Only the rules this tool actually uses are carried over; the
   reference's .fm-col and .fm-tag have no markup here and are
   left out rather than shipped unused.

   Loaded from index.html alongside styles.css. Inert in the
   premium build, which applies none of these classes.
   ============================================================ */

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

/* Generic locked control: an input, slider, button or menu item the
   free user can see at its default but cannot operate. The info icon
   inside or beside it stays live so its tooltip still 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. */
input[type="range"].fm-locked {
  filter: grayscale(1);
}


/* Locked rows in the vessel table: the free tier opens one real
   vessel, the rest show their figures and cannot be opened. The row
   does not respond, the radio goes and the lock takes its place in
   the same cell.

   A row that carries REAL FIGURES cannot be dimmed as hard as one
   reading "Premium": at .5 the specification was there and unreadable,
   which is the worst of both. Dimmed enough to read as not selectable
   and no further. */
tr.fm-ghost {
  pointer-events: none;
}
tr.fm-ghost td {
  color: var(--ink-muted, #6b6b75);
  opacity: .78;
}
tr.fm-ghost .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. 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);
}

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