/* =========================================================
   grading-ui.css — chromatic wheel, puck, menu items
   ========================================================= */

/* ---------- Menu stage (main content area) ---------- */
.menu-stage {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    position: relative;
    z-index: 5;
    min-height: 0;
}

.wheel-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}

/* ---------- Wheel container ---------- */
.wheel {
    --wheel-size: 540px;
    --menu-radius: 300px;   /* distance from wheel center to each menu label */
    position: relative;
    width: var(--wheel-size);
    height: var(--wheel-size);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Soft outer glow behind the wheel */
.wheel::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* The colored hue ring */
.wheel-hue-ring {
    position: absolute;
    inset: 70px;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        hsl(0, 65%, 50%)   0deg,
        hsl(15, 70%, 52%)  15deg,
        hsl(30, 72%, 52%)  30deg,
        hsl(45, 70%, 50%)  45deg,
        hsl(60, 68%, 50%)  60deg,
        hsl(75, 60%, 48%)  75deg,
        hsl(90, 55%, 46%)  90deg,
        hsl(105, 50%, 44%) 105deg,
        hsl(120, 48%, 44%) 120deg,
        hsl(135, 50%, 44%) 135deg,
        hsl(150, 52%, 44%) 150deg,
        hsl(165, 55%, 45%) 165deg,
        hsl(180, 58%, 46%) 180deg,
        hsl(195, 62%, 48%) 195deg,
        hsl(210, 65%, 50%) 210deg,
        hsl(225, 66%, 53%) 225deg,
        hsl(240, 62%, 56%) 240deg,
        hsl(255, 58%, 56%) 255deg,
        hsl(270, 55%, 54%) 270deg,
        hsl(285, 55%, 52%) 285deg,
        hsl(300, 58%, 50%) 300deg,
        hsl(315, 62%, 50%) 315deg,
        hsl(330, 65%, 50%) 330deg,
        hsl(345, 65%, 50%) 345deg,
        hsl(360, 65%, 50%) 360deg
    );
    filter: saturate(1.05) brightness(0.95);
    box-shadow:
        inset 0 0 36px rgba(0, 0, 0, 0.45),
        inset 0 0 2px rgba(255, 255, 255, 0.12),
        0 0 24px rgba(0, 0, 0, 0.5);
}

/* Subtle radial darkening on the hue ring */
.wheel-darken {
    position: absolute;
    inset: 70px;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 55%, rgba(0, 0, 0, 0.35) 100%),
        radial-gradient(circle at center top, rgba(255,255,255,0.05) 0%, transparent 40%);
    pointer-events: none;
}

/* Dark inner disk (creates the donut hole) */
.wheel-inner {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--bg-elev-1) 0%, var(--bg-base) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

/* Outer ring border accent */
.wheel-outer-ring {
    position: absolute;
    inset: 60px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

/* ---------- SVG overlay (ticks, puck, center text) ---------- */
.wheel-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 3;
    pointer-events: none;
}

.wheel-crosshair {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

/* Puck — the indicator that orbits the wheel */
.puck {
    transition: transform var(--t-puck);
    pointer-events: none;
}

.puck-tether {
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
    stroke-dasharray: 1 3;
}

.puck-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
}

.puck-fill {
    fill: var(--accent);
    transition: fill var(--t-slow);
}

.puck-dot {
    fill: var(--bg-base);
}

/* Center card (info display) */
.wheel-center {
    pointer-events: none;
}

.center-bg {
    fill: var(--bg-elev-2);
    stroke: var(--border-subtle);
    stroke-width: 1;
}

.center-border {
    fill: none;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1;
}

.center-label {
    fill: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 8px;
    text-anchor: middle;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.center-value {
    fill: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 500;
    text-anchor: middle;
    text-transform: lowercase;
    letter-spacing: -0.01em;
}

.center-meta {
    fill: var(--text-quaternary);
    font-family: var(--font-mono);
    font-size: 8px;
    text-anchor: middle;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Tick marks */
.wheel-ticks line {
    stroke-linecap: round;
}

/* ---------- Menu items orbiting the wheel ---------- */
.menu-items {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.menu-item {
    /* Polar positioning around the wheel center.
       Each item has an inline `style="--angle: Xdeg"` (compass angle:
       0 = top, 90 = right, clockwise). We compute the (x, y) offset
       from the wheel center using sin/cos and apply via transform. */
    --angle: 0deg;
    --mx: calc(sin(var(--angle)) * var(--menu-radius, 300px));
    --my: calc(-1 * cos(var(--angle)) * var(--menu-radius, 300px));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my)));
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 16px;
    border-radius: 4px;
    transition: transform var(--t), opacity var(--t), color var(--t);
    text-align: center;
    background: transparent;
    white-space: nowrap;
}

.item-num {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-quaternary);
    letter-spacing: 0.1em;
    transition: color var(--t);
}

.item-label {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    transition: color var(--t);
    text-transform: lowercase;
}

.item-desc {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color var(--t);
    white-space: nowrap;
}

.menu-item:hover .item-label,
.menu-item.is-active .item-label {
    color: var(--text-primary);
}

.menu-item:hover .item-desc,
.menu-item.is-active .item-desc {
    color: var(--accent);
}

.menu-item:hover .item-num,
.menu-item.is-active .item-num {
    color: var(--text-secondary);
}

.menu-item:hover {
    /* Add a tiny outward nudge on hover (in the direction of the item's angle)
       on top of the base polar position. */
    transform: translate(
        calc(-50% + var(--mx) + sin(var(--angle)) * 4px),
        calc(-50% + var(--my) - cos(var(--angle)) * 4px)
    );
}

/* Disabled / coming-soon visual */
.menu-item--coming-soon .item-label::after {
    content: " ◇";
    color: var(--text-quaternary);
    font-size: 0.7em;
    vertical-align: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .wheel { --wheel-size: 460px; --menu-radius: 256px; }
    .side-panel { width: 180px; }
}

@media (max-width: 880px) {
    .wheel { --wheel-size: 380px; --menu-radius: 220px; }
    .side-panel { display: none; }
    .menu-stage { padding: 0 24px; }
}