/* Compliance Cost Calculator, free version. Loaded after styles.css and
   removed with it: this file and freemium.js are the whole of the free tier,
   so deleting both tags from index.html restores the premium tool. */

/* ===== free version =====
   Gated controls are greyed and padlocked, never removed: the layout is the
   premium layout so the user sees what exists. The padlock reuses the tooltip
   marker, so its wording arrives the same way every other tooltip does. */
.dz-free {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--soft); padding: 2px 8px;
}
.dz-up {
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--navy);
  border: 1px solid var(--navy); padding: 6px 14px; white-space: nowrap;
}
.dz-up:hover { background: var(--navy); color: #fff }

.lk { opacity: .5; cursor: not-allowed }
input.lk, select.lk { background: var(--soft); color: var(--ink-muted) }
button.lk, .btn.lk { background: var(--soft); color: var(--ink-muted); border-color: var(--rule2) }
input[type=range].lk { opacity: .35 }
option.lk { color: var(--grey) }
.lk-i { border-color: var(--rule2); color: var(--ink-muted) }
.lk-i svg { width: 7px; height: 8.4px; fill: currentColor; display: block }
.lk-wrap { display: flex; align-items: center; gap: 8px }
.lk-wrap > :first-child { flex: 1 1 auto; min-width: 0 }
.lk-float { float: right; margin: 2px 0 0 8px }
.freenote {
  display: flex; align-items: center; gap: 8px; font-size: 11px; font-style: italic;
  color: var(--ink-muted); margin: 0 0 12px; text-align: left;
}
tr.lk-row td {
  font-size: 11px; font-style: italic; color: var(--ink-muted); text-align: left;
  border-bottom: none; padding-top: 10px;
}
tr.lk-row td .ii { margin-left: 8px }