/* ============================================================================
   GetWheelSpinner — Multi Wheel Spinner styles (v7.0.0)
   Loaded ONLY on /multi-wheel-spinner/, after assets/style.css.
   assets/style.css is a PROTECTED v6.9.2 file and is NOT modified.

   Layout contract:
     >= 760px : two columns, so 4 wheels form a clean 2 x 2
     <  760px : single column, wheels stacked
   Every track uses minmax(0,1fr) and every text surface can wrap, so a long
   unbroken option can never push the page into horizontal overflow at 375px.
   ============================================================================ */

.mw-tool{margin:0 0 40px}

.mw-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:linear-gradient(145deg,var(--card),rgba(18,20,46,.7));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:18px;
}
html[data-theme="light"] .mw-bar{
  background:#FFFFFF;border-color:rgba(15,23,42,.11);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 2px 14px rgba(15,23,42,.06);
}
.mw-count{font-size:12.5px;font-weight:700;color:var(--muted)}
.mw-bar-spacer{flex:1 1 auto;min-width:0}

.mw-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);border-radius:var(--radius-sm);padding:10px 16px;
  font-size:13.5px;font-weight:600;font-family:var(--font);cursor:pointer;
  transition:all .16s;
}
.mw-btn:hover:not(:disabled){background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:var(--amber)}
.mw-btn:disabled{opacity:.45;cursor:not-allowed}
.mw-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
html[data-theme="light"] .mw-btn{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.14);color:#0F172A}
html[data-theme="light"] .mw-btn:hover:not(:disabled){background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4);color:#92400E}

.mw-btn-primary{
  background:linear-gradient(135deg,var(--amber) 0%,#F97316 50%,var(--red) 100%);
  color:#fff;border:none;box-shadow:0 4px 18px rgba(245,158,11,.32),inset 0 1px 0 rgba(255,255,255,.18);
}
.mw-btn-primary:hover:not(:disabled){color:#fff;transform:translateY(-1px);box-shadow:0 6px 26px rgba(245,158,11,.45)}
/* v7.0.1 LIGHT-MODE FIX — see note at .mw-btn-spin below. `html[data-theme="light"]
   .mw-btn` (0,2,1) outranks `.mw-btn-primary` (0,1,0) and stripped the amber
   gradient, while the old `color:#fff` here kept the label white: white on
   #F5F6F6, measured 1.08:1 on a real light-mode page load. Restore the gradient
   at matching specificity so the control is visible again. */
html[data-theme="light"] .mw-btn-primary{
  background:linear-gradient(135deg,var(--amber) 0%,#F97316 50%,var(--red) 100%);
  border:none;color:#fff;
}
.mw-btn-danger{border-color:rgba(239,68,68,.3);color:#FCA5A5}
.mw-btn-danger:hover:not(:disabled){background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.45);color:#FCA5A5}
html[data-theme="light"] .mw-btn-danger{color:#B91C1C;border-color:rgba(239,68,68,.3)}

/* ═══ GRID ═══════════════════════════════════════════════════════════════════ */
.mw-list{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}
@media(min-width:760px){
  .mw-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.mw-wheel{
  display:flex;flex-direction:column;gap:9px;min-width:0;
  background:linear-gradient(145deg,var(--card),rgba(18,20,46,.7));
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;
}
html[data-theme="light"] .mw-wheel{
  background:#FFFFFF;border-color:rgba(15,23,42,.11);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 2px 14px rgba(15,23,42,.06);
}

.mw-head{display:flex;align-items:center;gap:10px;min-width:0}
.mw-legend{
  flex:1 1 auto;min-width:0;margin:0;
  font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.2px;
  overflow-wrap:anywhere;
}
.mw-btn-remove{
  flex:0 0 auto;padding:4px 11px;font-size:16px;line-height:1.2;
  border-color:rgba(239,68,68,.3);color:#FCA5A5;
}
.mw-btn-remove:hover:not(:disabled){background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.45);color:#FCA5A5}
html[data-theme="light"] .mw-btn-remove{color:#B91C1C}

.mw-label{display:block;font-size:12px;font-weight:700;color:var(--text);margin:2px 0 0}
.mw-input,.mw-textarea{
  width:100%;max-width:100%;box-sizing:border-box;min-width:0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-sm);padding:9px 11px;
  color:var(--text) !important;-webkit-text-fill-color:var(--text);caret-color:var(--amber);
  font-size:13.5px;line-height:1.55;font-family:var(--font);outline:none;
  overflow-wrap:anywhere;
}
.mw-textarea{resize:vertical;min-height:96px}
.mw-input:focus,.mw-textarea:focus{border-color:rgba(245,158,11,.35)}
.mw-input:disabled,.mw-textarea:disabled{opacity:.55;cursor:not-allowed}
.mw-input::placeholder,.mw-textarea::placeholder{color:var(--muted2)}
html[data-theme="light"] .mw-input,html[data-theme="light"] .mw-textarea{
  background:#FFFFFF;border-color:rgba(15,23,42,.18);
  color:#0F172A !important;-webkit-text-fill-color:#0F172A;
}
html[data-theme="light"] .mw-input::placeholder,html[data-theme="light"] .mw-textarea::placeholder{
  color:#64748B;-webkit-text-fill-color:#64748B;
}

/* ═══ CANVAS ═════════════════════════════════════════════════════════════════ */
.mw-canvas-wrap{
  position:relative;width:100%;max-width:300px;margin:4px auto 0;
  aspect-ratio:1/1;
}
.mw-canvas{
  display:block;width:100%;height:auto;max-width:100%;
  border-radius:50%;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}
.mw-pointer{
  position:absolute;top:50%;right:-4px;transform:translateY(-50%);
  width:0;height:0;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-right:20px solid var(--amber);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}

.mw-btn-spin{width:100%;margin-top:4px;
  background:linear-gradient(135deg,var(--amber) 0%,#F97316 50%,var(--red) 100%);
  color:#fff;border:none;box-shadow:0 4px 18px rgba(245,158,11,.32),inset 0 1px 0 rgba(255,255,255,.18);
}
.mw-btn-spin:hover:not(:disabled){color:#fff;transform:translateY(-1px)}
/* v7.0.1 LIGHT-MODE FIX (primary Spin button).
   DEFECT: `html[data-theme="light"] .mw-btn{background:rgba(15,23,42,.04)}` has
   specificity (0,2,1) and outranks `.mw-btn-spin{background:linear-gradient(...)}`
   at (0,1,0), so light mode stripped the gradient — but the old
   `html[data-theme="light"] .mw-btn-spin{color:#fff}` still forced white text.
   Result: white on #F5F6F6, contrast 1.08:1 — the primary Spin control was
   effectively invisible in light mode. Measured on a real page load with
   gws-theme="light", not inferred from the stylesheet.
   FIX: restate the gradient at (0,2,1) so it wins, keeping white-on-amber
   exactly as dark mode already renders it. */
html[data-theme="light"] .mw-btn-spin{
  background:linear-gradient(135deg,var(--amber) 0%,#F97316 50%,var(--red) 100%);
  border:none;color:#fff;
}

/* ═══ RESULT ═════════════════════════════════════════════════════════════════ */
.mw-result{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.38);
  border-radius:var(--radius-sm);padding:10px 13px;
}
html[data-theme="light"] .mw-result{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4)}
.mw-result-label{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--amber);
}
html[data-theme="light"] .mw-result-label{color:#92400E}
/* A very long winner must wrap inside its card, never truncate, never overflow. */
.mw-result-name{font-size:16px;font-weight:800;color:var(--text);overflow-wrap:anywhere;min-width:0}

.mw-error{
  font-size:12.5px;line-height:1.55;margin:0;
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);
  color:#FCA5A5;border-radius:var(--radius-sm);padding:9px 12px;
  overflow-wrap:anywhere;
}
html[data-theme="light"] .mw-error{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);color:#B91C1C}

.mw-foot{display:flex;align-items:center;gap:10px;min-width:0}
.mw-foot .mw-count{flex:1 1 auto;min-width:0}
.mw-btn-ghost{flex:0 0 auto;padding:7px 13px;font-size:12.5px}

.mw-note{font-size:12px;color:var(--muted2);line-height:1.6;margin-top:14px}

@media(max-width:600px){
  .mw-bar{gap:8px}
  .mw-bar .mw-btn{flex:1 1 auto;min-width:120px}

  /* v7.0.1 — phone touch targets.
     Measured at 375px in a real browser, the desktop paddings produced
     Remove 33x29, Shuffle 68x32, Spin 313x38 and Spin All 148x38. Those clear
     the WCAG 2.5.8 minimum (24x24) but are uncomfortable on a thumb, and
     Remove is a destructive control. Raise every control to a 44px touch
     height on phones only; desktop geometry is untouched. Layout is unaffected
     because the wheels are already one-per-row at this width. */
  .mw-btn{min-height:44px}
  .mw-btn-ghost{min-height:44px;padding:10px 14px}
  .mw-btn-remove{min-width:44px;min-height:44px;padding:4px 12px}
}