/* inputs module: see js/redesign/inputs.js. The Hybrid Week, inline in the
   "Week plan" tab of the Space required tool (#rd-desk-helper): teams down
   the side, Monday to Friday across, a box for each day a team is in.
   Site tokens only; every class is prefixed .rd-inputs-. */

/* The table lays itself out by the width of its own pane (a container), so it
   stacks in a narrow tablet pane as it does on a phone. */
#rd-desk-helper { container: rd-wk / inline-size; }
.rd-inputs-wk { --wk-day: 39.6px; --wk-gap: 3.6px; --wk-size: 57.6px; display: grid; gap: 10.8px; min-width: 0; }
.rd-inputs-wk-title {
  margin: 0; font-family: var(--font-body); font-size: 16.2px; font-weight: 400; line-height: 1.3; color: var(--ink);
}
.rd-inputs-wk-title:focus { outline: none; }
.rd-inputs-wk-title:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 3.6px; }
.rd-inputs-wk-lead { margin: -6px 0 0; font-size: 12.6px; line-height: 1.45; color: var(--grey-strong); }

/* ---- Patterns, and "or days a week" ---- */
.rd-inputs-wk-tools { display: flex; flex-wrap: wrap; gap: 7.2px 12.6px; align-items: center; }
.rd-inputs-wk-presets { display: flex; flex-wrap: wrap; gap: 5.4px; }
.rd-inputs-wk-dk { display: flex; flex-wrap: wrap; gap: 5.4px; align-items: center; font-size: 11.7px; color: var(--grey-strong); }
.rd-inputs-wk-dk > span { margin-right: 1.8px; }
.rd-inputs-wk-chip {
  min-height: 32.4px; padding: 0 10.8px; border: 1px solid var(--line-strong); border-radius: 16.2px;
  background: var(--white); color: var(--ink); font: inherit; font-size: 11.7px; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.rd-inputs-wk-chip--n { min-width: 32.4px; padding: 0; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .rd-inputs-wk-chip:hover { border-color: var(--ink); background: var(--paper); }
}
.rd-inputs-wk-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.rd-inputs-wk-chip:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 1.8px; }
.rd-inputs-wk-hint { margin: 0; font-size: 11.7px; line-height: 1.4; color: var(--grey-strong); }
.rd-inputs-wk-hint::before { content: ''; display: inline-block; width: 5.4px; height: 5.4px; margin: 0 7.2px 1px 0; border-radius: 50%; background: var(--kf-red); }
.rd-inputs-wk-hint[hidden] { display: none; }

/* ---- The table: team | people | Mon..Fri ---- */
.rd-inputs-wk-grid { display: grid; min-width: 0; }
.rd-inputs-wk-hrow, .rd-inputs-wk-row, .rd-inputs-wk-tot {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--wk-size) calc(5 * var(--wk-day) + 4 * var(--wk-gap));
  gap: 7.2px; align-items: center; min-width: 0;
}
.rd-inputs-wk-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--wk-gap); min-width: 0; }
.rd-inputs-wk-hrow { padding-bottom: 5.4px; font-size: 10.8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-strong); }
.rd-inputs-wk-hrow > span:nth-child(2) { text-align: center; }
.rd-inputs-wk-dh { text-align: center; }
.rd-inputs-wk-dh.is-pk { color: var(--kf-red); }
.rd-inputs-wk-row { padding: 3.6px 0; border-top: 1px solid var(--line); }
.rd-inputs-wk-nm { display: flex; gap: 7.2px; align-items: center; min-width: 0; }
.rd-inputs-wk-sw { flex: none; width: 9px; height: 9px; border-radius: 1px; background: var(--c); }
.rd-inputs-wk-nm input {
  flex: 1 1 auto; min-width: 0; height: 32.4px; padding: 0 3.6px; margin-left: -3px;
  /* An editable name: a 3:1 underline at rest, a full box on hover and focus. */
  border: 1px solid transparent; border-bottom-color: #8A8880; border-radius: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 12.6px; text-overflow: ellipsis;
}
@media (hover: hover) {
  .rd-inputs-wk-nm input:hover { border-color: var(--line-strong); border-bottom-color: var(--ink); border-radius: var(--radius); background: var(--white); }
}
.rd-inputs-wk-nm input:focus { border-color: var(--ink); border-radius: var(--radius); background: var(--white); outline: 1.8px solid var(--ink); outline-offset: 0; }
.rd-inputs-wk-rm {
  flex: none; width: 28.8px; height: 28.8px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: var(--radius); color: var(--grey-strong); cursor: pointer;
}
@media (hover: hover) {
  .rd-inputs-wk-rm:hover { color: var(--kf-red); background: var(--paper-2); }
}
.rd-inputs-wk-rm:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 0; }
.rd-inputs-wk-sz { display: flex; align-items: center; gap: 5.4px; min-width: 0; }
.rd-inputs-wk-sz input {
  width: 100%; min-width: 0; height: var(--wk-day); padding: 0 3.6px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--white); color: var(--ink); font: inherit; font-size: 14.4px; text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.rd-inputs-wk-sz input::-webkit-inner-spin-button, .rd-inputs-wk-sz input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rd-inputs-wk-sz input:focus { border-color: var(--ink); outline: 1.8px solid var(--ink); outline-offset: 0; }
.rd-inputs-wk-sz-u { display: none; font-size: 11.7px; color: var(--grey-strong); }

/* A day: a 39.6px box. Filled in the team's tint, with a tick. */
.rd-inputs-wk-day {
  position: relative; height: var(--wk-day); min-width: 0; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--grey-strong);
  font: inherit; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) {
  .rd-inputs-wk-day:hover { border-color: var(--ink); background: var(--paper); }
}
.rd-inputs-wk-day:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 1.8px; z-index: 1; }
.rd-inputs-wk-day[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--ck); }
@media (hover: hover) {
  .rd-inputs-wk-day[aria-pressed="true"]:hover { border-color: var(--ink); }
}
.rd-inputs-wk-ck { display: none; }
.rd-inputs-wk-day[aria-pressed="true"] .rd-inputs-wk-ck { display: block; }
/* The day's name shows in the box on a phone (below), where there is no header row. */
.rd-inputs-wk-day .rd-inputs-wk-dl { display: none; }

/* Before a headcount the teams are examples: no sizes, no totals, nothing to apply. */
.rd-inputs-wk-grid.is-sample .rd-inputs-wk-sz input { background: var(--paper); border-style: dashed; }
.rd-inputs-wk-grid.is-sample .rd-inputs-wk-sz input::placeholder { color: var(--grey-strong); opacity: 1; }
.rd-inputs-wk-grid.is-sample .rd-inputs-wk-tb { visibility: hidden; }
.rd-inputs-wk-grid.is-sample .rd-inputs-wk-tc b { color: var(--grey-strong); }

/* The totals: how many are in each day, the busiest in red. */
.rd-inputs-wk-tot { padding: 7.2px 0 0; border-top: 1px solid var(--ink); align-items: end; }
.rd-inputs-wk-tot-k { font-size: 11.7px; color: var(--ink); align-self: center; }
.rd-inputs-wk-tot-n { font-size: 10.8px; line-height: 1.3; color: var(--grey-strong); text-align: center; align-self: center; }
.rd-inputs-wk-tc { display: grid; justify-items: center; gap: 1.8px; min-width: 0; }
.rd-inputs-wk-tb { position: relative; width: 72%; height: 112px; }
.rd-inputs-wk-stack { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; gap: 1px; border-radius: 6px 6px 0 0; overflow: hidden; }
.rd-inputs-wk-stack i { display: block; flex: none; transition: height var(--dur-base) var(--ease-standard); }
.rd-inputs-wk-gap0 { position: absolute; left: 0; right: 0; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(-45deg, var(--line-strong) 0 1px, transparent 1px 4px); opacity: 0.7; transition: bottom var(--dur-base) var(--ease-standard), height var(--dur-base) var(--ease-standard); }
.rd-inputs-wk-roof { position: absolute; left: -19.5%; right: -19.5%; height: 0; border-top: 1.8px dashed var(--ink); transition: bottom var(--dur-base) var(--ease-standard); }
.rd-inputs-wk-roof[hidden] { display: none; }
.rd-inputs-wk-roof em { position: absolute; left: 19.5%; bottom: 3px; padding: 0 4px 0 0; font-style: normal; font-size: 11px; color: var(--ink); white-space: nowrap; background: var(--paper); }
.rd-inputs-wk-tc b { font-weight: 400; font-size: 12.6px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); }
.rd-inputs-wk-tc .rd-inputs-wk-dl { display: none; font-size: 9.9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-strong); }
.rd-inputs-wk-tc.is-pk b { color: var(--kf-red); font-weight: 500; }

.rd-inputs-wk-under { display: flex; flex-wrap: wrap; gap: 7.2px 14.4px; align-items: center; justify-content: space-between; }
.rd-inputs-wk-add { min-height: 32.4px; padding: 3.6px 0; font-size: 12.6px; }
.rd-inputs-wk-add[hidden] { display: none; }
.rd-inputs-wk-spare { display: flex; gap: 7.2px; align-items: center; font-size: 12.6px; color: var(--ink); }
.rd-inputs-wk-spare select {
  height: 32.4px; padding: 0 7.2px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--white); color: var(--ink); font: inherit; font-size: 12.6px;
}
.rd-inputs-wk-spare select:focus-visible { outline: 1.8px solid var(--ink); outline-offset: 1.8px; }
.rd-inputs-wk-mismatch:empty { display: none; }
.rd-inputs-wk-mismatch { display: flex; flex-wrap: wrap; gap: 1.8px 12.6px; align-items: center; font-size: 11.7px; line-height: 1.45; color: var(--grey-strong); }
.rd-inputs-wk-mismatch p { margin: 0; flex: 1 1 100%; }
.rd-inputs-wk-mismatch b { font-weight: 500; color: var(--ink); }
.rd-inputs-wk-mismatch.is-warn { padding: 9px 10.8px; background: #F6EBD3; border-left: 1.8px solid #8A6D00; }
.rd-inputs-wk-mismatch .text-link { min-height: 28.8px; padding: 0; font-size: 11.7px; }

/* ---- The verdict, straight under the table, and its one action ---- */
.rd-inputs-wk-verdict {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 14.4px; align-items: center;
  padding: 12.6px 14.4px; background: var(--paper); border-left: 2.7px solid var(--kf-red);
}
.rd-inputs-wk-line { grid-column: 1; margin: 0; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.rd-inputs-wk-line b { font-weight: 500; color: var(--ink); }
.rd-inputs-wk-apply { grid-column: 2; grid-row: 1; padding: 0 16.2px; white-space: nowrap; gap: 5.4px; }
.rd-inputs-wk-apply[hidden] { display: none; }
.rd-inputs-wk-apply.is-in-use {
  background: var(--white); color: var(--ink); border-color: var(--line-strong); cursor: default; box-shadow: none;
}
@media (hover: hover) {
  .rd-inputs-wk-apply.is-in-use:hover {
    background: var(--white); color: var(--ink); border-color: var(--line-strong); cursor: default; box-shadow: none;
  }
}
.rd-inputs-wk-apply .rd-inputs-wk-ck { display: inline-block; vertical-align: -2.25px; margin-right: 3.6px; color: var(--green, #2E7D4F); }
.rd-inputs-wk-money { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10.8px; margin: 0; padding-top: 9px; border-top: 1px solid var(--line); }
.rd-inputs-wk-money[hidden] { display: none; }
.rd-inputs-wk-money div { min-width: 0; }
.rd-inputs-wk-money dt { font-size: 10.8px; line-height: 1.3; color: var(--grey-strong); }
.rd-inputs-wk-money dd { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--ink); }
.rd-inputs-wk-money dd.rd-inputs-wk-sub { font-size: 10.8px; font-weight: 400; color: var(--grey-strong); }

/* ---- Spread the peak ---- */
.rd-inputs-wk-tip { display: flex; flex-wrap: wrap; gap: 7.2px 14.4px; align-items: center; justify-content: space-between; padding: 10.8px 0 0; border-top: 1px solid var(--line); }
.rd-inputs-wk-tip[hidden] { display: none; }
.rd-inputs-wk-tip p { margin: 0; min-width: 0; flex: 1 1 216px; font-size: 12.6px; line-height: 1.45; color: var(--ink-2); }
.rd-inputs-wk-tip b { font-weight: 500; color: var(--ink); }
.rd-inputs-wk-tip .kf-btn { flex: none; min-height: 36px; padding: 0 12.6px; font-size: 12.6px; }

/* ---- The chart, on demand ---- */

/* ---- Phones: each team on two lines (name and people, then five full-width
   day boxes with the day's name in each). No sideways scroll; every box 39.6px. ---- */
@container rd-wk (max-width: 440px) {
  .rd-inputs-wk-row { grid-template-columns: minmax(0, 1fr) 100.8px; gap: 5.4px 7.2px; padding: 7.2px 0 9px; }
  .rd-inputs-wk-row > .rd-inputs-wk-days { grid-column: 1 / -1; }
  .rd-inputs-wk-sz-u { display: inline; }
  .rd-inputs-wk-nm input { font-size: 14.4px; font-weight: 500; }
  /* Day names once, in a header over the first team; each box is a 40px tick, a rota at a glance. */
  .rd-inputs-wk-hrow { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
  .rd-inputs-wk-hrow > span:not(.rd-inputs-wk-days) { display: none; }
  .rd-inputs-wk-hrow .rd-inputs-wk-dh { text-align: center; }
  .rd-inputs-wk-day { height: 40px; }
  .rd-inputs-wk-day .rd-inputs-wk-ck { width: 14px; height: 14px; }
  /* A shorter skyline; room above it so the desks label never sits on the title. */
  .rd-inputs-wk-tot > .rd-inputs-wk-days { padding-top: 18px; }
  /* The counts under each day say it; the skyline repeated them. */
  .rd-inputs-wk-tb { display: none; }
  #panel-space .rd-inputs-wk-tools .rd-inputs-wk-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rd-inputs-wk-presets .rd-inputs-wk-chip { flex: none; }
  .rd-inputs-wk-tot { grid-template-columns: minmax(0, 1fr) auto; gap: 5.4px 7.2px; }
  .rd-inputs-wk-tot > .rd-inputs-wk-days { grid-column: 1 / -1; }
  .rd-inputs-wk-tot-n { text-align: right; }
  .rd-inputs-wk-tc .rd-inputs-wk-dl { display: block; }
  .rd-inputs-wk-verdict { grid-template-columns: minmax(0, 1fr); padding: 12.6px; }
  .rd-inputs-wk-apply { grid-column: 1; grid-row: auto; width: 100%; }
  .rd-inputs-wk-money { grid-row: auto; }
  .rd-inputs-wk-tools { gap: 7.2px; }
  .rd-inputs-wk-presets { width: 100%; }
}
/* Touch widths: every control around the table is a 39.6px target, and the
   remove button keeps clear of the name beside it. */
@media (max-width: 900px), (pointer: coarse) {
  .rd-inputs-wk-chip { min-height: 39.6px; border-radius: 19.8px; padding: 0 12.6px; font-size: 12.6px; }
  .rd-inputs-wk-chip--n { min-width: 39.6px; padding: 0; }
  .rd-inputs-wk-nm { gap: 9px; }
  .rd-inputs-wk-nm input { height: 39.6px; }
  .rd-inputs-wk-rm { width: 39.6px; height: 39.6px; margin-left: 3.6px; }
  .rd-inputs-wk-add { min-height: 39.6px; }
  .rd-inputs-wk-spare select { height: 39.6px; }
  .rd-inputs-wk-tip .kf-btn, .rd-inputs-wk-apply { min-height: 39.6px; }
  .rd-inputs-wk-mismatch .text-link { min-height: 39.6px; }
}
/* Phones: room under the table, so the fixed footer and the WhatsApp button
   never sit over Friday, the totals or the button that uses the desks. */
@media (max-width: 900px) {
  .rd-inputs-wk { padding-bottom: 21.6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-inputs-wk * { transition: none !important; }
}

/* Colour audit: an open X path painted UA black as a fill (invisible, but not a token). */
.rd-inputs-wk-rm path { fill: none; }