/* Case Converter — tool-specific styles. Most styling comes from toolkit.css.
   All selectors scoped under #trp-tool-root and prefixed .trp-cc- so nothing
   collides with Astra / Elementor / other tools. Uses the shared tokens. */

#trp-tool-root .trp-cc-hint{
  font-family:var(--trp-font-head);font-weight:600;font-size:13.5px;
  color:var(--trp-ink);margin:16px 0 8px;
}
#trp-tool-root .trp-cc-modes{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;
}
@media(min-width:560px){
  #trp-tool-root .trp-cc-modes{grid-template-columns:repeat(3,1fr);}
}
#trp-tool-root .trp-cc-mode{width:100%;}
#trp-tool-root .trp-cc-mode.is-active{
  background:var(--trp-accent);color:var(--trp-on-accent);border-color:var(--trp-accent);
}
#trp-tool-root .trp-cc-mode.is-active:hover{background:var(--trp-accent-hov);}
#trp-tool-root .trp-cc-output{background:var(--trp-surface-2);min-height:150px;}
#trp-tool-root .trp-cc-actions{margin-top:14px;}

/* content: case options list on the how-to section */
.trp-cc-optlist{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.trp-cc-optlist li{
  background:var(--trp-surface);border:1px solid var(--trp-border);
  border-radius:var(--trp-r-md);padding:11px 14px;font-size:14px;color:var(--trp-ink-2);
}
.trp-cc-optlist li strong{color:var(--trp-ink);}