/* NightKillerYT — Countdown Maker. Loaded after tools.css and tools-patterns.css (the Pattern studio's look: glass
   cards, one pink accent for what is picked). This file adds the icon picker, the quick texts, the number buttons,
   the move buttons, and the boxes on the preview that you drag (with a size handle on the picked one). */

.countdown-app .pattern-overlay {
  cursor: var(--nc-arrow, default);
}

/* Fields shown together under one condition keep the panel's spacing. */
.cd-group {
  display: grid;
  gap: 14px;
}


/* ---------- icon picker ---------- */
.cd-icons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.cd-icon-group {
  margin: 4px 0 -2px;
  color: var(--text-3);
  font: 600 12px/1.2 var(--font-body);
}

.cd-icon {
  position: relative;
  min-width: 0;
}

.cd-icon input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cd-icon > span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background-color: transparent;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
}

.cd-icon-art {
  width: 74%;
  height: 74%;
}

.cd-icon-own {
  width: 50%;
  height: 50%;
}

.cd-icon:hover > span {
  border-color: var(--glass-border-hover);
  color: var(--text);
}

.cd-icon input:checked + span {
  border-color: var(--accent-line);
  background-color: var(--accent-soft);
  color: var(--text);
}

.cd-icon input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- texts ---------- */
.textarea.cd-text {
  min-height: 0;
  padding: 10px 14px;
  font-weight: 650;
  line-height: 1.35;
  resize: vertical;
}

.cd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cd-chip,
.cd-bump button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background-color: transparent;
  color: var(--text-2);
  font: 650 12px/1 var(--font-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
}

.cd-chip:hover,
.cd-bump button:hover {
  border-color: var(--glass-border-hover);
  color: var(--text);
}

.cd-chip[aria-pressed="true"] {
  border-color: var(--accent-line);
  background-color: var(--accent-soft);
  color: var(--text);
}

.cd-bump {
  display: inline-flex;
  gap: 6px;
}

.cd-bump button {
  min-width: 42px;
  min-height: 30px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* ---------- moving a part ---------- */
.cd-move {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.cd-center {
  min-height: 40px;
}

.cd-nudges {
  display: inline-flex;
  gap: 6px;
}

.cd-nudge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
}

.cd-nudge:hover {
  border-color: var(--glass-border-hover);
  color: var(--text);
}

/* ---------- size ---------- */
.cd-sizes .cd-size-own {
  grid-column: 1 / -1;
}

.pattern-size input:disabled + .pattern-size-card {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- the parts on the preview ---------- */
/* Each part has a see-through box over it: drag it to move the part (touch too), arrow keys move it when it has
   focus. The picked part shows a dashed frame and a size handle in its corner. */
.cd-box {
  --x: 50%;
  --y: 50%;
  --w: 10%;
  --h: 10%;
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: max(44px, var(--w));
  height: max(44px, var(--h));
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.cd-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px dashed transparent;
  border-radius: inherit;
  pointer-events: none;
}

.cd-box:hover::before {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.cd-box.is-selected::before {
  border-color: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.cd-box.is-dragging {
  cursor: grabbing;
}

.cd-box:focus {
  outline: none;
}

.cd-box:focus-visible::before {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 0 4px rgba(255, 92, 168, 0.3);
}

/* The size handle sits on the box's bottom right corner (same place values as the box). */
.cd-size-handle {
  --x: 50%;
  --y: 50%;
  --w: 10%;
  --h: 10%;
  position: absolute;
  top: calc(var(--y) + max(22px, var(--h) / 2));
  left: calc(var(--x) + max(22px, var(--w) / 2));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.cd-size-handle::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: var(--accent-strong);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.5);
}

.cd-size-handle:focus {
  outline: none;
}

.cd-size-handle:focus-visible::before {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 5px var(--accent);
}

/* ---------- layers ---------- */
.cd-layers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cd-layers-head .field-hint {
  margin: 0;
}

.cd-add-text {
  flex: none;
  min-height: 40px;
}

.cd-layers {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-layer {
  --drag: 0px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 46px;
  padding: 3px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background-color: rgba(255, 255, 255, 0.02);
}

.cd-layer.is-selected {
  border-color: var(--accent-line);
  background-color: var(--accent-soft);
}

.cd-layer.is-hidden .cd-layer-main {
  opacity: 0.5;
}

.cd-layer.is-dragging {
  z-index: 2;
  transform: translateY(var(--drag));
  box-shadow: var(--shadow-md);
  background-color: var(--surface-2);
}

.cd-layer.is-drop-above::before,
.cd-layer.is-drop-below::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.cd-layer.is-drop-above::before {
  top: -5px;
}

.cd-layer.is-drop-below::after {
  bottom: -5px;
}

.cd-layer-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: 600 14px/1.2 var(--font-body);
  text-align: left;
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
}

.cd-layer-main > .icon {
  flex: none;
  color: var(--text-3);
}

.cd-layer-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-layer-tag {
  flex: none;
  color: var(--text-3);
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cd-layer-grip,
.cd-layer-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
  -webkit-tap-highlight-color: transparent;
}

.cd-layer-grip {
  width: 26px;
  color: var(--text-3);
  cursor: grab;
  touch-action: none;
}

.cd-layer-grip:active {
  cursor: grabbing;
}

.cd-layer-btn:hover:not(:disabled),
.cd-layer-grip:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.cd-layer-btn:disabled {
  opacity: 0.3;
  cursor: var(--nc-arrow, default);
}

.cd-layer-tools {
  display: inline-flex;
  flex: none;
}

.cd-layer-eye[aria-pressed="true"] {
  color: var(--text-3);
}

.cd-layer-main:focus-visible,
.cd-layer-btn:focus-visible,
.cd-layer-grip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cd-text-name {
  max-width: 14ch;
  overflow: hidden;
  color: var(--text-3);
  font: 600 12.5px/1.2 var(--font-body);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-text-panel .panel-title {
  min-width: 0;
}

/* ---------- font picker ---------- */
.cd-font {
  position: relative;
}

.cd-font-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(8, 7, 11, 0.6);
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.cd-font-button:hover {
  border-color: var(--border-hover);
}

.cd-font-button:focus-visible,
.cd-font-button[aria-expanded="true"] {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(255, 92, 168, 0.14);
}

.cd-font-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-font-chevron {
  flex: none;
  color: var(--text-3);
}

/* The list is moved to the page's end while open (so nothing clips it): a menu under the button. */
.cd-font-list {
  position: fixed;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--glass-border-hover);
  border-radius: 16px;
  background: rgba(20, 17, 28, 0.97);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.cd-font-list:focus {
  outline: none;
}

.cd-font-head {
  display: none;
}

.cd-font-options {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}

.cd-font-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 19px;
  line-height: 1.2;
  cursor: var(--nc-hand, pointer);
}

.cd-font-option.is-active {
  background: rgba(255, 255, 255, 0.07);
}

.cd-font-option[aria-selected="true"] {
  color: var(--accent-ink);
}

.cd-font-sample {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-font-check {
  flex: none;
  visibility: hidden;
}

.cd-font-option[aria-selected="true"] .cd-font-check {
  visibility: visible;
}

.cd-font-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(4, 3, 7, 0.55);
}

/* On phones: a sheet from the bottom, with a title and a close button. */
.cd-font-list.is-sheet {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-height: min(70vh, 520px);
  border-radius: 20px 20px 0 0;
  border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cd-font-list.is-sheet .cd-font-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 4px 20px;
  color: var(--text);
  font: 650 15px/1.2 var(--font-display);
}

.cd-font-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
}

.cd-font-list.is-sheet .cd-font-option {
  min-height: 52px;
  font-size: 21px;
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .cd-icons {
    gap: 5px;
  }


  /* The quick texts: one row you swipe, like the looks under the preview. */
  .cd-chips {
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 2px 16px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }

  .cd-chip {
    flex: none;
    scroll-snap-align: start;
  }
}

@media (max-width: 360px) {
  .cd-icons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cd-nudge {
    width: 36px;
  }
}

@media (pointer: coarse) {
  .cd-chip {
    min-height: 38px;
  }

  .cd-bump button {
    min-height: 36px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cd-icon > span,
  .cd-chip,
  .cd-bump button,
  .cd-nudge {
    transition:
      border-color var(--medium) var(--ease-out),
      background-color var(--medium) var(--ease-out),
      color var(--medium) var(--ease-out);
  }
}