/* v5.5.63 · Attribute Points "Base / Match" prototype.
   The real range always edits Build Attribute. Match mode only changes presentation. */

@media(min-width:761px){
  #attributeDesktopToolbar .attribute-value-mode{
    height:32px;
    padding:2px;
    display:flex;
    align-items:center;
    flex:0 0 auto;
    border:1px solid rgba(222,230,238,.13);
    border-radius:10px;
    background:rgba(7,12,17,.24);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
  }

  #attributeDesktopToolbar .attribute-mode-btn{
    appearance:none;
    height:26px;
    min-width:68px;
    padding:0 10px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#7f8a95;
    font:650 11.5px/1 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
    white-space:nowrap;
    cursor:pointer;
    transition:color .15s ease,background .15s ease,box-shadow .15s ease;
  }
  #attributeDesktopToolbar .attribute-mode-btn:hover{
    color:#c4ccd4;
    background:rgba(255,255,255,.035);
  }
  #attributeDesktopToolbar .attribute-mode-btn[data-attribute-mode="base"].active{
    color:#e1e6eb;
    background:linear-gradient(180deg,rgba(229,236,243,.13),rgba(194,205,216,.065));
    box-shadow:inset 0 0 0 1px rgba(235,241,247,.10),0 1px 4px rgba(0,0,0,.18);
  }
  #attributeDesktopToolbar .attribute-mode-btn[data-attribute-mode="match"].active{
    color:#dfd7b7;
    background:linear-gradient(180deg,rgba(205,216,227,.105),rgba(205,216,227,.040));
    box-shadow:inset 0 0 0 1px rgba(225,233,241,.10),0 0 8px rgba(205,216,227,.025);
  }

  /* Match presentation overlays. */
  body.attribute-match-mode #attributes .range-shell{
    overflow:visible!important;
  }

  body.attribute-match-mode #attributes .visual-track{
    opacity:.23;
    transition:opacity .16s ease;
  }

  body.attribute-match-mode #attributes .attr-row.match-dragging .visual-track,
  body.attribute-match-mode #attributes .attr-row .range-shell:hover .visual-track{
    opacity:1;
  }

  #attributes .match-result-fill,
  #attributes .match-result-dot,
  #attributes .match-base-marker,
  #attributes .match-cap-marker,
  #attributes .match-drag-value{
    display:none;
  }

  body.attribute-match-mode #attributes .match-result-fill{
    display:block;
    position:absolute;
    z-index:8;
    left:0;
    top:50%;
    width:var(--match-display-pct,0%);
    height:5px;
    transform:translateY(-50%);
    border-radius:999px;
    background:linear-gradient(90deg,rgba(189,201,211,.70),rgba(226,233,238,.92));
    box-shadow:0 0 8px rgba(205,216,227,.06);
    pointer-events:none;
    transition:
      width .22s cubic-bezier(.22,.68,.24,1),
      opacity .15s ease;
  }

  body.attribute-match-mode #attributes .match-result-dot{
    display:block;
    position:absolute;
    z-index:12;
    left:var(--match-display-pct,0%);
    top:50%;
    width:14px;
    height:14px;
    transform:translate(-50%,-50%);
    border:2px solid rgba(229,235,240,.95);
    border-radius:50%;
    background:#111820;
    box-shadow:
      0 0 0 2px rgba(205,216,227,.10),
      0 2px 8px rgba(0,0,0,.28);
    pointer-events:auto;
    transition:
      left .22s cubic-bezier(.22,.68,.24,1),
      opacity .15s ease;
  }

  body.attribute-match-mode #attributes .attr-row.match-dragging .match-result-fill,
  body.attribute-match-mode #attributes .attr-row.match-dragging .match-result-dot,
  body.attribute-match-mode #attributes .attr-row .range-shell:hover .match-result-fill,
  body.attribute-match-mode #attributes .attr-row .range-shell:hover .match-result-dot{
    opacity:.14;
  }

  /* The actual draggable base position only appears when the user is interacting. */
  body.attribute-match-mode #attributes .match-base-marker{
    display:block;
    position:absolute;
    z-index:14;
    left:var(--match-base-pct,0%);
    top:50%;
    width:8px;
    height:8px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(225,233,239,.55);
    border-radius:50%;
    background:#121921;
    opacity:0;
    pointer-events:none;
    transition:opacity .14s ease;
  }

  body.attribute-match-mode #attributes .attr-row .range-shell:hover .match-base-marker,
  body.attribute-match-mode #attributes .attr-row.match-dragging .match-base-marker{
    opacity:.82;
  }

  /* CAP marker: always visible in Match mode when the archetype cap is below 99. */
  body.attribute-match-mode #attributes .match-cap-marker{
    display:block;
    position:absolute;
    z-index:10;
    left:var(--match-cap-pct,100%);
    top:5px;
    bottom:5px;
    width:1px;
    transform:translateX(-.5px);
    background:rgba(210,220,228,.20);
    pointer-events:none;
  }

  body.attribute-match-mode #attributes .match-cap-marker::after{
    content:"CAP";
    position:absolute;
    left:50%;
    top:-9px;
    transform:translateX(-50%);
    color:#66727d;
    font-size:7px;
    font-weight:750;
    letter-spacing:.02em;
    line-height:1;
  }

  /* During dragging: base number follows the real draggable point.
     If AP has become ineffective, the second line shows the exact wasted AP. */
  body.attribute-match-mode #attributes .attr-row.match-dragging .match-drag-value{
    display:flex;
    position:absolute;
    z-index:25;
    left:var(--match-base-pct,0%);
    bottom:calc(50% + 12px);
    transform:translateX(-50%);
    min-width:24px;
    padding:3px 5px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    border:1px solid rgba(218,227,234,.12);
    border-radius:6px;
    background:rgba(10,15,20,.94);
    box-shadow:0 5px 12px rgba(0,0,0,.28);
    pointer-events:none;
    white-space:nowrap;
  }

  body.attribute-match-mode #attributes .match-drag-value b{
    color:#e6ebef;
    font-size:10px;
    font-weight:800;
    line-height:1;
    font-variant-numeric:tabular-nums;
  }

  body.attribute-match-mode #attributes .match-drag-value small{
    display:none;
    color:#c5756d;
    font-size:7.5px;
    font-weight:760;
    line-height:1;
  }

  body.attribute-match-mode #attributes .match-drag-value.has-waste small{
    display:block;
  }

  /* Red dot is intentionally tiny: persistent warning, not a dominant state. */
  body.attribute-match-mode #attributes .match-result-dot.has-waste::after{
    content:"";
    position:absolute;
    right:-4px;
    top:-4px;
    width:6px;
    height:6px;
    border:1px solid rgba(10,15,20,.92);
    border-radius:50%;
    background:#bf645d;
    box-shadow:0 0 0 2px rgba(191,100,93,.09);
  }

  /* In idle Match mode, the browser thumb should not compete with the final marker.
     Hover/drag brings the base interaction back. */
  body.attribute-match-mode #attributes .mini-slider input[type="range"]::-webkit-slider-thumb{
    opacity:0!important;
  }
  body.attribute-match-mode #attributes .mini-slider input[type="range"]::-moz-range-thumb{
    opacity:0!important;
  }
  body.attribute-match-mode #attributes .attr-row.match-dragging .mini-slider input[type="range"]::-webkit-slider-thumb,
  body.attribute-match-mode #attributes .attr-row .range-shell:hover input[type="range"]::-webkit-slider-thumb{
    opacity:1!important;
  }
  body.attribute-match-mode #attributes .attr-row.match-dragging .mini-slider input[type="range"]::-moz-range-thumb,
  body.attribute-match-mode #attributes .attr-row .range-shell:hover input[type="range"]::-moz-range-thumb{
    opacity:1!important;
  }

  /* Right-side value becomes the final Match Attribute. +/- still edit base. */
  body.attribute-match-mode #attributes .stepper input{
    color:#e4e9ed!important;
    cursor:default!important;
  }

  body.attribute-match-mode #attributes .attr-row.is-over-archetype-cap .stepper input{
    color:#e4e9ed!important;
  }
}