/* Manager Step Ups (/stepup). Builds on me.css (header band, panels, plate, toast, state boxes). Phone first. Reads tokens only. */
html[data-screen="stepup"] .page { max-width: var(--w-phone-col); }      /* a one-handed phone screen: stays one column on a desktop too */
.pips { display: flex; gap: var(--space-2); margin: var(--space-2) 0; }
.pip { width: var(--space-5); height: var(--space-5); border: 2px solid var(--c-brand-muted); border-radius: var(--radius-sm); background: transparent; }
.pip.full { background: var(--c-accent); border-color: var(--c-accent); }
.plate .caption { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.plate .resets { margin: var(--space-1) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-brand-muted); }

form.give { display: grid; gap: var(--space-4); }
.give .field { display: grid; gap: var(--space-2); min-width: 0; }
.give label, .give .lbl { font-weight: var(--fw-body-strong); font-size: var(--fs-small); line-height: var(--lh-small); }
.give input[type="text"], .give textarea { width: 100%; padding: var(--space-3) var(--space-4); font: inherit; font-size: var(--fs-body); color: var(--c-ink);
  background: var(--c-surface); border: 2px solid var(--c-muted); border-radius: var(--radius-sm); }
.give input[type="text"] { min-height: calc(var(--space-7) + var(--space-2)); }
.give textarea { min-height: calc(var(--space-7) * 2); resize: vertical; }
.give input:focus, .give textarea:focus { border-color: var(--c-focus); outline: 2px solid var(--c-focus); outline-offset: 0; }
.give .hint { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }

/* the picker: nobody is listed until two letters are typed (no browsable name list) */
ul.results { list-style: none; margin: 0; padding: 0; border: 2px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-surface); }
ul.results li + li { border-top: var(--hairline) solid var(--c-line); }
ul.results button { display: block; width: 100%; min-height: var(--touch-min); padding: var(--space-3) var(--space-4); text-align: left; background: none; border: 0; font: inherit; font-size: var(--fs-body); color: var(--c-ink); cursor: pointer; }
ul.results button:hover, ul.results button:focus-visible { background: var(--c-surface-2); }
.chosen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 2px solid var(--c-ink); border-radius: var(--radius-sm); background: var(--c-surface-2); }
.chosen .nm { font-weight: var(--fw-body-strong); font-size: var(--fs-h3); min-width: 0; overflow-wrap: anywhere; }
/* the receiver's team: colour chip + team name (words always), and "+2 to Team Red" in the confirmation */
.who2 { display: grid; gap: var(--space-1); min-width: 0; }
.teamline { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
.teamline .chip-sw { display: inline-block; flex: none; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-sm); }
ul.results button { display: grid; gap: var(--space-1); }
.gain { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-body-strong); color: var(--c-ink); }
.gain:empty { display: none; }

.btn { display: grid; place-items: center; width: 100%; min-height: calc(var(--space-7) + var(--space-2)); padding: 0 var(--space-4); font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-h3); letter-spacing: var(--ls-display); text-transform: uppercase; border-radius: var(--radius-sm); border: 2px solid var(--c-ink); cursor: pointer; background: transparent; color: var(--c-ink); }
.btn.primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.btn.primary:disabled { background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-line); cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0 var(--space-2); min-height: var(--touch-min); font: inherit; font-size: var(--fs-small); color: var(--c-ink); text-decoration: underline; cursor: pointer; }

.msg { margin: 0; padding: var(--space-3) var(--space-4); border: var(--panel-border); border-radius: var(--radius-sm); font-size: var(--fs-body); line-height: var(--lh-body); }
.msg.bad { background: var(--c-bad-soft); color: var(--c-bad-text); border-color: var(--c-bad-text); }

.toast { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.toast[hidden] { display: none; }

/* given this week */
ul.given { list-style: none; margin: 0; padding: 0; }
ul.given li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-top: var(--hairline) solid var(--c-line); font-size: var(--fs-small); line-height: var(--lh-small); }
ul.given li:first-child { border-top: 0; padding-top: 0; }
ul.given .who { font-weight: var(--fw-body-strong); font-size: var(--fs-body); overflow-wrap: anywhere; }
ul.given .why { grid-column: 1 / -1; color: var(--c-muted); overflow-wrap: anywhere; }
ul.given .day { color: var(--c-muted); }
ul.given li.undone .who, ul.given li.undone .why { text-decoration: line-through; color: var(--c-muted); }
ul.given .ask { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
ul.given .ask .btn { width: auto; min-height: var(--touch-min); font-size: var(--fs-small); padding: 0 var(--space-4); }
.empty { margin: 0; color: var(--c-muted); font-size: var(--fs-small); }