/* box.css: styles for the Box screen only (screens/box.js and box/*.js). Uses the tokens and classes of app.css. */

/* ---------------------------------------------------------------------------------------------- header (D-052: status line, next line, reason) */
.box-page { gap: var(--s6); }
.box-head { display: flex; flex-direction: column; gap: var(--s1); }
.back-link { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-small); color: var(--muted); text-decoration: none; margin-bottom: var(--s1); }
.back-link:hover { color: var(--ink); text-decoration: underline; }
.box-head .page-title { margin-bottom: var(--s2); }
.box-status { display: flex; align-items: center; gap: var(--s2); font: 500 var(--fs-body)/1.5 var(--font); }
.box-next { font-size: var(--fs-body); line-height: 1.5; padding-left: calc(8px + var(--s2)); max-width: 80ch; }
.box-next .who { margin-right: var(--s2); font-size: var(--fs-small); }
.box-reason { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); padding-left: calc(8px + var(--s2)); max-width: 80ch; }
.box-facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: baseline; font-size: var(--fs-small); color: var(--muted); margin: var(--s3) 0 var(--s4); }
.box-slot:empty { display: none; }
.box-more { display: flex; flex-direction: column; }
.box-more > .more { margin-top: var(--s4); }

/* ---------------------------------------------------------------------------------------------- job card: the one thing to act on */
.job-card { display: flex; flex-direction: column; gap: var(--s4); }
.job-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.job-head .section-title { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-section); }
.job-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--muted); font: 500 var(--fs-label)/1 var(--font); flex: none; }
.job-intro { margin-top: calc(var(--s2) * -1); max-width: 72ch; font-size: var(--fs-small); }

/* ---------------------------------------------------------------------------------------------- the journey (D-052) */
.journey { display: flex; flex-direction: column; gap: var(--s2); }
.jr-intro { margin-bottom: var(--s3); }
.jr { list-style: none; margin: 0; padding: 0; }
.jr-step { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s3); padding-bottom: var(--s5); }
.jr-step::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.jr-step:last-child::before { display: none; }
.jr-mark { width: 10px; height: 10px; margin: 6px 0 0 3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--idle); background: var(--bg); }
.jr-step.is-done .jr-mark { background: var(--ink); box-shadow: none; }
.jr-step.is-done::before { background: var(--ink); }
.jr-step.is-now .jr-mark { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.jr-step.is-next .jr-mark { box-shadow: inset 0 0 0 2px var(--accent); }
.jr-step.is-skipped .jr-title { text-decoration: line-through; color: var(--muted); }
.jr-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); }
.jr-title { font: 500 var(--fs-body)/1.5 var(--font); }
.jr-step.is-later .jr-title { color: var(--muted); }
.jr-state { font: 500 var(--fs-label)/1.4 var(--font); color: var(--muted); }
.jr-step.is-now .jr-state { color: var(--accent); }
.jr-when { font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.jr-what { font-size: var(--fs-small); line-height: 1.55; max-width: 76ch; }
.jr-why { font-size: var(--fs-small); line-height: 1.55; color: var(--muted); max-width: 76ch; }
.jr-facts { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.jr-facts li, .jr-trail li { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-small); line-height: 1.5; }
.jr-facts .sys, .jr-trail .sys { flex: none; min-width: 64px; justify-content: center; }
.jr-orders { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.jr-order-list { border-top: 1px solid var(--line); }
.jr-order { border-bottom: 1px solid var(--line); }
.jr-order > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); min-height: 44px; padding: var(--s3) 0; cursor: pointer; list-style: none; font-size: var(--fs-small); }
.jr-order > summary::-webkit-details-marker { display: none; }
.jr-order-name { font-weight: 500; }
.jr-order-now { margin-left: auto; color: var(--ink); }
.jr-trail { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.jr-trail .jr-when { min-width: 120px; }
.sys { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--bg-2); font: 500 var(--fs-label)/1 var(--font); color: var(--muted); white-space: nowrap; }
@media (max-width: 600px) { .jr-facts li, .jr-trail li { flex-wrap: wrap; } .jr-trail .jr-when { min-width: 0; } .jr-order-now { margin-left: 0; flex-basis: 100%; } }
.job-card .notice .btn { flex: none; white-space: nowrap; }
@media (max-width: 600px) { .job-card .notice { flex-wrap: wrap; } .job-card .notice .btn { margin-left: 28px; } }
.box-job-slot { display: flex; flex-direction: column; gap: var(--s4); scroll-margin-top: calc(var(--bar-h) + var(--s4)); }

/* the bar fixed to the bottom */
.box-bar .bar-state { color: var(--muted); }
.box-bar .bar-state.is-bad { color: var(--bad); font-weight: 500; }
.box-bar .action-bar-info:empty { display: none; }
.box-bar .action-bar-main { margin-left: auto; }
.bar-main-col { display: flex; flex-direction: column; align-items: stretch; gap: var(--s1); }
.bar-reason { text-align: right; margin: 0; }
.bar-reason[hidden] { display: none; }
@media (max-width: 720px) {
  .box-bar .action-bar-main { margin-left: 0; }
  .bar-reason { text-align: left; }
}

/* ---------------------------------------------------------------------------------------------- the count list */
.count-tools { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 0 var(--s2); position: sticky; top: var(--bar-h); z-index: 5; background: var(--surface); }
.count-tools .field { gap: var(--s1); }
.count-tools .filter-row { gap: var(--s2); }
.count-list { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); margin-top: var(--s2); }
.count-row { box-shadow: 0 -1px 0 var(--line); }
.count-title { display: block; }
/* a few words about one row ("not in stock: 2", D-045) */
.count-tag { display: block; margin-top: var(--s1); }
/* the notice above the count list about pieces that are not in India's stock, and the list it opens */
.not-held { display: flex; flex-direction: column; gap: var(--s2); }
.not-held .seen-row { align-items: baseline; flex-wrap: wrap; }
.not-held .seen-row .count-code { display: inline; margin-left: var(--s2); }
.not-held .seen-row .num { font-weight: 500; white-space: nowrap; }
.count-input { display: flex; align-items: center; gap: var(--s2); }
.count-step { width: 44px; min-width: 44px; padding: 0; font-size: 20px; line-height: 1; }
.count-step[disabled] { opacity: .4; }
.count-state { font-weight: 500; }
.count-row .count-state { color: var(--muted); font-weight: 400; }
.count-row.is-short .count-state { color: var(--warn); font-weight: 500; }
.count-row.is-more .count-state { color: var(--accent); font-weight: 500; }
.count-row.is-none .count-state { color: var(--bad); font-weight: 500; }
.count-undo { min-height: 36px; padding: 0 var(--s2); }
.count-undo[hidden] { display: none; }
.count-none { padding: var(--s4); text-align: center; }
.count-none[hidden] { display: none; }
.count-head { display: grid; grid-template-columns: minmax(0, 1fr) 84px 64px 220px; gap: var(--s3); padding: 10px var(--s4); background: var(--surface-2); font: 500 var(--fs-label)/1.2 var(--font); color: var(--muted); }
.count-head .num { text-align: right; }
.count-head span:nth-child(3) { text-align: center; }

/* laptop: one line per item */
@media (min-width: 721px) {
  .count-tools { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  .count-tools .field { flex: 1 1 280px; }
  .count-tools .filter-row { flex: 0 0 auto; }
  .count-row { grid-template-columns: minmax(0, 1fr) 84px auto 220px; grid-template-areas: "name planned input status"; gap: var(--s3); padding: var(--s2) var(--s4); }
  .count-row .count-name { grid-area: name; }
  .count-row .count-planned { grid-area: planned; text-align: right; color: var(--muted); font-size: var(--fs-body); }
  .count-row .count-input { grid-area: input; }
  .count-row .count-status { grid-area: status; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
  .count-step { display: none; }
}

/* phone: a compact two-line card with - and + beside the number */
@media (max-width: 720px) {
  .count-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "info input"; gap: var(--s1) var(--s3); padding: var(--s2) var(--s3); }
  .count-row .count-name { grid-area: name; }
  .count-row:is(.is-short, .is-more, .is-none) .count-name { padding-right: 64px; }
  .count-row .count-status { display: contents; }
  .count-row .count-info { grid-area: info; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); align-self: center; }
  .count-row .count-undo { grid-row: 1; grid-column: 2; justify-self: end; align-self: start; }
  .count-row .count-input { grid-area: input; }
  .count-row .count-planned { font-size: var(--fs-small); }
  .count-row .count-title, .count-row .count-code { display: inline; }
  .count-row .count-code { margin-left: var(--s2); }
  .count-row .count-tag { display: inline-block; margin: 0 0 0 var(--s2); vertical-align: middle; }
  .count-tools { margin: 0 calc(var(--card-pad) * -1); padding: var(--s2) var(--card-pad); border-bottom: 1px solid var(--line); gap: var(--s1); }
  .count-tools .field-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .count-tools .input { min-height: 44px; }
}

/* a wide window (the page is 1280 px): the numbers stay near the item name, and the columns get room */
@media (min-width: 1000px) {
  .count-head, .count-row { grid-template-columns: minmax(0, 1fr) 120px 96px 320px; column-gap: var(--s5); }
  .count-row .count-input { justify-content: center; }
  .count-row .count-planned { font-weight: 500; }
}

/* ---------------------------------------------------------------------------------------------- upload the packing list, add more (D-041) */
.upload { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0; }
.upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.upload-error:empty, .upload-summary:empty { display: none; }
.upload-error { display: flex; flex-direction: column; gap: 2px; }
.upload-error .field-error { font-weight: 500; font-size: var(--fs-body); }
.pack-summary { display: flex; flex-direction: column; gap: var(--s3); max-width: 880px; margin-top: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.pack-summary-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); }
.pack-file { font: 500 var(--fs-card)/1.3 var(--font); }
.pack-total { font-weight: 500; }
.pack-lines { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.pack-line + .pack-line { border-top: 1px solid var(--line); }
.pack-line-head { display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: var(--s2) var(--s3); font-weight: 500; }
summary.pack-line-head { cursor: pointer; list-style: none; }
summary.pack-line-head::-webkit-details-marker { display: none; }
.pack-line.is-same .pack-line-head { color: var(--good); }
.pack-line.is-short .pack-line-head { color: var(--warn); background: var(--warn-tint); }
.pack-line.is-none .pack-line-head { color: var(--bad); background: var(--bad-tint); }
.pack-line.is-more .pack-line-head { color: var(--accent); background: var(--accent-tint); }
.pack-open { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 400; white-space: nowrap; }
.pack-open .icon { width: 16px; height: 16px; transition: transform .15s; }
.pack-more[open] .pack-open .icon { transform: rotate(90deg); }
.pack-items { list-style: none; margin: 0; padding: 0 var(--s3); max-height: 40vh; overflow: auto; }
.pack-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); flex-wrap: wrap; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.pack-item-name .count-code { display: inline; margin-left: var(--s2); }
.pack-item-nums { font-weight: 500; white-space: nowrap; }
.pack-extra { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3); border-radius: var(--r-ctl); background: var(--warn-tint); color: var(--warn); }
.pack-extra .icon { margin-top: 2px; }
.pack-extra-list { margin: var(--s1) 0; padding: 0 0 0 20px; }
.pack-extra-list li > span + span { margin-left: var(--s3); font-weight: 500; }
/* D-047: "Add these items to the box's list" inside the amber block */
.pack-extra .check { color: var(--text); align-items: flex-start; margin-top: var(--s2); }
.pack-extra .check input { margin-top: 1px; }
.pack-extra p + p.bold { margin-top: var(--s3); }
.pack-notes { margin: 0; padding: 0 0 0 20px; }
@media (max-width: 720px) {
  .upload { margin: 0 calc(var(--card-pad) * -1 + var(--s1)); padding: var(--s3); }
  .upload-row .btn { flex: 1 1 100%; }
  .pack-summary { padding: var(--s3); }
  .pack-open .small { display: none; }
}

/* the sheet of "Add more to this box" */
.choices { display: flex; flex-direction: column; gap: var(--s2); border: 0; padding: 0; margin: 0; min-width: 0; }
.choice { display: flex; align-items: flex-start; gap: var(--s3); min-height: 56px; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); cursor: pointer; }
.choice input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.choice:has(input:checked) { background: var(--accent-tint); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-title { font-weight: 500; }
.choice-line { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.choice-more { padding: var(--s1) 0 var(--s2) calc(22px + var(--s3) + var(--s4)); }
.choice-more[hidden] { display: none; }
.choice-more .input { max-width: 160px; }
.add-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); max-height: 40vh; overflow: auto; }
.add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pieces" "why why"; gap: 2px var(--s3); padding: var(--s2) var(--s3); }
.add-row + .add-row { border-top: 1px solid var(--line); }
.add-name { grid-area: name; font-weight: 500; }
.add-name .count-code { display: inline; margin-left: var(--s2); }
.add-pieces { grid-area: pieces; font-weight: 500; white-space: nowrap; }
.add-why { grid-area: why; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.add-mail { display: flex; align-items: flex-start; gap: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: 1.4; }
.add-mail .icon { margin-top: 1px; }

/* ---------------------------------------------------------------------------------------------- ship form */
.ship-form { max-width: 560px; }
/* a wide window: the fields sit two by two instead of leaving half the card empty */
@media (min-width: 1000px) {
  .ship-form { max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); align-items: start; }
}
.field-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.field-group > legend { padding: 0; margin-bottom: var(--s1); }
.field-group .field-hint, .field-group .field-error { display: block; margin-top: var(--s1); }
.field-error:empty { display: none; }

/* ---------------------------------------------------------------------------------------------- summary, done, calm line */
.packed-summary { display: flex; flex-direction: column; gap: var(--s2); }
.seen-counts { border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); max-height: 50vh; overflow: auto; }
.seen-counts[hidden] { display: none; }
.seen-row { display: flex; gap: var(--s3); padding: var(--s2) var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-small); }
.seen-row:first-child { border-top: 0; }
.seen-row.is-short { color: var(--look); font-weight: 500; }
.done-inner { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.done-tick { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ok-tint); color: var(--ok); flex: none; }
.done-tick .icon { width: 18px; height: 18px; }
@media (max-width: 720px) { .done-inner .btn { width: 100%; } }
.none-inner { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.none-text { font: 500 var(--fs-card)/1.5 var(--font); }
.none-inner p { max-width: 75ch; }
.none-inner .btn { margin-top: var(--s2); }
/* two controls at the end of a notice ("See counts", "Change the counts") */
.notice-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); margin-left: auto; }
.notice .notice-actions .btn { margin-left: 0; }
@media (max-width: 600px) { .packed-summary .notice { flex-wrap: wrap; } .packed-summary .notice > .grow { flex: 1 1 200px; } .notice-actions { margin-left: 28px; justify-content: flex-start; } }
/* D-047: tracking of a box that has left */
.track-inner { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.track-inner .grow { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.track-line { font-weight: 500; overflow-wrap: anywhere; }
.track-line.muted { font-weight: 400; }
@media (max-width: 720px) { .track-inner .btn { width: 100%; } }

/* ---------------------------------------------------------------------------------------------- below: in the box, happened, more */
.dlg-item { display: flex; justify-content: space-between; gap: var(--s3); }
.box-page .list-table td:first-child { min-width: 190px; }
.happened { list-style: none; margin: 0; padding: 0; }
.happened-row { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.4; }
.happened-row:first-child { border-top: 0; }
.happened-row.is-look { color: var(--look); }
.happened-row.is-bad { color: var(--blocked); }
.happened-row .icon { margin-top: 2px; }
.more { margin-top: var(--s5); }
.more-summary { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0; color: var(--muted); font-weight: 500; cursor: pointer; list-style: none; }
.more-summary::-webkit-details-marker { display: none; }
.more-summary .icon { transition: transform .15s; }
.more[open] > .more-summary .icon { transform: rotate(90deg); }
.more-body { padding: var(--s2) 0 var(--s4); }
.more-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }