/*
 * The grain control block (.tg-grain), shared by the gradient page and the
 * generator. Markup comes from tgc_grain_controls() in includes/grain.php.
 */

.tg-grain { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; border: 1px solid #F0F0F0; border-radius: 20px; background: #fafafa; font-size: 13px; color: #333 }
.tg-grain-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; user-select: none }
.tg-grain-switch input { position: absolute; opacity: 0; pointer-events: none }
.tg-grain-track { width: 34px; height: 20px; border-radius: 20px; background: #d9d9d9; position: relative; transition: background .15s; flex-shrink: 0 }
.tg-grain-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s }
.tg-grain-switch input:checked + .tg-grain-track { background: #111 }
.tg-grain-switch input:checked + .tg-grain-track::after { transform: translateX(14px) }
.tg-grain-switch input:focus-visible + .tg-grain-track { outline: 2px solid #5b4fcf; outline-offset: 2px }
.tg-grain-new { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: #f0eeff; color: #5b4fcf; padding: 2px 6px; border-radius: 999px}

.tg-grain-amount-wrap { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 160px; min-width: 140px }
.tg-grain .tg-grain-amount { flex: 1; accent-color: #111; margin: 0; -webkit-appearance: auto; appearance: auto; border: 0; background: none; padding: 0; height: auto; box-shadow: none }  /* Kadence boxes every input */
.tg-grain-value { font-family: monospace; font-size: 12px; color: #666; min-width: 34px; text-align: right }

.tg-grain-size { display: inline-flex; border: 1px solid #e3e3e3; border-radius: 999px; overflow: hidden }
.tg-grain-size button { padding: 5px 10px; border: 0; background: #fff; font-size: 12px; font-weight: 600; color: #666; cursor: pointer }
.tg-grain-size button + button { border-left: 1px solid #e3e3e3 }
.tg-grain-size button.on { background: #111; color: #fff }

/* Off: the controls stay readable (they turn grain on when touched), only
   the slider and the selected size go grey. Fading them to 45% opacity put
   their text under 2:1 contrast. */
.tg-grain:not(.is-on) .tg-grain-amount { accent-color: #A9A9B2 }
.tg-grain:not(.is-on) .tg-grain-size button.on { background: #6E6E78 }
.tg-grain-how { font-size: 12px; color: #6E6E78; margin-left: auto; text-decoration: underline; text-underline-offset: 2px }
.tg-grain-how:hover { color: #111 }