/* Append-only: ensure .card, .row-sub exist if not already */
.card{background:#111827;border:1px solid #1f2937;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:16px;margin-bottom:16px}
.row-sub{font-size:13px;color:#6b7280}
/* Point Action compact, responsive layout */
.point-action {
  display: grid;
  grid-template-columns: 1fr 1fr;      /* mobile: 50% / 50% */
  gap: 8px;
}

.point-action .pa-type,
.point-action .pa-points,
.point-action .pa-reason {
  box-sizing: border-box;
  max-width: 100%;
}

/* Reason spans full width (both columns) on mobile too */
.point-action .pa-reason { grid-column: 1 / -1; }

/* Desktop rules */
@media (min-width: 768px) {
  .point-action {
    grid-template-columns: auto 5ch 1fr; /* Type auto, Points 4 digits (~5ch), Reason fills */
    align-items: start;
  }
  .point-action .pa-type   { grid-column: 1; width: auto; }
  .point-action .pa-points { grid-column: 2; width: 5ch; min-width: 5ch; }
  .point-action .pa-reason { grid-column: 1 / -1; }
}

/* Inputs/textarea safety so they never overlap container */
.point-action select,
.point-action input,
.point-action textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* --- Points field visibility & sizing (desktop/tablet) --- */
.point-action .pa-points input {
  width: 8ch;              /* show up to ~8 digits */
  min-width: 8ch;          /* never collapse too small */
  max-width: 100%;
  font-size: 16px;         /* readable on all devices */
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  text-align: right;       /* nicer for numbers */
  padding: 6px 8px;
  box-sizing: border-box;
}

/* Make the desktop/tablet grid give Points more room */
@media (min-width: 768px) {
  .point-action {
    grid-template-columns: auto minmax(8ch, 140px) 1fr; /* Type | Points | Reason */
  }
}

/* Optional: a touch more room on wide desktop */
@media (min-width: 1200px) {
  .point-action {
    grid-template-columns: auto minmax(10ch, 160px) 1fr;
  }
}

/* Keep Type reasonably sized on desktop/tablet */
.point-action .pa-type select {
  width: auto;
  max-width: 100%;
}

/* Make inputs match button height-ish, prevent overlap */
.point-action select,
.point-action input,
.point-action textarea {
  height: 36px;            /* adjust if your buttons differ */
  max-width: 100%;
  box-sizing: border-box;
}

/* (Optional) Hide number spinners if they crunch space */
.point-action .pa-points input[type="number"]::-webkit-outer-spin-button,
.point-action .pa-points input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.point-action .pa-points input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}