/* ===========================================================================
   picker.css — shared list editor, team/seating boards and picker widgets
   =========================================================================== */

/* --- List editor --------------------------------------------------------- */
.list-editor__toolbar {
  display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem;
}
.list-editor__count {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--muted); margin-top: .4rem;
}
.list-editor textarea { font-size: .95rem; }
.list-editor__quick { display: flex; gap: .4rem; margin-top: .5rem; }
.list-editor__quick input { flex: 1; min-width: 0; }

.entry-list { list-style: none; margin: .6rem 0 0; padding: 0; max-height: 340px; overflow-y: auto; }
.entry-list li {
  display: flex; align-items: center; gap: .4rem; margin: 0;
  /* Wraps rather than overflowing: on a narrow phone the weight, chance and
     buttons drop to a second line instead of scrolling the whole page. */
  flex-wrap: wrap;
  padding: .3rem .25rem; border-bottom: 1px solid var(--border);
}
.entry-list li:last-child { border-bottom: 0; }
.entry-list__index { color: var(--muted); font-size: .78rem; min-width: 1.8rem; font-variant-numeric: tabular-nums; }
.entry-list__label { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; font-size: .92rem; }
.entry-list__label.is-off { opacity: .5; text-decoration: line-through; }
/* Typed as `input.` so it beats the base input[type='number'] width rule. */
input.entry-list__weight { width: 76px; flex: 0 0 auto; }
.entry-list__chance { font-size: .78rem; color: var(--muted); min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.entry-list__actions { display: flex; gap: .15rem; flex: 0 0 auto; margin-left: auto; }
.entry-list--sortable li[draggable='true'] { cursor: grab; }
.entry-list--sortable li.is-dragging { opacity: .45; cursor: grabbing; }
.entry-list--sortable li.is-drop-target {
  background: var(--surface-alt);
  box-shadow: inset 0 2px 0 0 var(--primary);
}

/* --- Teams / groups ------------------------------------------------------ */
.team-board {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.team {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--team-color, var(--primary));
  border-radius: var(--radius); padding: .75rem; min-width: 0;
}
.team__head { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; margin-bottom: .4rem; }
.team__name { font-weight: 700; font-size: .98rem; overflow-wrap: anywhere; }
.team__count { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.team__members { list-style: none; margin: 0; padding: 0; }
.team__members li {
  display: flex; align-items: center; gap: .35rem; margin: 0;
  padding: .25rem 0; font-size: .9rem; border-bottom: 1px dashed var(--border);
}
.team__members li:last-child { border-bottom: 0; }
.team__member-name { flex: 1; overflow-wrap: anywhere; }
.team__member-score { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.team__move { display: flex; gap: .1rem; }
.team__move button {
  border: 1px solid var(--border); background: var(--surface-alt); color: var(--muted);
  border-radius: 4px; width: 24px; height: 24px; min-height: 24px; padding: 0;
  font-size: .75rem; cursor: pointer; line-height: 1;
}
.team__move button:hover { border-color: var(--primary); color: var(--primary-strong); }
.team__stats { font-size: .78rem; color: var(--muted); margin-top: .4rem; padding-top: .35rem; border-top: 1px solid var(--border); }
.team--leader-tag { font-size: .68rem; font-weight: 700; color: var(--primary-strong); text-transform: uppercase; }

/* --- Seating chart ------------------------------------------------------- */
.seating-wrap { overflow-x: auto; padding-bottom: .5rem; }
.seating-front {
  text-align: center; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--border-strong);
  padding-bottom: .3rem; margin-bottom: .8rem; font-weight: 700;
}
.seating-grid { display: grid; gap: .45rem; min-width: max-content; }
.seat {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); padding: .4rem; min-height: 56px; min-width: 96px;
  display: flex; flex-direction: column; justify-content: center; gap: .1rem;
  font-size: .82rem; text-align: center;
}
.seat__pos { font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.seat__name { font-weight: 600; overflow-wrap: anywhere; }
.seat--empty { background: var(--surface-alt); border-style: dashed; color: var(--muted); }
.seat--hidden .seat__name { filter: blur(5px); user-select: none; }
.seat[draggable='true'] { cursor: grab; }
/* The ring, not colour alone, marks the seat waiting for its swap partner. */
.seat--selected {
  border-color: var(--primary); border-style: solid;
  box-shadow: inset 0 0 0 2px var(--primary);
}
.seat--drop { border-color: var(--primary); border-style: dashed; background: var(--surface-alt); }

/* --- Chore rota ---------------------------------------------------------- */
.rota-table td.is-done { text-decoration: line-through; color: var(--muted); }
.rota-check { width: 20px; height: 20px; accent-color: var(--success); }

/* --- Coin & dice --------------------------------------------------------- */
.coin-stage { display: grid; place-items: center; gap: 1rem; padding: 1rem 0; }
.coin {
  width: clamp(110px, 30vw, 170px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(1.3rem, 4vw, 2rem); font-weight: 800;
  background: radial-gradient(circle at 35% 30%, #fde68a, #d97706);
  color: #3b2606; border: 4px solid #b45309; box-shadow: var(--shadow);
  letter-spacing: .05em;
}
.coin--tails { background: radial-gradient(circle at 35% 30%, #e5e7eb, #9ca3af); color: #1f2937; border-color: #6b7280; }
.coin.is-flipping { animation: rt-coin-flip .55s ease-in-out; }
@keyframes rt-coin-flip {
  0% { transform: rotateX(0) scale(1); }
  50% { transform: rotateX(540deg) scale(1.08); }
  100% { transform: rotateX(1080deg) scale(1); }
}

.dice-tray { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.die {
  min-width: 54px; min-height: 54px; padding: .4rem;
  border: 2px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); display: grid; place-items: center;
  font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}
.die__sides { font-size: .6rem; color: var(--muted); font-weight: 600; }
.die.is-max { border-color: var(--success); background: var(--success-soft); }
.die.is-min { border-color: var(--warning); background: var(--warning-soft); }
.die.is-rolling { animation: rt-die-shake .4s ease-in-out; }
@keyframes rt-die-shake {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-6px) rotate(-8deg); }
  75% { transform: translateY(-3px) rotate(8deg); }
}

/* --- Colors -------------------------------------------------------------- */
.swatch-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.swatch {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column;
}
.swatch__color { height: 92px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.swatch__body { padding: .5rem .6rem; display: grid; gap: .2rem; font-size: .8rem; }
.swatch__code { font-family: var(--font-mono); font-size: .8rem; }
.swatch__actions { display: flex; gap: .25rem; padding: 0 .6rem .6rem; }

/* --- Number / letter output --------------------------------------------- */
.output-box {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem; min-height: 90px;
  font-family: var(--font-mono); font-size: 1rem; overflow-wrap: anywhere;
  line-height: 1.7;
}
.output-box:empty::before { content: 'Results will appear here.'; color: var(--muted); font-family: var(--font); }
.number-chip {
  display: inline-block; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: .1rem .5rem; margin: .12rem;
  font-variant-numeric: tabular-nums; font-weight: 600;
}

/* --- Password ------------------------------------------------------------ */
.password-out {
  font-family: var(--font-mono); font-size: 1.1rem; word-break: break-all;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .7rem .85rem; min-height: 52px;
}
.strength-meter { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.strength-meter__bar { height: 100%; width: 0; background: var(--error); transition: width .2s ease, background-color .2s ease; }

/* --- Drag & drop --------------------------------------------------------- */
[draggable='true'] { cursor: grab; }
.is-dragging { opacity: .45; }
.drop-target { outline: 2px dashed var(--primary); outline-offset: 2px; }