/* ==========================================================================
   BLUR HUD OVERLAY
   Game-Bar-style: a transparent full-screen layer holding several
   independent draggable widgets, rather than one centered modal
   with a dimmed backdrop. Uses the same tokens as main.css.
   ========================================================================== */

.hud-overlay{
  position:fixed;
  inset:0;
  z-index:400;
  display:none;
  pointer-events:none;
}

.hud-overlay.open{
  display:block;
}

.hud-overlay.open::before{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(3px);
  pointer-events:auto;
}


/* ==========================================================================
   WIDGET SHELL
   ========================================================================== */

.hud-widget{
  position:fixed;
  z-index:2;
  width:250px;
  max-height:min(46vh,420px);
  display:flex;
  flex-direction:column;
  background:var(--sidebar);
  border:1px solid var(--border-strong);
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  pointer-events:auto;
  opacity:0;
  transform:scale(.96);
  transition:opacity var(--speed-slow) var(--curve), transform var(--speed-slow) var(--curve);
}

.hud-overlay.open .hud-widget{
  opacity:1;
  transform:none;
}

.hud-widget.dragging{
  transition:none;
  box-shadow:0 26px 60px rgba(0,0,0,.55);
}

.hud-widget-header{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 12px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  cursor:grab;
  touch-action:none;
  user-select:none;
}

.hud-widget-header:active{
  cursor:grabbing;
}

.hud-widget-grip{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted-dim);
  flex-shrink:0;
}

.hud-widget-grip svg{
  width:12px;
  height:12px;
  fill:currentColor;
}

.hud-widget-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--accent);
}

.hud-widget-icon svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.hud-widget-title{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.hud-widget-body{
  overflow-y:auto;
  padding:6px;
}

.hud-widget-body::-webkit-scrollbar{
  width:6px;
}

.hud-widget-body::-webkit-scrollbar-thumb{
  background:var(--surface-3);
  border-radius:8px;
}


/* ---- generic list rows, shared by Nav / Tools ---- */

.hud-list{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.hud-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  height:34px;
  padding:0 10px;
  border-radius:7px;
  color:var(--text);
  font-size:12.5px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background var(--speed) var(--curve);
}

.hud-list-row:hover{
  background:var(--surface-2);
}

.hud-empty{
  padding:16px 10px;
  font-size:12px;
  color:var(--muted-dim);
  text-align:center;
}


/* ---- stopwatch readout, appended inline into a Tools row ---- */

.hud-stopwatch-time{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent);
  flex-shrink:0;
}


/* ---- settings widget rows / switch ---- */

.hud-switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  height:36px;
  padding:0 10px;
  border-radius:7px;
  font-size:12.5px;
  color:var(--text);
  cursor:pointer;
  transition:background var(--speed) var(--curve);
}

.hud-switch-row:hover{
  background:var(--surface-2);
}

.hud-switch{
  width:30px;
  height:18px;
  border-radius:100px;
  background:var(--surface-3);
  border:1px solid var(--border-strong);
  flex-shrink:0;
  position:relative;
  transition:background var(--speed) var(--curve);
}

.hud-switch::before{
  content:'';
  position:absolute;
  top:1px;
  left:1px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--muted);
  transition:transform var(--speed) var(--curve), background var(--speed) var(--curve);
}

.hud-switch.on{
  background:var(--accent-dim);
  border-color:var(--accent);
}

.hud-switch.on::before{
  background:var(--accent);
  transform:translateX(12px);
}


/* ---- stats widget ---- */

.hud-stats{
  padding:6px 8px 8px;
}

.hud-stat-clock{
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:500;
  color:var(--white);
  text-align:center;
  padding:8px 0 12px;
  letter-spacing:.01em;
}

.hud-stat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 4px;
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--border);
}

.hud-stat-row span:last-child{
  font-family:var(--font-mono);
  color:var(--text);
}


/* ==========================================================================
   CENTER COMMAND PALETTE
   Now just one widget among several — same look/behavior as before,
   but no longer the exclusive modal, and positioned by flex
   centering rather than being the overlay's only child.
   ========================================================================== */

.hud-palette{
  position:fixed;
  left:50%;
  top:14vh;
  transform:translateX(-50%) translateY(-8px) scale(.98);
  z-index:3;
  width:min(560px,88%);
  max-height:52vh;
  display:flex;
  flex-direction:column;
  background:var(--sidebar);
  border:1px solid var(--border-strong);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  pointer-events:auto;
  opacity:0;
  transition:transform var(--speed-slow) var(--curve), opacity var(--speed-slow) var(--curve);
}

.hud-overlay.open .hud-palette{
  transform:translateX(-50%) translateY(0) scale(1);
  opacity:1;
}


/* ---- input row ---- */

.palette-input-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}

.palette-search-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
  fill:none;
  stroke:var(--muted-dim);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.palette-input{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  outline:none;
  color:var(--text);
  font:inherit;
  font-family:var(--font-body);
  font-size:15px;
}

.palette-input::placeholder{
  color:var(--muted-dim);
}

.palette-kbd{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.02em;
  color:var(--muted-dim);
  padding:3px 7px;
  border-radius:5px;
  background:var(--surface);
  border:1px solid var(--border);
}


/* ---- results ---- */

.palette-results{
  overflow-y:auto;
  padding:8px;
  flex:1;
  min-height:0;
}

.palette-results::-webkit-scrollbar{
  width:7px;
}

.palette-results::-webkit-scrollbar-thumb{
  background:var(--surface-3);
  border-radius:8px;
}

.palette-group-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-dim);
  padding:10px 10px 6px 36px;
}

.palette-group-label:first-child{
  padding-top:4px;
}

.palette-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  height:40px;
  padding:0 10px;
  border-radius:8px;
  color:var(--text);
  font-size:13.5px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background var(--speed) var(--curve);
}

.palette-row:hover,
.palette-row.active{
  background:var(--surface-2);
}

.palette-row.active{
  color:var(--white);
}

.palette-row-num{
  flex-shrink:0;
  width:16px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--muted-dim);
  text-align:center;
}

.palette-row-label{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.palette-row-hint{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--muted-dim);
}

.palette-row.active .palette-row-hint{
  color:var(--accent);
}

.palette-empty{
  padding:30px 10px;
  text-align:center;
  font-size:13px;
  color:var(--muted-dim);
}


/* ---- footer ---- */

.palette-footer{
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 18px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}

.palette-footer span{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--muted-dim);
}

.palette-footer-brand{
  margin-left:auto;
  font-family:var(--font-display);
  font-weight:600;
  font-size:12px;
  letter-spacing:-.01em;
  color:var(--muted-dim);
}


/* ==========================================================================
   TOAST
   ========================================================================== */

.hud-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:450;
  transform:translate(-50%,10px);
  padding:10px 18px;
  border-radius:9px;
  background:var(--sidebar);
  border:1px solid var(--border-strong);
  color:var(--text);
  font-size:13px;
  font-weight:500;
  box-shadow:0 12px 28px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--speed-slow) var(--curve), transform var(--speed-slow) var(--curve);
}

.hud-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}


/* ==========================================================================
   MOBILE
   Dragging four separate widgets on a small screen fights the OS
   keyboard and viewport too much to be usable — collapse to just
   the center palette, matching the earlier single-modal behavior.
   ========================================================================== */

@media(max-width:900px){

  .hud-widget{
    display:none;
  }

  .hud-palette{
    top:8vh;
    width:calc(100% - 24px);
    max-height:76vh;
  }

  .palette-footer span:not(:last-child):not(.palette-footer-brand){
    display:none;
  }

  .hud-toast{
    bottom:16px;
    width:calc(100% - 32px);
    text-align:center;
  }

}