/* The freemium layer. Loaded after styles.css and only in the free build, so
   the premium build carries none of it.

   Every gated element uses ONE treatment: dimmed, inert, and carrying a
   tooltip that says what premium gives. Never hidden, never removed from the
   layout - a reader who cannot see that something exists cannot want it. */

:root {
  /* Monochrome padlock, inline so there is no asset to host and no codepoint
     escape to get mangled. Tints with currentColor. */
  --fm-lock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 5a3 3 0 0 1 6 0v3H9V7z"/></svg>');
}

/* A locked control: visible, at its default, and inert. */
#tool .lk,
#tool input.lk,
#tool select.lk {
  background: var(--sel-row);
  color: var(--ink-muted);
  cursor: not-allowed;
  pointer-events: none;
}
#tool input[type=range].lk { opacity: .5 }
#tool input[type=checkbox].lk { opacity: .5 }

/* A locked fleet row keeps its figures - the lock is on USE, not on sight, so
   a reader can still see what a second ship would look like. Dimmed enough to
   read as not selectable and no further. */
#tool tr.fm-ghost td { opacity: .78 }
#tool tr.fm-ghost input,
#tool tr.fm-ghost select { pointer-events: none }

/* The lock glyph, in the tone of the text it sits beside. */
.fm-lock {
  display: inline-block;
  width: .82em;
  height: .82em;
  margin-right: 6px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: var(--fm-lock) center / contain no-repeat;
  mask: var(--fm-lock) center / contain no-repeat;
}

/* The counts and the snapshot note. Factual, not a banner. */
#tool .fm-note {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 10px;
}
#tool .fm-note a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}