/* CONFIRM WHAT'S GOING (Chase, 25 Oct: "Make spurs confirm the packing list
   item by item and make it work flawlessly on an ipad"; at 10 pm: "the + and -
   sign are a little extra. Make it all sexier too and they should have the
   ability to click on the items line and have it mark all there").

   The Spurs order page's step between "We've ordered it" and Ready
   (spurs/jobs/_confirm_step, _confirm_line, spurs_confirm_controller.js). The
   look is the task-flow and Spurs mockups' (prototypes/task-flow,
   prototypes/spurs): white cards with the soft shadow, a big round tick that
   fills, green when all of it is going and amber when some is short, the
   short words as a pill, and a bar that fills as lines are ticked. The same
   tokens as the kit, so it reads as Kowboy's.

   The state is the row's data-state (open, done, short, extra) and data-save
   (idle, saving, saved, failed), set on the server and changed at once by the
   script. The tick's fill and its check are TRANSITIONS, not animations, so a
   row the server draws again after a save does not play them a second time;
   the little pop is .is-popped, added by the script for the tap itself. */

.sc-list { display: grid; gap: 0.625rem; }
/* Two columns where there is room: an iPad on its side, a laptop. */
@media (min-width: 56rem) {
  .sc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.sc-frame { display: block; min-width: 0; scroll-margin-top: 11rem; scroll-margin-bottom: 1rem; }
.sc-frame[hidden] { display: none; }

/* ------------------------------------------------------------------ a row -- */
.sc-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.12s;
}
.sc-row:hover { border-color: var(--color-line-strong); }
.sc-row:active { transform: scale(0.995); }
.sc-row[data-state="done"], .sc-row[data-state="extra"] { background: #f3fbf5; border-color: #bfe3c9; }
.sc-row[data-state="short"] { background: #fffaf0; border-color: #f3dfa8; }
.sc-row[data-save="failed"] { border-color: var(--color-bad); box-shadow: 0 0 0 1px var(--color-bad), var(--shadow-card); }

.sc-tickform { min-width: 0; margin: 0; }
.sc-tap {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.75rem 0.5rem 0.75rem 0.875rem;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0.875rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sc-tap:focus-visible { outline: 3px solid rgba(180, 83, 9, 0.5); outline-offset: -3px; }

/* The big round tick. */
.sc-tick {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #fff;
  background: #fff;
  border: 2px solid var(--color-line-strong);
  border-radius: 9999px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.sc-tick svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-tick path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.3s 0.08s ease-out; }
.sc-row:not([data-state="open"]) .sc-tick path { stroke-dashoffset: 0; }
.sc-row[data-state="done"] .sc-tick, .sc-row[data-state="extra"] .sc-tick { background: var(--color-good); border-color: var(--color-good); }
.sc-row[data-state="short"] .sc-tick { color: var(--color-ink); background: #f59e0b; border-color: #f59e0b; }
.sc-row[data-state="open"] .sc-tap:hover .sc-tick { border-color: var(--color-good); }
.sc-row.is-popped .sc-tick { animation: sc-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes sc-pop { from { transform: scale(0.55); } }

.sc-text { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0.125rem; }
.sc-label { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.sc-meta { font-size: 0.875rem; line-height: 1.25rem; color: var(--color-muted); }
/* "20 of 24 · 4 short", "30 of 24 · 6 extra": a pill, the mockups' badge. */
.sc-words {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  margin-top: 0.25rem;
  padding: 0 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-warn);
  background: var(--color-warn-soft);
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}
.sc-words[hidden] { display: none; }
.sc-row[data-state="extra"] .sc-words { color: var(--color-good-ink); background: var(--color-good-soft); }

/* The number at the right: how many are going, over "of 24". On a desk it is
   the box itself (tap and type); on a touch screen it opens the keypad. */
.sc-qty { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.375rem 0.75rem 0.375rem 0; }
.sc-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 3.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.sc-num:hover { background: rgb(255 255 255 / 0.7); border-color: var(--color-line-strong); }
.sc-num:focus-within { background: #fff; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18); }
.sc-num-input {
  display: block;
  /* Four digits (live critique 27 Oct: 111 read "11" in a 4rem box). */
  width: 4.75rem;
  min-height: 0;
  height: 1.875rem;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.sc-num-input:focus { cursor: text; }
/* Where the browser can, the box grows with what is in it, so a long count is
   never cut off whatever the font; elsewhere it keeps its four digits. */
@supports (field-sizing: content) {
  .sc-num-input { field-sizing: content; width: auto; min-width: 4.75rem; max-width: 8rem; }
}
.sc-num-of { font-size: 0.75rem; line-height: 1rem; color: var(--color-muted); white-space: nowrap; }
.sc-row[data-state="open"] .sc-num-input { color: var(--color-muted); }
.sc-row[data-state="short"] .sc-num-input { color: var(--color-warn); }
.sc-row[data-state="extra"] .sc-num-input { color: var(--color-good-ink); }

/* Under the line: who last changed it, "Saved", and the quiet Note. */
.sc-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 0.75rem;
  margin-top: -0.625rem;
  padding: 0 0.5rem 0.125rem 4.5rem;
}
.sc-status { min-width: 0; margin: 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.sc-status:empty { display: none; }
.sc-row[data-save="saved"] .sc-status::before { content: "✓ "; color: var(--color-good); font-weight: 700; }
.sc-row[data-save="failed"] .sc-status { font-weight: 700; color: var(--color-bad); }
.sc-note { margin-left: auto; min-width: 0; }
.sc-note[open] { flex-basis: 100%; }
.sc-note > summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-ui);
}
.sc-note > summary::-webkit-details-marker { display: none; }
.sc-note > summary svg { width: 1rem; height: 1rem; flex: none; }
.sc-note-text { min-width: 0; overflow-wrap: anywhere; }
.sc-note.has-note > summary { color: var(--color-ink); font-weight: 500; }
.sc-note.has-note > summary svg { color: var(--color-accent); }
.sc-note-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin: 0; padding: 0 0 0.75rem; }
.sc-note-form .ui-input { font-size: 1rem; }
.sc-note-field { min-width: 0; flex: 1 1 12rem; }

@media (max-width: 30rem) {
  .sc-tap { gap: 0.75rem; padding-left: 0.75rem; }
  .sc-num { min-width: 5rem; }
  .sc-foot { padding-left: 0.75rem; margin-top: -0.375rem; }
}

/* ------------------------------------------------- the bar over the list -- */
/* The words and the fill on the left, the filter on the right; on a phone the
   words take the whole first line and the filter sits beside the fill, so the
   bar stays two short lines. */
.sc-bar {
  position: sticky;
  /* Under Spurs's band (layouts/spurs: 64px and its 2px amber rule). */
  top: calc(66px + 0.5rem);
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem 1rem;
  margin-bottom: 0.25rem;
  padding: 0.75rem 1rem;
  background: rgb(255 255 255 / 0.96);
  border: 1px solid var(--color-line);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-lift);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sc-prog { display: contents; }
.sc-prog-words { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; font-size: 1.0625rem; line-height: 1.5rem; font-variant-numeric: tabular-nums; }
.sc-prog-words b { font-weight: 700; color: var(--color-ink); }
.sc-prog-short { font-size: 0.875rem; font-weight: 600; color: var(--color-warn); }
.sc-prog-short[hidden] { display: none; }
.sc-meter { grid-column: 1; grid-row: 2; display: flex; height: 0.5rem; overflow: hidden; background: var(--color-line); border-radius: 9999px; }
.sc-meter > i { display: block; height: 100%; transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sc-meter-good { background: var(--color-good); }
.sc-meter-short { background: #f59e0b; }
.sc-filter {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-accent-strong);
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--color-line-strong);
  border-radius: 9999px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.sc-filter:hover { background: var(--color-accent-soft); }
.sc-filter[aria-pressed="true"] { color: #fff; background: var(--color-ink); border-color: var(--color-ink); }
@media (max-width: 30rem) {
  .sc-bar { padding: 0.625rem 0.75rem; column-gap: 0.75rem; }
  .sc-prog-words { grid-column: 1 / -1; }
  .sc-filter { grid-row: 2; min-height: 2.75rem; padding: 0 0.875rem; font-size: 0.875rem; }
}
.sc-alldone {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-good-ink);
  background: #f3fbf5;
  border: 1px solid #bfe3c9;
  border-radius: 0.875rem;
}
.sc-alldone[hidden] { display: none; }

/* The bar's fill: the green share and the amber share, as classes (the page
   allows no style attribute). */
.sc-w-0{width:0%}.sc-w-1{width:1%}.sc-w-2{width:2%}.sc-w-3{width:3%}.sc-w-4{width:4%}.sc-w-5{width:5%}.sc-w-6{width:6%}.sc-w-7{width:7%}.sc-w-8{width:8%}.sc-w-9{width:9%}
.sc-w-10{width:10%}.sc-w-11{width:11%}.sc-w-12{width:12%}.sc-w-13{width:13%}.sc-w-14{width:14%}.sc-w-15{width:15%}.sc-w-16{width:16%}.sc-w-17{width:17%}.sc-w-18{width:18%}.sc-w-19{width:19%}
.sc-w-20{width:20%}.sc-w-21{width:21%}.sc-w-22{width:22%}.sc-w-23{width:23%}.sc-w-24{width:24%}.sc-w-25{width:25%}.sc-w-26{width:26%}.sc-w-27{width:27%}.sc-w-28{width:28%}.sc-w-29{width:29%}
.sc-w-30{width:30%}.sc-w-31{width:31%}.sc-w-32{width:32%}.sc-w-33{width:33%}.sc-w-34{width:34%}.sc-w-35{width:35%}.sc-w-36{width:36%}.sc-w-37{width:37%}.sc-w-38{width:38%}.sc-w-39{width:39%}
.sc-w-40{width:40%}.sc-w-41{width:41%}.sc-w-42{width:42%}.sc-w-43{width:43%}.sc-w-44{width:44%}.sc-w-45{width:45%}.sc-w-46{width:46%}.sc-w-47{width:47%}.sc-w-48{width:48%}.sc-w-49{width:49%}
.sc-w-50{width:50%}.sc-w-51{width:51%}.sc-w-52{width:52%}.sc-w-53{width:53%}.sc-w-54{width:54%}.sc-w-55{width:55%}.sc-w-56{width:56%}.sc-w-57{width:57%}.sc-w-58{width:58%}.sc-w-59{width:59%}
.sc-w-60{width:60%}.sc-w-61{width:61%}.sc-w-62{width:62%}.sc-w-63{width:63%}.sc-w-64{width:64%}.sc-w-65{width:65%}.sc-w-66{width:66%}.sc-w-67{width:67%}.sc-w-68{width:68%}.sc-w-69{width:69%}
.sc-w-70{width:70%}.sc-w-71{width:71%}.sc-w-72{width:72%}.sc-w-73{width:73%}.sc-w-74{width:74%}.sc-w-75{width:75%}.sc-w-76{width:76%}.sc-w-77{width:77%}.sc-w-78{width:78%}.sc-w-79{width:79%}
.sc-w-80{width:80%}.sc-w-81{width:81%}.sc-w-82{width:82%}.sc-w-83{width:83%}.sc-w-84{width:84%}.sc-w-85{width:85%}.sc-w-86{width:86%}.sc-w-87{width:87%}.sc-w-88{width:88%}.sc-w-89{width:89%}
.sc-w-90{width:90%}.sc-w-91{width:91%}.sc-w-92{width:92%}.sc-w-93{width:93%}.sc-w-94{width:94%}.sc-w-95{width:95%}.sc-w-96{width:96%}.sc-w-97{width:97%}.sc-w-98{width:98%}.sc-w-99{width:99%}
.sc-w-100{width:100%}

/* ------------------------------------------- the keypad, on a touch screen -- */
.sc-sheet {
  width: 100%;
  max-width: 100%;
  max-height: 100dvh;
  margin: auto 0 0;
  padding: 0;
  color: var(--color-ink);
  background: var(--color-card);
  border: 0;
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -12px 40px -12px rgb(31 26 20 / 0.45);
  overflow: auto;
  overscroll-behavior: contain;
}
.sc-sheet[open] { animation: sc-sheet-up 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sc-sheet::backdrop { background: rgb(31 26 20 / 0.45); }
@keyframes sc-sheet-up { from { transform: translateY(2rem); opacity: 0; } }
@media (min-width: 40rem) {
  .sc-sheet { width: 22rem; margin: auto; border-radius: 1.25rem; box-shadow: var(--shadow-lift); }
  .sc-sheet[open] { animation-name: sc-sheet-pop; }
  @keyframes sc-sheet-pop { from { transform: scale(0.96); opacity: 0; } }
}
.sc-sheet-in { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.125rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom)); }
.sc-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.sc-sheet-title { margin: 0; font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; overflow-wrap: anywhere; }
.sc-sheet-sub { margin: 0.125rem 0 0; font-size: 0.875rem; color: var(--color-muted); }
.sc-sheet-x {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem -0.5rem 0 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-muted);
  background: none;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
}
.sc-sheet-x:hover { background: var(--color-page); color: var(--color-ink); }
.sc-sheet-show {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--color-page);
  border-radius: 0.875rem;
}
.sc-sheet-value { font-size: 2.75rem; line-height: 3rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sc-sheet.is-fresh .sc-sheet-value { color: var(--color-muted); }
.sc-sheet-words { min-height: 1.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--color-good-ink); }
.sc-sheet-words[data-tone="short"] { color: var(--color-warn); }
.sc-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.sc-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-line-strong);
  border-radius: 0.75rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.1s, transform 0.1s;
}
.sc-key:active { background: var(--color-line); transform: scale(0.97); }
.sc-key svg { width: 1.5rem; height: 1.5rem; }
.sc-sheet-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border: 0;
  border-radius: 0.75rem;
  cursor: pointer;
  touch-action: manipulation;
}
.sc-sheet-done svg { width: 1.375rem; height: 1.375rem; flex: none; }
.sc-sheet-done:hover, .sc-sheet-done:active { background: var(--color-accent-strong); }

@media (prefers-reduced-motion: reduce) {
  .sc-row, .sc-tick, .sc-tick path, .sc-meter > i { transition: none; }
  .sc-row.is-popped .sc-tick, .sc-sheet[open] { animation: none; }
}