/* The Status window's four stats with their + buttons, and the capped numbers as bars toward their caps (v1.13,
   ui/status-stats.js, brief 21). Folded, the window shows only HP, SP, EXP and Gold [P]; a badge on its + says how
   many stat points wait. Under 760 px the stats never show, so the four rows show by themselves while points wait. */
.alloc { display: grid; gap: 2px; margin: 9px 0 0; padding-top: 7px; border-top: 1px solid var(--edge); }
.al-left { margin: 0 0 3px; font: 500 12px/1.3 var(--f-display); letter-spacing: 0.06em; color: var(--exp); }
.al-left b { font: 400 14px/1 var(--f-num); letter-spacing: 0; }
.al-row { display: grid; grid-template-columns: 1fr auto 22px; align-items: center; gap: 8px; min-height: 22px; }
.al-name { font: 500 13px/1.3 var(--f-display); letter-spacing: 0.05em; color: var(--ink-dim); cursor: help; }
.al-val { font: 400 15px/1 var(--f-num); color: var(--ink); text-align: right; }
.al-val small { margin-left: 3px; font: 500 11px/1 var(--f-body); color: #8fd36a; }
.al-val small.is-boon { color: #ffc861; }                              /* a blessing's points (v1.45) in its gold */
.al-plus {
  width: 22px; height: 22px; padding: 0; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--exp); background: rgba(232, 179, 58, 0.16); color: #ffe6a6;
  font: 700 15px/1 var(--f-body);
}
.al-plus:hover { background: rgba(232, 179, 58, 0.34); color: #fff3d0; }
.al-plus:active { transform: translateY(1px); }
.al-plus:focus-visible { outline: 2px solid #f3d68a; outline-offset: 2px; }
.al-plus[hidden] { display: block; visibility: hidden; }        /* keeps the column when no point waits */

.caps { display: grid; gap: 3px; margin: 7px 0 0; padding-top: 6px; border-top: 1px solid var(--edge); }
.cap { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.cap dt { font: 500 12px/1.5 var(--f-display); letter-spacing: 0.06em; color: var(--ink-faint); }
.cap dd { display: grid; grid-template-columns: 1fr 76px; align-items: center; gap: 8px; margin: 0; }   /* room for Cast's "/ 40.5" */
.cap-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cap-bar b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #8a6a2a, var(--exp)); }
.cap-val { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cap-val small { color: var(--ink-faint); font-size: 11px; }

#status.is-folded .alloc, #status.is-folded .caps { display: none; }
#status header { position: relative; }
.st-pts {
  position: absolute; top: -9px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 9px; border: 1px solid #000; pointer-events: none;
  background: var(--exp); color: #1b140f; font: 400 12px/1 var(--f-num);
}
.st-pts[hidden], #status:not(.is-folded) .st-pts { display: none; }
#status.is-folded.has-points #st-fold { animation: pts-pulse 1.2s ease-in-out infinite; }

@media (max-width: 760px) {
  .caps, .st-pts { display: none; }
  #status .alloc { display: none; }
  #status.has-points .alloc, #status.is-folded.has-points .alloc { display: grid; }   /* no + to open them this narrow */
  .al-row { grid-template-columns: 1fr auto 26px; }
  .al-plus { width: 26px; height: 26px; }                                            /* a thumb's size */
}