/* Delusion Calculator v2 — 3D-style component skin (2.3.0, Either + translations in 2.4.0).
 * Adapted from the user-pasted component: pink gradient #ff007f to
 * #6600ff, 24px card radius, card rows with emoji, segmented Yes/No
 * toggles, dual sliders with gradient track fill and large round
 * thumbs, gradient Calculate button, conic-gradient result ring.
 * All selectors are dcv2_-prefixed and scoped under .dcv2-wrap:
 * no global rules, no webfonts, no images, no external requests.
 * Font inherits from the page. Card max-width behaviour is
 * 800px, centred (was 760px until 2.4.2). The pasted component's
 * global * / body / :root rules, font <link>, and alert()
 * placeholders were deliberately NOT copied. */

.dcv2-wrap {
  --dcv2-bg: #ffffff;
  --dcv2-bg-soft: #f4f6fb;
  --dcv2-heading: #1e1e2f;
  --dcv2-body: #6b7280;
  --dcv2-border: #e5e7eb;
  --dcv2-link: #2563eb;
  --dcv2-accent-a: #ff007f;
  --dcv2-accent-b: #6600ff;
  --dcv2-input-bg: #ffffff;
  --dcv2-card-border: #d1d5db;
  --dcv2-track: #e5e7eb;
  --dcv2-male-border: #2563eb;
  --dcv2-male-bg: #dbeafe;
  --dcv2-male-glow: rgba(37, 99, 235, 0.35);
  --dcv2-female-border: #7c3aed;
  --dcv2-female-bg: #ede9fe;
  --dcv2-female-glow: rgba(124, 58, 237, 0.35);
  --dcv2-men-border: #475569;
  --dcv2-men-bg: #f1f5f9;
  --dcv2-men-glow: rgba(71, 85, 105, 0.35);
  --dcv2-women-border: #ff007f;
  --dcv2-women-bg: #fce7f3;
  --dcv2-women-glow: rgba(255, 0, 127, 0.35);
  --dcv2-either-border: #7c3aed;
  --dcv2-either-bg: #ede9fe;
  --dcv2-either-glow: rgba(124, 58, 237, 0.35);
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 30px;
  background: var(--dcv2-bg);
  color: var(--dcv2-body);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  text-align: center;
}
.dcv2-wrap *, .dcv2-wrap *::before, .dcv2-wrap *::after { box-sizing: border-box; }

/* Dark theme. "Auto" is handled by the media query below. Same
 * gradients; dark card, track, and card-row tints. */
.dcv2-wrap[data-dcv2-theme="dark"] {
  --dcv2-bg: #111827;
  --dcv2-bg-soft: #1f2937;
  --dcv2-heading: #f9fafb;
  --dcv2-body: #d1d5db;
  --dcv2-border: #4b2a4a;
  --dcv2-link: #60a5fa;
  --dcv2-input-bg: #1f2937;
  --dcv2-card-border: #4b5563;
  --dcv2-track: #374151;
  --dcv2-male-border: #60a5fa;
  --dcv2-male-bg: rgba(37, 99, 235, 0.28);
  --dcv2-male-glow: rgba(96, 165, 250, 0.35);
  --dcv2-female-border: #a78bfa;
  --dcv2-female-bg: rgba(124, 58, 237, 0.28);
  --dcv2-female-glow: rgba(167, 139, 250, 0.35);
  --dcv2-men-border: #94a3b8;
  --dcv2-men-bg: #334155;
  --dcv2-men-glow: rgba(148, 163, 184, 0.35);
  --dcv2-women-border: #ff4da6;
  --dcv2-women-bg: rgba(255, 0, 127, 0.22);
  --dcv2-women-glow: rgba(255, 77, 166, 0.35);
  --dcv2-either-border: #a78bfa;
  --dcv2-either-bg: rgba(124, 58, 237, 0.28);
  --dcv2-either-glow: rgba(167, 139, 250, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  .dcv2-wrap[data-dcv2-theme="auto"] {
    --dcv2-bg: #111827;
    --dcv2-bg-soft: #1f2937;
    --dcv2-heading: #f9fafb;
    --dcv2-body: #d1d5db;
    --dcv2-border: #4b2a4a;
    --dcv2-link: #60a5fa;
    --dcv2-input-bg: #1f2937;
    --dcv2-card-border: #4b5563;
    --dcv2-track: #374151;
    --dcv2-male-border: #60a5fa;
    --dcv2-male-bg: rgba(37, 99, 235, 0.28);
    --dcv2-male-glow: rgba(96, 165, 250, 0.35);
    --dcv2-female-border: #a78bfa;
    --dcv2-female-bg: rgba(124, 58, 237, 0.28);
    --dcv2-female-glow: rgba(167, 139, 250, 0.35);
    --dcv2-men-border: #94a3b8;
    --dcv2-men-bg: #334155;
    --dcv2-men-glow: rgba(148, 163, 184, 0.35);
    --dcv2-women-border: #ff4da6;
    --dcv2-women-bg: rgba(255, 0, 127, 0.22);
    --dcv2-women-glow: rgba(255, 77, 166, 0.35);
    --dcv2-either-border: #a78bfa;
    --dcv2-either-bg: rgba(124, 58, 237, 0.28);
    --dcv2-either-glow: rgba(167, 139, 250, 0.35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

.dcv2-theme { display: flex; gap: .5rem; justify-content: flex-end; margin-bottom: .75rem; }
.dcv2-theme-btn {
  padding: .4rem .8rem; border: 1px solid var(--dcv2-border); border-radius: 999px;
  background: var(--dcv2-bg-soft); color: var(--dcv2-heading); cursor: pointer; font-size: .875rem;
}
.dcv2-theme-btn[aria-pressed="true"] {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--dcv2-accent-a), var(--dcv2-accent-b));
}

.dcv2-form { display: block; }
.dcv2-field { margin: 0 0 30px; padding: 0; border: 0; min-width: 0; }
/* Section labels in small caps, like the pasted component. */
.dcv2-field legend, .dcv2-field > label {
  display: block; margin-bottom: 12px; font-weight: 700; color: var(--dcv2-heading);
  text-transform: uppercase; letter-spacing: .5px; font-size: 14px; text-align: center;
}
/* Card-row legends stay sentence-case, like the design image. */
.dcv2-cards-field legend { text-transform: none; letter-spacing: 0; font-size: 1rem; text-align: left; }
.dcv2-field-center { max-width: 280px; margin-left: auto; margin-right: auto; }
.dcv2-field-center .dcv2-toggle-group { max-width: 280px; margin: 0 auto; }
.dcv2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px; }
.dcv2-grid .dcv2-field { margin-bottom: 0; }
@media (max-width: 560px) {
  .dcv2-grid { grid-template-columns: 1fr; }
}
.dcv2-location { max-width: 250px; margin-left: auto; margin-right: auto; }

/* Selects: pasted-component styling, chevron via data URI. */
.dcv2-field select {
  width: 100%; padding: 14px 2.5rem 14px 14px; border: 1px solid var(--dcv2-border);
  border-radius: 12px; background-color: var(--dcv2-input-bg); color: var(--dcv2-heading);
  font-family: inherit; font-size: 15px; font-weight: 500; min-height: 48px; text-align: left;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 15px;
}

/* Card rows: flex, so a third card can be added later with no
 * restructuring. The native radio stays in the DOM
 * (keyboard/screen-reader operable) but is visually hidden;
 * :has() paints the label. Selected = coloured border + tinted
 * background + glow, per card. */
.dcv2-cards { display: flex; gap: 1rem; flex-wrap: wrap; }
.dcv2-card {
  position: relative; flex: 1 1 140px;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.1rem .75rem; border: 2px solid var(--dcv2-card-border); border-radius: 16px;
  background: var(--dcv2-input-bg); cursor: pointer; min-height: 44px;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.dcv2-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dcv2-card-emoji { font-size: 2rem; line-height: 1; }
.dcv2-card-label { font-weight: 600; color: var(--dcv2-heading); }
.dcv2-card:has(input:focus-visible) { outline: 3px solid var(--dcv2-link); outline-offset: 2px; }
.dcv2-card-iam-male:has(input:checked) {
  border-color: var(--dcv2-male-border); background: var(--dcv2-male-bg);
  box-shadow: 0 8px 20px var(--dcv2-male-glow);
}
.dcv2-card-iam-female:has(input:checked) {
  border-color: var(--dcv2-female-border); background: var(--dcv2-female-bg);
  box-shadow: 0 8px 20px var(--dcv2-female-glow);
}
.dcv2-card-looking-men:has(input:checked) {
  border-color: var(--dcv2-men-border); background: var(--dcv2-men-bg);
  box-shadow: 0 8px 20px var(--dcv2-men-glow);
}
.dcv2-card-looking-women:has(input:checked) {
  border-color: var(--dcv2-women-border); background: var(--dcv2-women-bg);
  box-shadow: 0 8px 20px var(--dcv2-women-glow);
}
.dcv2-card-looking-either:has(input:checked) {
  border-color: var(--dcv2-either-border); background: var(--dcv2-either-bg);
  box-shadow: 0 8px 20px var(--dcv2-either-glow);
}

/* Segmented Yes/No toggle groups. */
.dcv2-toggle-group {
  display: flex; background: var(--dcv2-input-bg);
  border: 1px solid var(--dcv2-border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%; max-width: 220px; margin: 0 auto;
}
.dcv2-grid .dcv2-toggle-group { max-width: none; }
.dcv2-toggle-option {
  position: relative; flex: 1; padding: 12px; border: 0;
  background: var(--dcv2-input-bg); font-weight: 600; cursor: pointer;
  color: var(--dcv2-body); text-align: center; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, color .3s ease;
}
.dcv2-toggle-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dcv2-toggle-option:has(input:checked) { background: var(--dcv2-accent-a); color: #fff; }
.dcv2-toggle-option:has(input:focus-visible) { outline: 3px solid var(--dcv2-link); outline-offset: -3px; }

/* Sliders: dual-range track with gradient fill div (painted by the
 * JS; server-rendered inline fill keeps no-JS correct), 28px
 * thumbs with a pink border. Both thumbs stay draggable: the
 * inputs are pointer-transparent except for their thumbs. */
.dcv2-slider-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; font-weight: 600; font-size: 16px; color: var(--dcv2-heading);
}
.dcv2-slider-value {
  color: var(--dcv2-accent-a); font-weight: 800;
  background: rgba(255, 0, 127, 0.08); padding: 6px 14px; border-radius: 20px;
  font-size: 15px; box-shadow: inset 0 1px 3px rgba(255, 0, 127, 0.1);
}
.dcv2-range-container {
  position: relative; height: 12px; background: var(--dcv2-track);
  border-radius: 15px; margin-bottom: 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
.dcv2-range-track {
  position: absolute; height: 100%;
  background: linear-gradient(135deg, var(--dcv2-accent-a), var(--dcv2-accent-b));
  border-radius: 15px; z-index: 1;
}
.dcv2-range-container input[type="range"] {
  position: absolute; width: 100%; height: 12px; top: 0; left: 0; margin: 0;
  box-sizing: border-box; -webkit-appearance: none; appearance: none;
  background: transparent; pointer-events: none; z-index: 2;
}
.dcv2-range-container input[type="range"] + input[type="range"] { z-index: 3; }
.dcv2-range-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; background: #ffffff;
  border: 4px solid var(--dcv2-accent-a); border-radius: 50%;
  pointer-events: auto; cursor: grab;
  box-shadow: 0 4px 10px rgba(255, 0, 127, 0.35);
  margin-top: -8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dcv2-range-container input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing; transform: scale(1.15);
  box-shadow: 0 6px 14px rgba(255, 0, 127, 0.45);
}
.dcv2-range-container input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; background: #ffffff;
  border: 4px solid var(--dcv2-accent-a); border-radius: 50%;
  pointer-events: auto; cursor: grab;
  box-shadow: 0 4px 10px rgba(255, 0, 127, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dcv2-range-container input[type="range"]::-moz-range-thumb:active {
  cursor: grabbing; transform: scale(1.15);
  box-shadow: 0 6px 14px rgba(255, 0, 127, 0.45);
}
.dcv2-range-container input[type="range"]:focus-visible { outline: 3px solid var(--dcv2-link); outline-offset: 4px; }

/* Humor Mode toggle switch. */
.dcv2-humor { margin: 0 0 25px; text-align: left; }
.dcv2-switch { display: flex; align-items: center; justify-content: center; gap: .75rem; cursor: pointer; min-height: 44px; }
.dcv2-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dcv2-switch-track {
  position: relative; flex: 0 0 auto; width: 48px; height: 26px; border-radius: 999px;
  background: var(--dcv2-bg-soft); border: 1px solid var(--dcv2-border);
  transition: background .15s ease;
}
.dcv2-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: left .15s ease;
}
.dcv2-switch input:checked + .dcv2-switch-track {
  background: linear-gradient(135deg, var(--dcv2-accent-a), var(--dcv2-accent-b));
  border-color: transparent;
}
.dcv2-switch input:checked + .dcv2-switch-track::after { left: 24px; }
.dcv2-switch input:focus-visible + .dcv2-switch-track { outline: 3px solid var(--dcv2-link); outline-offset: 2px; }
.dcv2-humor-text { display: flex; flex-direction: column; line-height: 1.35; text-align: left; }
.dcv2-humor-label { font-weight: 700; color: var(--dcv2-heading); }
.dcv2-humor-desc { font-size: .875rem; }

/* Calculate button. */
.dcv2-submit {
  width: 100%; padding: 20px; border: 0; border-radius: 16px; cursor: pointer;
  font-size: 18px; font-weight: 700; min-height: 52px; color: #fff;
  background: linear-gradient(135deg, var(--dcv2-accent-a), var(--dcv2-accent-b));
  box-shadow: 0 8px 20px rgba(255, 0, 127, 0.25);
  transition: transform .3s ease, box-shadow .3s ease;
  margin-top: 25px;
}
.dcv2-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(255, 0, 127, 0.35);
}

/* Result: conic-gradient ring, band, message, joke, actions. */
.dcv2-result { margin-top: 1.25rem; text-align: center; animation: dcv2-fade-in 0.5s ease; }
/* Either mode: two result blocks side by side, stacked on narrow
 * screens. One shared Adjust/Share row follows the grid. */
.dcv2-result-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 1rem; }
@media (max-width: 640px) {
  .dcv2-result-dual { grid-template-columns: 1fr; }
}
.dcv2-result-heading { font-size: 1.25rem; font-weight: 700; color: var(--dcv2-heading); margin: 0 0 1rem; }
.dcv2-result-block .dcv2-breakdown { text-align: left; }
@keyframes dcv2-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .dcv2-result { animation: none; }
}
.dcv2-ring {
  width: 220px; height: 220px; margin: 0 auto 30px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.dcv2-ring-inner {
  width: 190px; height: 190px; background: var(--dcv2-bg); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}
.dcv2-percent { position: relative; font-size: 52px; font-weight: 800; color: var(--dcv2-heading); margin: 0; line-height: 1.15; }
.dcv2-band { font-size: 1.25rem; font-weight: 700; color: var(--dcv2-accent-a); margin: 0 0 15px; }
.dcv2-message { margin: 0 0 1rem; }
.dcv2-joke {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 10px;
  font-weight: 600; color: var(--dcv2-heading); background: rgba(255, 0, 127, 0.08);
}
.dcv2-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 1rem; }
@media (max-width: 560px) {
  .dcv2-result-actions { grid-template-columns: 1fr; }
}
.dcv2-btn {
  padding: 20px; border: 0; border-radius: 16px; cursor: pointer;
  font-size: 18px; font-weight: 700; min-height: 52px; color: #fff;
  background: linear-gradient(135deg, var(--dcv2-accent-a), var(--dcv2-accent-b));
  box-shadow: 0 8px 20px rgba(255, 0, 127, 0.25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dcv2-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(255, 0, 127, 0.35);
}
.dcv2-btn-alt {
  background: var(--dcv2-input-bg); color: var(--dcv2-heading);
  border: 1px solid var(--dcv2-border);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
}
.dcv2-btn-alt:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.10); }
.dcv2-breakdown { margin-top: 1rem; text-align: left; }
.dcv2-breakdown summary { cursor: pointer; font-weight: 600; color: var(--dcv2-heading); min-height: 44px; }
.dcv2-breakdown table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.dcv2-breakdown th, .dcv2-breakdown td { padding: .4rem .5rem; border-bottom: 1px solid var(--dcv2-border); text-align: left; }
.dcv2-breakdown td:last-child, .dcv2-breakdown th:last-child { text-align: right; white-space: nowrap; }
.dcv2-note { font-size: .875rem; margin-top: 1rem; }
.dcv2-wrap a { color: var(--dcv2-link); }
.dcv2-wrap :focus-visible { outline: 3px solid var(--dcv2-link); outline-offset: 2px; }