/* ------------------------------------------ */
/*            CONSTRUAL TASK CSS              */
/*    Distance Visualization Components       */
/* ------------------------------------------ */
/* Create rootStyles to access important dimensions */
:root {
  --drag-area-width: 58vw; /* Exact: 950px / 2560 * 100 */
  --drag-area-height: 60vh; /* Exact: 650px / 1440 * 100 */
  --dot-size-w: 1.5vw; /* Exact: 20px / 2560 * 100 */
  --dot-size-h: 3vh; /* Exact: 20px / 1440 * 100 */
  --border-radius-large: 0.39vw; /* Exact: 10px / 2560 * 100 */
  --margin-large: 1.39vh; /* Exact: 20px / 1440 * 100 */
  --padding-v: 0.69vh; /* Exact: 10px / 1440 * 100 */
  --padding-h: 0.78vw; /* Exact: 20px / 2560 * 100 */
  --border-radius-small: 0.2vw; /* Exact: 5px / 2560 * 100 */
  --shadow-spread: 0.16vw; /* Exact: 4px / 2560 * 100 */
  --border-thin: 0.04vw; /* Exact: 1px / 2560 * 100 */
  --font-small: 1.5vh; /* Exact: 11px / 1440 * 100 */
  --legend-dot-w: 0.86vw; /* Exact: 22px / 2560 * 100 */
  --legend-dot-h: 1.53vh; /* Exact: 22px / 1440 * 100 */
  --border-thick: 0.08vw; /* Exact: 2px / 2560 * 100 */
  --margin-small: 0.2vw; /* Exact: 5px / 2560 * 100 */
}
/* ------------------------------------------ */
/*         MAIN CONSTRUAL CONTAINER           */
/* ------------------------------------------ */
/* Main container for the construal task */
.construal-container { 
    position: relative; 
    margin-top: 5vh; /* Push drag area down responsively */
    margin: auto; 
    width: var(--drag-area-width);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ------------------------------------------ */
/*              DRAG AREA                     */
/* ------------------------------------------ */
/* Drag area styling */
.drag-area {
    background: #aaaaaa; /* Original darker gray from JS code */
    border: 0px solid #434242;
    border-radius: var(--border-radius-large);
    width: var(--drag-area-width);
    height: var(--drag-area-height);
    position: relative;
    margin: auto;
    box-sizing: content-box; 
}

/* ------------------------------------------ */
/*            CONFIRM BUTTON                  */
/* ------------------------------------------ */
/* Confirm button styling */
.confirm-btn {
    margin-top: var(--margin-large);
    padding: var(--padding-v) var(--padding-h);
    background-color: #4682B4; 
    color: white; 
    border: none; 
    border-radius: var(--border-radius-small);
    cursor: pointer;
}

/* ------------------------------------------ */
/*                 DOT STYLING                */
/* ------------------------------------------ */
/* Dot styling (common to both dots) */
.dot {
    width: var(--dot-size-w);
    height: var(--dot-size-h);
    border-radius: 50%;
    box-shadow: 0 0 var(--shadow-spread) #666;
    border: var(--border-thin) solid #000;
    display: inline-block;
}

/* Dot wrappers: for absolute positioning */
.dot-wrapper {
    position: absolute; 
    width: var(--dot-size-w);
    height: var(--dot-size-h);
}

/* ------------------------------------------ */
/*               DOT LABELS                   */
/* ------------------------------------------ */
/* Dot label styling */
.dot-label {
    position: absolute;
    top: -120%; /* Above the dot */
    left: 50%;  /* Start from the middle of the wrapper */
    transform: translateX(-50%); /* Shift left by half its own width */
    text-align: center;
    color: #fff;
    font-size: var(--font-small);
    font-weight: bold;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    /* No width set! */
}

/* ------------------------------------------ */
/*           COLOR SPECIFICATIONS             */
/* ------------------------------------------ */
/* Purple and yellow color specifications */
.color_purple { 
    background: #9370DB; 
}

.color_yellow { 
    background: #FFFF00; 
    cursor: grab; 
}

.color_yellow:active { 
    cursor: grabbing; 
}

/* ------------------------------------------ */
/*             LABEL COLORS                   */
/* ------------------------------------------ */
/* Label color definitions for easy readability */
.purple-label { 
    color: #9370DB; 
    font-weight: bold;
}

.yellow-label { 
    color: #FFFF00; 
    font-weight: bold;
}

/* ------------------------------------------ */
/*            LEGEND STYLING                  */
/* ------------------------------------------ */
/* Legend dot (inline with text descriptions) */
.legend-dot {
    width: var(--legend-dot-w);
    height: var(--legend-dot-h);
    border-radius: 50%;
    border: var(--border-thick) solid #222;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--margin-small);
}

.legend-dot.purple {
    background: #9370DB;
}

.legend-dot.yellow {
    background: #FFFF00;
}

/* ------------------------------------------ */
/*      OVERLAPPING DEFINITIONS FROM OTHER CSS */
/* ------------------------------------------ */

/* The classes .pairing-info body background-color and font family/color are defined in styles.css. */

.pairing-info {
    /* ... existing styles ... */
    pointer-events: none;
    margin-bottom: 25vh;
}

/* The classes .purple-label and .yellow-label are defined in human.css */

/* Fixed position for "You" dot */
#dot-you {
    left: calc(100% - var(--dot-size-w));
    top: calc(50% - var(--dot-size-h) / 2);
}

.construal-container {
  margin-top: 15vh; /* Optional: Extra top margin if needed */
}