/* Customer cart panel — a quiet receipt in the reading order. */
[data-view='alice'] [data-cart-panel] {
  display: block;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font:
    1rem/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}

[data-view='alice'] [data-cart-panel][hidden] {
  display: none;
}

[data-view='alice'] [data-fulfillment-mode] {
  margin-block: 4px;
  font-weight: 600;
}

[data-view='alice'] [data-fulfillment-note] {
  margin-block: 4px 16px;
  color: var(--app-muted);
}

/* Boundary quantity controls stay focusable, but cannot change quantity. */
[data-view='alice'] [data-cart-quantity] button[aria-disabled='true'] {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
  cursor: default;
}

[data-view='alice'] [data-cart-count] {
  padding-block: 0;
  padding-inline: 8px;
  border-radius: 4px;
  background: var(--app-selected);
  color: var(--app-accent);
  font-variant-numeric: tabular-nums;
}

[data-view='alice'] [data-cart-row] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--app-edge);
  font-variant-numeric: tabular-nums;
}

[data-view='alice'] [data-cart-row][hidden] {
  display: none;
}

[data-view='alice'] [data-cart-row] p {
  min-width: 0;
  margin: 0;
  flex: 1 1 20ch;
}

[data-view='alice'] [data-cart-quantity] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

[data-view='alice'] [data-cart-quantity][hidden] {
  display: none;
}

[data-view='alice'] [data-cart-quantity] button {
  min-width: 44px;
}

[data-view='alice'] [data-cart-total] {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[data-view='alice'] [data-checkout-fields] {
  display: flex;
  flex-direction: column;
}

[data-view='alice'] [data-checkout-fields][hidden] {
  display: none;
}

[data-view='alice'] [data-action='close-cart'] {
  align-self: flex-start;
  margin-top: 16px;
  border-color: var(--app-edge);
  color: var(--app-muted);
}

[data-view='alice'] [data-cart-status] {
  margin-top: 16px;
  color: var(--app-muted);
}

[data-view='alice'] [data-cart-status]:empty {
  margin: 0 0 16px;
}

[data-view='alice'] [data-journey-container] {
  max-width: 1120px;
  margin: 24px auto;
  padding: 24px 16px;
}

[data-view='alice'] [data-checkout-form][hidden],
[data-view='alice'] [data-cart-items] > p[hidden],
[data-view='alice'] [data-tracking-timeline][hidden] {
  display: none;
}

[data-view='alice'] [data-tracking-confirm] {
  border-color: var(--app-error);
  color: var(--app-error);
}

[data-view='alice'] [data-tracking-return] {
  border-color: var(--app-edge);
  color: var(--app-muted);
}

/* Cart checkout controls — ask only what the chosen handover needs. */
[data-view='alice'] [data-checkout-form] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

[data-view='alice'] [data-fulfillment] {
  width: 100%;
  margin-bottom: 24px;
}

[data-view='alice'] [data-delivery-fields] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 24px;
  margin-bottom: 8px;
}

[data-view='alice'] [data-delivery-fields][hidden] {
  display: none;
}

[data-view='alice'] [data-checkout-field] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 16px;
}

[data-view='alice'] [data-checkout-field][hidden] {
  display: none;
}

[data-view='alice'] [data-checkout-field] > label {
  margin: 0 0 8px;
}

[data-view='alice'] [data-checkout-error] {
  margin: 8px 0 0;
  color: var(--app-error);
}

[data-view='alice'] [data-checkout-status] {
  margin: 0 0 16px;
  color: var(--app-muted);
}

[data-view='alice'] [data-checkout-status]:empty {
  margin: 0;
}

[data-view='alice'] [data-checkout-status][data-error='true'] {
  color: var(--app-error);
}

[data-view='alice'] [data-checkout-form] button[type='submit'] {
  width: 100%;
}

/* Confirm creates the order; closing the cart stays quiet. */
[data-view='alice'] [data-checkout-form] button[type='submit']:not(:disabled) {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='alice'] [data-checkout-form] button[type='submit']:hover:not(:disabled) {
  background: var(--app-hover);
}

@media (min-width: 960px) {
  [data-view='alice'] [data-journey-container] {
    padding: 32px;
  }

  [data-view='alice'] [data-fulfillment] {
    max-width: 35ch;
  }

  [data-view='alice'] [data-checkout-form] button[type='submit'] {
    align-self: flex-start;
    width: auto;
  }

  /* Each field keeps its label, input and error together. */
  [data-view='alice'] [data-delivery-fields] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Customer tracking — a receipt of reached milestones, not a progress percentage. */
[data-view='alice'] [data-tracking] {
  color: var(--app-ink);
  font:
    1rem/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}

[data-view='alice'] [data-tracking] > p {
  color: var(--app-muted);
}

[data-view='alice'] [data-tracking] > p[data-error='true'] {
  color: var(--app-error);
}

[data-view='alice'] [data-tracking] > [data-tracking-summary] {
  color: var(--app-ink);
}

[data-view='alice'] [data-tracking-timeline] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

[data-view='alice'] [data-tracking-timeline] > li {
  padding: 8px 16px;
  border-left: 1px solid var(--app-edge);
}

[data-view='alice'] [data-tracking-timeline] > li[data-completed='true'] {
  border-left-color: var(--app-accent);
  color: var(--app-ink);
}

[data-view='alice'] [data-tracking-timeline] > li[data-completed='false'] {
  color: var(--app-muted);
}

/* Only real timestamps and estimates are styled; no generated time or empty slot. */
[data-view='alice'] [data-tracking-timeline] time,
[data-view='alice'] [data-tracking-timeline] span {
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
}

[data-view='alice'] [data-tracking-cancel],
[data-view='alice'] [data-tracking-refresh] {
  width: 100%;
  margin-bottom: 8px;
}

[data-view='alice'] [data-tracking-cancel] {
  border-color: var(--app-error);
  color: var(--app-error);
}

[data-view='alice'] [data-tracking-cancel]:hover:not(:disabled) {
  background: var(--app-field);
}

@media (min-width: 960px) {
  [data-view='alice'] [data-tracking-cancel],
  [data-view='alice'] [data-tracking-refresh] {
    width: auto;
  }

  [data-view='alice'] [data-tracking-cancel] {
    margin-right: 8px;
  }
}