/**
 * SCR-PROD-04 — Karigar Work Slip Screen (Doc 7 §6.3).
 *
 * Workshop-tablet ergonomics (Doc 7 §16, 1280×800 landscape):
 * high-contrast card grid with 64px tap targets on the quantity
 * stepper; a bottom-fixed CTA bar on smartphones keeps
 * "Record Progress" in the thumb zone (same contract as the
 * delivery bar). All colors resolve from css/design-tokens.css —
 * zero raw hex.
 */

/* ----------------------------------------------------------------- page */
.wslp {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

.wslp__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.wslp__titles {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.wslp__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
}
.wslp__ctx {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--chalk-muted);
  font-variant-numeric: tabular-nums;
}
.wslp__toolbar .sample-chip {
  margin-left: auto;
}

/* ------------------------------------- privacy projection banner
 * Doc 1 v_karigar_work_slip_projection: billing fields excluded. */
.wslp-privacy {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  color: var(--chalk-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* ----------------------------------------------------------------- body */
.wslp__body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-4);
  align-items: start;
}
.wslp-main,
.wslp-side {
  display: grid;
  gap: var(--space-4);
}
.wslp-side {
  position: sticky;
  top: calc(var(--touch-min) + var(--space-3) + var(--space-3) + var(--space-4));
  align-content: start;
}

/* ---------------------------------------------------------------- cards */
.wslp-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  align-content: start;
}
.wslp-card__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.wslp-card__sub {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk-muted);
}

/* ---------------------------------------------------------------- facts */
.wslp-facts {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.wslp-facts__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.wslp-facts__k {
  font-size: var(--text-sm);
  color: var(--chalk-muted);
}
.wslp-facts__v {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.wslp-notes {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--chalk-muted);
}

/* ------------------------------------------------- work completed log */
.wslp-log {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wslp-log li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: var(--text-sm);
}
.wslp-log li:last-child {
  border-bottom: none;
}
.wslp-log__mark {
  color: var(--status-success);
}
.wslp-log__at {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--chalk-muted);
  white-space: nowrap;
}

/* --------------------------------------------------- progress stepper
 * 64px tap targets — Doc 7 §16 workshop-tablet ergonomics. */
.wslp-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.wslp-step {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  color: var(--chalk-white);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}
.wslp-step:hover:not(:disabled) {
  border-color: var(--brand-brass);
  color: var(--brand-brass-ink);
}
.wslp-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wslp-stepper__val {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 120px;
}
.wslp-stepper__val [data-region="stepval"] {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.wslp-stepper__of {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chalk-muted);
}
.wslp-bounds {
  margin: 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--chalk-muted);
}

/* ------------------------------------------------------- status / note */
.wslp-status {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.wslp-status--ok {
  color: var(--status-success);
}
.wslp-status--err {
  color: var(--status-danger);
}
.wslp-note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--chalk-muted);
}

/* ------------------------------------------------- offline staging queue */
.wslp-queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.wslp-queue-empty {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--chalk-muted);
}
.wslp-qitem {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  font-size: var(--text-sm);
}
.wslp-qitem__delta {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.wslp-qitem__total {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--chalk-muted);
}
.wslp-qitem__at {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--chalk-muted);
}
.wslp-qitem__key {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--chalk-muted);
}
.wslp-qitem .tag {
  grid-column: 1 / -1;
  justify-self: start;
}

/* ---------------------------------------------------------- responsive
 * @560 deliberately precedes @720: on a smartphone both match, and
 * the later @720 padding-bottom (mobile-bar clearance) must win. */
@media (max-width: 900px) {
  .wslp__body {
    grid-template-columns: 1fr;
  }
  .wslp-side {
    position: static;
  }
}

/* Compact gutters (smartphone). */
@media (max-width: 560px) {
  .wslp {
    padding: var(--space-4);
  }
}

/* -------------------------------------------------- mobile CTA bar
 * Doc 7 §16 smartphone ergonomics: the primary action stays in the
 * thumb zone. Hidden by default; activated below 720px (same
 * contract as the delivery CTA bar). */
.wslp-mobilebar {
  display: none;
}

@media (max-width: 720px) {
  .wslp {
    padding-bottom: calc(
      var(--space-6) + var(--touch-min) + var(--space-3) * 2 + var(--space-4)
      + env(safe-area-inset-bottom, 0px)
    );
  }
  .wslp-mobilebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4)
      calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface-card);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 calc(-1 * var(--space-1)) var(--space-3)
      color-mix(in oklab, var(--chalk-white) 14%, transparent);
  }
  .wslp-mobilebar__cap {
    margin: 0;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }
  .wslp-mobilebar .btn {
    flex-shrink: 0;
  }
  /* Lift the floating theme switch above the fixed CTA bar. */
  .theme-toggle {
    bottom: calc(var(--touch-min) + var(--space-3) * 2 + var(--space-4)
      + env(safe-area-inset-bottom, 0px));
  }
}