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

   One treatment for every gated element: 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 value, and inert. */
#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 }

/* A category the free tier does not open. Dimmed enough to read as not
   selectable and no further: it still has to be legible, because seeing that
   it exists is the point. */
#tool option.lk { color: var(--ink-muted) }

.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;
}