.prep-page { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 42rem; margin-inline: auto; }
.prep-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.prep-refresh { min-height: 48px; display: inline-flex; align-items: center; gap: var(--sp-2); }
.prep-h2 { font-size: var(--fs-l); margin: var(--sp-3) 0 0; }
.prep-empty { text-align: center; padding: var(--sp-7) var(--sp-4); font-size: var(--fs-l); }


.prep-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.prep-card {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%; min-height: 88px; text-align: start;
  padding: var(--sp-4); background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); font: inherit;
  border-inline-start: 6px solid var(--line);
}
.prep-card.st-free { border-inline-start-color: var(--accent); }
.prep-card.st-mine, .prep-card.st-paused { border-inline-start-color: var(--warn); }
.prep-card.st-done { border-inline-start-color: var(--ok); opacity: .75; }
.prep-card.st-taken, .prep-card.st-waiting { opacity: .7; }
.prep-card.late { border-inline-start-color: var(--crit); }
.prep-card-img {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: var(--r-s); object-fit: cover; background: var(--dt-bg, var(--bg2));
  display: inline-flex; align-items: center; justify-content: center; color: var(--dt, var(--muted));
}
.prep-card-body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1 1 auto; }
.prep-card-top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.prep-card-top > .pill { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.prep-card-code { font-size: var(--fs-l); }
.prep-card-when { color: var(--muted); font-size: var(--fs-m); margin: 0; }

.prep-card-at { color: var(--ink); font-size: var(--fs-l); font-weight: var(--fw-semi); margin: 0; overflow-wrap: anywhere; }
.prep-card-title { color: var(--ink); overflow-wrap: anywhere; }
.prep-card-state { display: flex; gap: var(--sp-2); flex-wrap: wrap; }


.prep-q {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); background: var(--warn-soft); border: 1px solid var(--warn);
}
.prep-q.bad { background: var(--crit-soft); border-color: var(--crit-line); }
.prep-q-line { display: flex; flex-direction: column; gap: var(--sp-1); }
.prep-q-fail { display: flex; flex-direction: column; gap: var(--sp-2); }


.prep-job-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.prep-h1 { margin: 0; font-size: var(--fs-xl); }
.prep-job-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r); background: var(--bg2); }
.prep-site { display: flex; flex-direction: column; margin: 0; }
.prep-timer { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0; }
.prep-timer strong { font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; }
.prep-timer.running strong { color: var(--accent); }
.prep-why { margin: 0; }

.prep-big {
  width: 100%; min-height: 60px; padding: var(--sp-4) var(--sp-6); font-size: var(--fs-l);
  font-weight: var(--fw-semi); border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
}
.prep-big.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.prep-big:disabled { opacity: .5; }
.prep-act-wrap, .prep-done { display: flex; flex-direction: column; gap: var(--sp-2); }
.prep-done-banner { background: var(--ok-soft); }

.prep-items { display: flex; flex-direction: column; gap: var(--sp-3); }
.prep-item {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
}
.prep-item.on { border-color: var(--ok); }
.prep-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.prep-item-title { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; font-size: var(--fs-l); }


.prep-tick {
  flex: 0 0 auto; min-width: 124px; min-height: 60px; border-radius: var(--r); font-size: var(--fs-l);
  font-weight: var(--fw-semi); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border: 2px solid var(--accent); background: var(--card); color: var(--accent);
}
.prep-tick.on { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.prep-tick.wait { border-style: dashed; }
.prep-tick-static {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--ok); color: var(--on-accent); font-size: var(--fs-l); font-weight: var(--fw-semi);
}
.prep-photo-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.prep-cam { min-height: 56px; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-m); font-weight: var(--fw-semi); }
.prep-cam.need { border-color: var(--warn); color: var(--warn); }
.prep-thumbs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.prep-thumb {
  position: relative; width: 56px; height: 56px; padding: 0; border-radius: var(--r-s); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg2); display: inline-block;
}
.prep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prep-thumb.pending img { opacity: .55; }
.prep-thumb-wait { position: absolute; inset-block-end: 2px; inset-inline-end: 2px; font-size: var(--fs-s); }
.prep-ref { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.prep-ref img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-s); opacity: .5; }
.prep-sensor { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-m); }
.prep-extras { margin: 0; padding-inline-start: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.prep-miss { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.prep-miss .prep-miss-item { min-height: 48px; text-align: start; padding-inline: 0; }
.prep-damage { margin-block-start: var(--sp-3); }
.prep-overlay { max-width: none; }




.prep-refresh { padding-inline: var(--sp-4); }
.prep-refresh svg, .prep-big svg { flex: none; }
.prep-back { flex: 0 0 48px; width: 48px; height: 48px; }
.prep-job-top { flex-wrap: wrap; gap: var(--sp-3); }
.prep-job-top .prep-h1 { min-width: 0; overflow-wrap: anywhere; }
.prep-h2-done { font-size: var(--fs-s); font-weight: var(--fw-semi); color: var(--muted); letter-spacing: .04em; }
.prep-list-done .prep-card { min-height: 64px; padding-block: var(--sp-3); box-shadow: none; }
.prep-list-done .prep-card-img { flex-basis: 48px; width: 48px; height: 48px; }
.prep-list-done .prep-card-img svg { width: 26px; height: 26px; }




.prep-card-time { white-space: nowrap; align-self: center; }
.prep-note {
  display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); background: var(--warn-soft); border: 1px solid var(--warn); overflow-wrap: anywhere;
}
.prep-paused-banner { background: var(--warn-soft); margin: 0; }
.prep-item-foot { display: flex; gap: var(--sp-3); }
.prep-item-foot > button { flex: 1 1 0; min-width: 0; min-height: 56px; }
.prep-item-foot .prep-tick { min-width: 0; }
.prep-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bg); border-top: 1px solid var(--line);
}

@media (max-width: 899px) {
  .prep-bar { bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--sp-3); }
}
.prep-bar-row { display: flex; gap: var(--sp-3); align-items: stretch; }
.prep-bar-2nd { flex: 0 0 auto; min-height: 60px; padding-inline: var(--sp-5); font-size: var(--fs-m); font-weight: var(--fw-semi); }
.prep-bar-main { flex: 1 1 auto; width: auto; min-width: 0; }
.prep-big.is-off { opacity: .5; }
.prep-bar-why { text-align: center; }
.prep-sheet { display: flex; flex-direction: column; gap: var(--sp-3); }
.prep-claim-note { margin: 0; font-size: var(--fs-l); }
.prep-claim-taken, .prep-sheet-warn {
  margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: var(--warn-soft);
  border: 1px solid var(--warn); font-size: var(--fs-m);
}
.prep-sum { display: flex; flex-direction: column; gap: var(--sp-2); }
.prep-sum-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-l);
}
.prep-sum-row.ok strong { color: var(--ok); }
.prep-sum-low { display: flex; flex-direction: column; gap: var(--sp-2); }



.prep-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; min-width: 0; }
.prep-chips::-webkit-scrollbar { display: none; }
.prep-chips .chip { flex: 0 0 auto; min-block-size: 44px; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding-inline: var(--sp-5); white-space: nowrap; }
.prep-chip-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.active .prep-chip-n { color: var(--ink); }
.prep-day { display: flex; align-items: center; gap: var(--sp-3); }
.prep-done-box { display: flex; flex-direction: column; gap: var(--sp-3); }
.prep-done-box > summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-3); margin: 0; }
.prep-done-box > summary::-webkit-details-marker { display: none; }
.prep-done-box > summary::after { content: ''; flex: none; width: 8px; height: 8px; border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor; transform: rotate(45deg); margin-inline-end: var(--sp-2); }
.prep-done-box[open] > summary::after { transform: rotate(-135deg); }



.pi-sec { display: flex; flex-direction: column; gap: var(--sp-3); }
.pi-h2 { font-size: var(--fs-l); font-weight: var(--fw-bold); margin: var(--sp-2) 0 0; display: flex; align-items: center; gap: var(--sp-2); }
.pi-banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r);
  background: var(--accent-soft); color: var(--ink); }
.pi-banner-ico { font-size: var(--fs-xl); line-height: 1; }
.pi-banner-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-l); }
.pi-banner-t .muted { font-size: var(--fs-m); }
.pi-prog { display: flex; flex-direction: column; gap: var(--sp-2); }
.pi-prog-t { color: var(--muted); font-size: var(--fs-m); }
.pi-prog-bar { display: block; height: 12px; border-radius: var(--r-pill); background: var(--bg2); overflow: hidden; }
.pi-prog-fill { display: block; height: 100%; background: var(--ok); border-radius: var(--r-pill); }

.pi-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 720px) { .pi-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pi-g { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--sp-2);
  min-height: 132px; padding: var(--sp-4); text-align: start; font: inherit; color: var(--ink); background: var(--card);
  border: 2px solid var(--line); border-radius: var(--r); box-shadow: none; }
.pi-g-ico { font-size: 40px; line-height: 1; }
.pi-g-name { font-size: var(--fs-l); font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.pi-g-st { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-m); color: var(--muted); }
.pi-g.st-done { border-color: var(--ok); background: var(--ok-soft); }
.pi-g.st-done .pi-g-st { color: var(--ok); font-weight: var(--fw-semi); }
.pi-g.st-attention { border-color: var(--warn); background: var(--warn-soft); }
.pi-g.st-attention .pi-g-st { color: var(--warn); font-weight: var(--fw-semi); }
.pi-g.is-now { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pi-g.is-now .pi-g-st { color: var(--accent); font-weight: var(--fw-semi); }


.pi-head .prep-job-top { flex-wrap: nowrap; align-items: center; }
.pi-head-t { display: flex; flex-direction: column; min-width: 0; }
.pi-head-sub { font-size: var(--fs-m); }
.pi-gh { display: flex; align-items: center; gap: var(--sp-3); margin: 0; font-size: var(--fs-xl); }
.pi-gh-ico { font-size: 32px; line-height: 1; }
.pi-lines { display: flex; flex-direction: column; gap: var(--sp-3); }
.pi-row { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--card);
  border: 2px solid var(--line); border-radius: var(--r); }
.pi-row.t-attn { border-color: var(--warn); background: var(--warn-soft); }
.pi-row.t-absent { background: transparent; border-style: dashed; color: var(--muted); }
.pi-top { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; }
.pi-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pi-title { font-size: var(--fs-l); font-weight: var(--fw-med); overflow-wrap: anywhere; }
.pi-sub { font-size: var(--fs-s); color: var(--muted); overflow-wrap: anywhere; }
.pi-sub.warn { color: var(--warn); font-weight: var(--fw-semi); }
.pi-sub.ok { color: var(--ok); }
.pi-ctl { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.pi-more { flex: 0 0 44px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); }
.pi-tick { flex: 0 0 56px; width: 56px; height: 56px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--card); color: var(--muted); border: 2px solid var(--line); }
.pi-tick.on { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.pi-tick.static { pointer-events: none; }
.pi-n { flex: 0 0 auto; min-width: 56px; height: 56px; padding: 0 var(--sp-3); border-radius: var(--r); background: var(--bg2);
  border: 0; color: var(--ink); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.pi-stepper { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pi-step { flex: 0 0 56px; width: 56px; height: 56px; padding: 0; border-radius: var(--r); background: var(--card);
  color: var(--warn); border: 2px solid var(--warn); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
.pi-q { min-width: 3.2rem; text-align: center; font-size: var(--fs-2xl); color: var(--ink); }
.pi-q.low { color: var(--warn); }
.pi-q strong { font-weight: var(--fw-bold); }
.pi-of { font-size: var(--fs-m); color: var(--muted); }
.pi-miss, .pi-undo, .pi-fetched { min-height: 56px; padding: 0 var(--sp-4); border-radius: var(--r); background: var(--card);
  border: 2px solid var(--line); color: var(--ink); font-size: var(--fs-m); font-weight: var(--fw-semi); }
.pi-miss.on { border-color: var(--crit); color: var(--crit); background: var(--crit-soft); }
.pi-fetched { border-color: var(--accent); color: var(--accent); }
.pi-seg { display: grid; gap: var(--sp-2); }
.pi-seg.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pi-seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pi-opt { min-height: 56px; padding: 0 var(--sp-2); border-radius: var(--r); background: var(--card); color: var(--ink);
  border: 2px solid var(--line); font-size: var(--fs-l); font-weight: var(--fw-semi); display: inline-flex; align-items: center;
  justify-content: center; gap: var(--sp-2); overflow-wrap: anywhere; }
.pi-opt.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pi-opt.on.good { background: var(--ok); border-color: var(--ok); }
.pi-opt.on.warn { background: var(--warn); border-color: var(--warn); color: var(--on-warn); }
.pi-numrow { display: flex; align-items: center; gap: var(--sp-3); }
.pi-num { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 var(--sp-4); border-radius: var(--r); border: 2px solid var(--accent);
  background: var(--card); color: var(--ink); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.pi-allok { margin-block-start: var(--sp-2); background: var(--ok); border-color: var(--ok); }
.pi-fetch { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r);
  background: var(--warn-soft); border: 2px solid var(--warn); }
.pi-fetch-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.pi-fetch-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; }
.pi-fetch-q { font-size: var(--fs-l); font-weight: var(--fw-bold); }
.pi-fetch-all { background: var(--ok); border-color: var(--ok); }
.pi-simple-fetch { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r);
  background: var(--warn-soft); border: 2px solid var(--warn); }
.pi-fetch-v { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.pi-fetch-plate { font-size: var(--fs-xl); }
.pi-fetch-ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-l); }


[data-day="simple"] .prep-card { border: 2px solid var(--line); border-inline-start-width: 2px; min-height: 104px; }
[data-day="simple"] .prep-card.st-free { border-color: var(--accent); }
[data-day="simple"] .prep-card.st-mine, [data-day="simple"] .prep-card.st-paused { border-color: var(--warn); background: var(--warn-soft); }
[data-day="simple"] .prep-card.st-done { border-color: var(--ok); background: var(--ok-soft); opacity: 1; }
[data-day="simple"] .prep-card.late { border-color: var(--crit); }
[data-day="simple"] .prep-card-img { flex-basis: 80px; width: 80px; height: 80px; border-radius: var(--r); }
[data-day="simple"] .prep-card-img svg { width: 44px; height: 44px; }
[data-day="simple"] .prep-card .prep-h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }


.pi-step { color: var(--ink); border-color: var(--line); }
.pi-row.t-attn .pi-step { color: var(--warn); border-color: var(--warn); }
.pi-chip { min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r); background: var(--card); border: 2px solid var(--line);
  color: var(--ink); font-size: var(--fs-m); font-weight: var(--fw-semi); }


.pi-below-brk { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pi-below-brk .pi-broken, .pi-below-brk .pi-broken-set { margin-inline-start: auto; }
.pi-broken { flex: 0 0 56px; width: 56px; height: 56px; padding: 0; border-radius: var(--r); background: var(--card); color: var(--muted);
  border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.pi-broken-set { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pi-broken-n { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 3.6rem; justify-content: center; color: var(--crit); font-size: var(--fs-xl); }
.pi-broken-n strong { font-weight: var(--fw-bold); }


.pi-ico { flex: 0 0 44px; width: 44px; text-align: center; font-size: 36px; line-height: 1; }
.pi-row { padding-inline: var(--sp-3); }
.pi-top { gap: var(--sp-2); }
.pi-top .pi-ctl { gap: var(--sp-1); }
.pi-top .pi-step { flex-basis: 48px; width: 48px; height: 48px; }
.pi-top .pi-q { min-width: 2.6rem; }
.pi-top .pi-tick { flex-basis: 52px; width: 52px; height: 52px; }
.pi-top .pi-broken { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border-width: 1px; background: transparent; margin-inline-start: var(--sp-1); }
.pi-top .pi-broken::after { content: ""; position: absolute; inset: -7px; }

.pi-chip.on { border-color: var(--accent); background: var(--accent-soft); }