/* Creator tools kit (2026-10-11): shared by the influencer rate, UGC rate, follower growth, website ad revenue and
 * earned media value pages. Every rule sits under #visu-tools .vt-ck (the class those pages put on their app and on their
 * own content sections). Markup: views/_creator-kit.cjs. Hairlines are 1px. */
#visu-tools .vt-ck .vt-in > * + * { margin-top: 16px !important; }
#visu-tools .vt-ck .vt-in > .vt-hint + .vt-hint { margin-top: 8px !important; }
#visu-tools .vt-ck .vt-fieldset { margin: 20px 0 0 !important; padding-top: 18px !important; border-top: 1px solid var(--vt-line) !important; }
#visu-tools .vt-ck .vt-fieldset > legend { float: left; width: 100%; margin-bottom: 4px; font-size: 15px; font-weight: 680; color: var(--vt-ink); }
#visu-tools .vt-ck .vt-fieldset > legend + * { clear: both; }
#visu-tools .vt-ck .vt-fieldset > * + * { margin-top: 12px !important; }
/* Money symbol inside the box: "US$" and "MX$" need more room than "$". A suffix (%, x) sits at the right edge. */
#visu-tools .vt-ck .vt-unit[data-unit="money"]:not(:empty) + input { padding-left: 32px !important; }
#visu-tools .vt-ck .vt-unit[data-unit="money"][data-w="2"]:not(:empty) + input { padding-left: 44px !important; }
#visu-tools .vt-ck .vt-unit[data-unit="money"][data-w="3"]:not(:empty) + input { padding-left: 54px !important; }
#visu-tools .vt-ck .vt-unit[data-unit="suffix"]:not(:empty) { left: auto; right: 14px; }
#visu-tools .vt-ck .vt-unit[data-unit="suffix"]:not(:empty) + input { padding-left: 14px !important; padding-right: 38px !important; }
#visu-tools .vt-ck input[aria-invalid="true"] { border-color: var(--vt-err) !important; }
#visu-tools .vt-ck .vt-grid-2 { align-items: start; }
#visu-tools .vt-ck .vt-grid-3 { display: grid; align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* Result panel */
#visu-tools .vt-ck .vt-big-num { font-size: clamp(32px, 3.8vw, 46px); overflow-wrap: anywhere; }
#visu-tools .vt-ck .vt-metrics dd { overflow-wrap: anywhere; }
#visu-tools .vt-ck .vt-out .vt-style { margin-top: 0; }
#visu-tools .vt-ck .vt-out .vt-style .vt-group { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 12px; }
#visu-tools .vt-ck .vt-out .vt-check { min-height: 0; align-self: start; }
/* The text a creator copies (quote, summary) and the formula with the typed numbers in it. */
#visu-tools .vt-ck-text { display: block; margin: 0 !important; padding: 14px; border-radius: 12px; background: var(--vt-bg); border: 1px solid var(--vt-line); color: var(--vt-ink);
  font: inherit; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
#visu-tools .vt-ck-formula { padding: 12px 14px; border-radius: 12px; background: var(--vt-bg); font-size: 14px; line-height: 1.55; color: var(--vt-ink); font-variant-numeric: tabular-nums; white-space: pre-line; }
#visu-tools .vt-ck-formula b { font-weight: 650; }
/* Two projections or two results side by side. */
#visu-tools .vt-ck-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#visu-tools .vt-ck-pair > div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--vt-line); background: var(--vt-surface); display: grid; gap: 2px; align-content: start; }
#visu-tools .vt-ck-pair .vt-ck-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vt-muted); }
#visu-tools .vt-ck-pair strong { font-size: 19px; font-weight: 700; color: var(--vt-ink); line-height: 1.25; }
#visu-tools .vt-ck-pair span { font-size: 13px; color: var(--vt-muted); }

/* How it works band + sources */
#visu-tools .vt-ck-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
#visu-tools .vt-ck-method h3 { font-size: 17px !important; font-weight: 680 !important; margin-bottom: 6px !important; }
#visu-tools .vt-ck-method p { font-size: 15.5px; }
#visu-tools .vt-ck-sources { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--vt-line); }
#visu-tools .vt-ck-sources ul { margin-top: 10px !important; padding-left: 20px !important; display: grid; gap: 6px; font-size: 15px; }

@media (max-width: 860px) {
  #visu-tools .vt-ck-method-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Two or three long options: wrap them instead of the scroll strip tools.css uses for long option lists. */
  #visu-tools .vt-ck .vt-seg-items { flex-wrap: wrap; overflow-x: visible; margin: 0; padding: 0; }
  #visu-tools .vt-ck .vt-seg-item span { white-space: normal; }
  #visu-tools .vt-ck .vt-grid-3 { grid-template-columns: 1fr; }
  #visu-tools .vt-ck-pair { grid-template-columns: 1fr; }
}