/* counter.css - the /counter page. Builds on /css/theme.css; the counter's own look is render.css. */

/* right: the selected counter */
.ct-main { min-width: 0; }
.ct-empty { padding: var(--space-5); text-align: center; }
.ct-empty p { margin: 0 auto var(--space-4); max-width: 460px; }
.ct-head { display: flex; align-items: center; gap: var(--space-2); padding: 10px 12px; margin-bottom: var(--space-4); }
.ct-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-name { font: 600 16px var(--font); max-width: 360px; }
.ct-name-ro { font: 600 16px var(--font); }
.ct-head-actions { display: flex; align-items: center; gap: var(--space-2); }
.ct-head-actions[hidden] { display: none; }
/* the streamer's lock for mods */
.ct-lock { display: inline-flex; align-items: center; gap: 6px; }
.ct-lock.on { box-shadow: inset 0 0 0 1px #ff9a3c; color: #ffb36b; }
.ct-val-ro { min-width: 70px; text-align: right; font: 700 17px var(--font); }
.ct-locked-note { display: inline-flex; align-items: center; gap: 5px; color: #ffb36b; }

.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1100px) { .ct-grid { grid-template-columns: 1fr; } .ct-preview-col { order: -1; } }
.ct-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ct-col > .card { padding: var(--space-4); }
.ct-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.ct-sec-head h3 { margin: 0; }
.ct-preview-col { position: sticky; top: var(--space-4); }
@media (max-width: 1100px) { .ct-preview-col { position: static; } }

/* counts */
.ct-item { padding: 8px 0; border-top: 1px solid var(--border); }
.ct-item:first-child { border-top: 0; padding-top: 0; }
.ct-item.off .ct-item-main > :not([data-more]):not(.ct-vis):not(.ct-trash) { opacity: .55; }
.ct-item-main { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ct-label { flex: 1 1 60px; min-width: 56px; font-weight: 600; }
.ct-label-ro { flex: 1 1 120px; font: 600 15px var(--font); }
.ct-goal { display: flex; align-items: center; gap: 4px; color: var(--text-muted); }
.ct-goal .stepper.sm .stepper-val { width: 46px; }
.ct-item-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); padding: 10px 12px; background: var(--surface-sunken); border-radius: var(--radius-sm); }
.ct-item-more[hidden] { display: none; }
.ct-inline { display: inline-flex; align-items: center; gap: 6px; font: 13px var(--font); color: var(--text-muted); }
.ct-num { width: 80px; }
.ct-vis { flex-shrink: 0; }
/* remove: a trash icon, then a small "Remove?" to confirm */
/* confirm popup (reset) */
.ct-pop {
  position: absolute; z-index: 50; width: 290px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow);
  font: 13px/1.45 var(--font); color: var(--text);
}
.ct-pop ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-muted); }
.ct-pop li + li { margin-top: 2px; }
.ct-pop-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
/* little ? with a tooltip */
.ct-help {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 4px; vertical-align: 1px;
  border-radius: 50%; background: var(--surface-2); color: var(--text-muted); font: 700 10px var(--font); cursor: help;
}
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
  width: max-content; max-width: 260px; white-space: pre-line;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: #0c2328; color: var(--text); box-shadow: var(--shadow);
  font: 400 12px/1.45 var(--font); text-transform: none; letter-spacing: 0;
}
.ct-mods-note { margin: var(--space-2) 0 0; }
.ct-adv { margin-top: var(--space-3); font-size: 13px; }
/* Advanced: Stream Deck links (orange border marks the advanced bits) */
.ct-counts { --ct-adv: #ff9a3c; }
.ct-deck { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0 44px; padding: 5px 8px; border: 1px solid var(--ct-adv); border-radius: var(--radius-sm); }
.ct-deck-label { font: 600 11px var(--font); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.ct-deck .btn-sm { padding: 3px 9px; font-size: 12px; }
.ct-deck-help { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding: 10px 12px; background: var(--surface-sunken); border: 1px solid var(--ct-adv); border-radius: var(--radius-sm); font: 13px/1.45 var(--font); color: var(--text-muted); }
.ct-deck-help p { margin: 0; flex: 1 1 260px; }
.ct-deck-help .ct-deck-tip { flex-basis: 100%; }
.ct-deck-help code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--text); font-size: 12px; }
.ct-deck-help b { color: var(--text); }
.ct-mods-note a { color: var(--accent); }
/* hide the number spinners: +/- buttons do that job */

/* look */
.ct-look summary h3 { display: inline; margin: 0; }
.ct-look[hidden] { display: none; }
.ct-look-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.ct-look-grid .ct-wide, .ct-sub { grid-column: 1 / -1; }
@media (max-width: 520px) { .ct-look-grid { grid-template-columns: 1fr; } }
.ct-look-grid [hidden] { display: none; }
.ct-sub { margin: var(--space-2) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); font: 600 12px var(--font); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ct-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ct-range { display: flex; align-items: center; gap: var(--space-2); }
.ct-range output { min-width: 52px; text-align: right; font: 13px var(--font); color: var(--text-muted); }
.ct-sep { max-width: 100px; }
.ct-anim { width: auto; }

/* preview */
.ct-preview { position: relative; overflow: hidden; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.ct-preview[data-bg="checker"] { background: repeating-conic-gradient(#2a2d36 0 25%, #1d2027 0 50%) 0 0 / 20px 20px; }
.ct-preview[data-bg="dark"] { background: #0e0f13; }
.ct-preview[data-bg="light"] { background: #e9ebf0; }
#ct-preview-root { width: max-content; min-width: 100%; transform-origin: top left; }
.ct-bgpick span { padding: 3px 8px; font-size: 12px; }
#ct-preview-note { margin: var(--space-2) 0 0; }

.ct-preview.off #ct-preview-root { opacity: .35; }

/* the landing page's counters (counter/landing.js): on a stand-in for the stream, with their buttons */
.ldc-stage { display: flex; align-items: center; justify-content: center; min-height: 230px; padding: 20px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(500px 220px at 30% 20%, rgba(0, 191, 255, .25), transparent 70%), linear-gradient(135deg, #1b2735 0%, #2d1b3d 100%); }
.ldc-stage.ldc-small { min-height: 120px; padding: 14px; }
.ldc-root { width: 100%; }
.ldc-looks { display: flex; justify-content: center; margin: 12px auto 0; width: fit-content; }
.ldc-controls { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ldc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 10px; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.ldc-row > span { font: 600 14px var(--font); }
.ldc-val { min-width: 48px; text-align: center; font: 700 16px var(--font); font-variant-numeric: tabular-nums; }
.ldc-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: center; }
.ldc-goals > div > span { display: block; margin-top: 6px; font: 600 12px var(--font); color: var(--text-muted); }
.ldc-bar { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }