[data-view='bob'] {
  margin: 24px 0;
  padding: 24px 0;
}

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

[data-view='bob'] #operator-title {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: 0 16px;
  font-family: var(--app-font);
  color: var(--app-ink);
  margin: 0 auto 16px;
  font-size: 1.5rem;
  line-height: 1.25;
}

[data-view='bob'] [data-merchant-group] {
  margin-top: 24px;
  font-family: var(--app-font);
  color: var(--app-ink);
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-merchant-group] h2#pedidos-title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  line-height: 1.5;
}

[data-view='bob'] [data-merchant-group] summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 16px;
  border-top: 1px solid var(--app-edge);
  font-weight: 600;
  cursor: pointer;
}

[data-view='bob'] [data-merchant-group] summary:hover {
  background: var(--app-selected);
}

[data-view='bob'] [data-merchant-board],
[data-view='bob'] [data-board-refresh] {
  font-family: var(--app-font);
  color: var(--app-ink);
  line-height: 1.5;
}

[data-view='bob'] [data-merchant-board],
[data-view='bob'] [data-merchant-board] * {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-merchant-board] {
  margin-top: 16px;
  padding: 16px;
  background: var(--app-field);
}

[data-view='bob'] [data-board-lane] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-block-size: 0;
}

[data-view='bob'] [data-board-lane][hidden] {
  display: none;
}

[data-view='bob'] [data-board-cards] {
  min-block-size: 0;
  max-block-size: min(36rem, 60dvh);
  overflow-y: auto;
}

[data-view='bob'] [data-board-filter] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

[data-view='bob'] [data-board-filter][hidden] {
  display: none;
}

[data-view='bob'] [data-board-filter-target] {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--app-accent);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-accent);
  font: inherit;
  cursor: pointer;
}

[data-view='bob'] [data-board-filter] button:hover {
  background: var(--app-selected);
}

[data-view='bob'] [data-board-filter-target][aria-current='page'] {
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-board-filter-target][aria-current='page']:hover {
  background: var(--app-hover);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-board-filter] {
    display: none;
  }
}

@media (max-width: 959.98px) {
  /* Filter only active lanes at mobile widths; terminal lanes retain their own disclosure. */
  [data-view='bob']
    [data-merchant-board][data-board-filtered='CREATED']
    [data-board-lane]:not([data-board-lane='CREATED']):not([data-board-lane='COMPLETED']):not(
      [data-board-lane='CANCELLED']
    ),
  [data-view='bob']
    [data-merchant-board][data-board-filtered='ACCEPTED']
    [data-board-lane]:not([data-board-lane='ACCEPTED']):not([data-board-lane='COMPLETED']):not(
      [data-board-lane='CANCELLED']
    ),
  [data-view='bob']
    [data-merchant-board][data-board-filtered='PREPARING']
    [data-board-lane]:not([data-board-lane='PREPARING']):not([data-board-lane='COMPLETED']):not(
      [data-board-lane='CANCELLED']
    ),
  [data-view='bob']
    [data-merchant-board][data-board-filtered='READY']
    [data-board-lane]:not([data-board-lane='READY']):not([data-board-lane='COMPLETED']):not(
      [data-board-lane='CANCELLED']
    ) {
    display: none;
  }

  [data-view='bob']
    [data-merchant-board][data-board-filtered='CREATED']
    [data-board-lane]:not([data-board-lane='CREATED']):not([data-board-lane='COMPLETED']):not(
      [data-board-lane='CANCELLED']
    )[hidden],
  [data-view='bob']
    [data-merchant-board][data-board-filtered='ACCEPTED']
    [data-board-lane]:not([data-board-lane='ACCEPTED']):not([data-board-lane='COMPLETED']):not(
      [data-board-lane='CANCELLED']
    )[hidden],
  [data-view='bob']
    [data-merchant-board][data-board-filtered='PREPARING']
    [data-board-lane]:not([data-board-lane='PREPARING']):not([data-board-lane='COMPLETED']):not(
      [data-board-lane='CANCELLED']
    )[hidden],
  [data-view='bob']
    [data-merchant-board][data-board-filtered='READY']
    [data-board-lane]:not([data-board-lane='READY']):not([data-board-lane='COMPLETED']):not(
      [data-board-lane='CANCELLED']
    )[hidden] {
    display: none;
  }
}

[data-view='bob'] [data-board-lanes] {
  display: grid;
  gap: 24px;
}

[data-view='bob'] [data-board-lanes][hidden] {
  display: none;
}

[data-view='bob'] [data-board-terminal-toggle] {
  min-height: 44px;
  max-width: 100%;
  margin-top: 24px;
  padding: 8px 12px;
  border: 1px solid var(--app-accent);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-accent);
  font: inherit;
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}

[data-view='bob'] [data-board-terminal-toggle]:hover {
  background: var(--app-selected);
}

[data-view='bob'] [data-board-terminal] {
  margin-top: 16px;
}

[data-view='bob'] [data-board-lane] h3 {
  margin: 0 0 16px;
  padding-top: 8px;
  border-top: 1px solid var(--app-accent);
  font-size: 1rem;
  line-height: 1.4;
}

[data-view='bob'] [data-board-count] {
  color: var(--app-muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

[data-view='bob'] [data-board-order-id] {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
}

[data-view='bob'] [data-board-order-id] h4 {
  margin: 0 0 8px;
  color: var(--app-ink);
  font-size: 1rem;
  font-weight: 600;
}

[data-view='bob'] [data-board-more],
[data-view='bob'] [data-board-order-id] [data-board-reference] {
  color: var(--app-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

[data-view='bob'] [data-board-order-id] [data-board-reference] {
  margin-top: 16px;
  white-space: normal;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-board-order-id] p {
  margin: 0 0 8px;
}

[data-view='bob'] [data-board-handover],
[data-view='bob'] [data-board-order-id] time {
  color: var(--app-muted);
  font-size: 0.875rem;
}

[data-view='bob'] [data-board-items] {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

[data-view='bob'] [data-board-items] li + li {
  margin-top: 8px;
}

[data-view='bob'] [data-board-total],
[data-view='bob'] [data-board-order-id] time {
  font-variant-numeric: tabular-nums;
}

[data-view='bob'] [data-board-total] {
  font-weight: 600;
}

[data-view='bob'] [data-board-actions] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

[data-view='bob'] [data-board-actions][hidden] {
  display: none;
}

[data-view='bob'] [data-merchant-board] [data-transition],
[data-view='bob'] [data-board-refresh] {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--app-accent);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-accent);
  font: inherit;
  font-family: var(--app-font);
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

[data-view='bob'] [data-merchant-board] [data-removal-confirmation] {
  margin-top: 16px;
}

[data-view='bob'] [data-merchant-board] [data-removal-confirmation] button {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  background: var(--app-paper);
  font: inherit;
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}

[data-view='bob']
  [data-merchant-board]
  [data-removal-confirmation]
  button:not([data-removal-confirm]) {
  border-color: var(--app-edge);
  color: var(--app-ink);
}

[data-view='bob'] [data-merchant-board] [data-next-status='CANCELLED'] {
  border-color: var(--app-error);
  color: var(--app-error);
}

[data-view='bob'] [data-merchant-board] [data-removal-confirmation] button:hover:not(:disabled) {
  background: var(--app-field);
}

[data-view='bob'] [data-merchant-board] [data-transition]:not([data-next-status='CANCELLED']) {
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-merchant-board] [data-transition]:hover:not(:disabled),
[data-view='bob'] [data-board-refresh]:hover:not(:disabled) {
  background: var(--app-selected);
}

[data-view='bob']
  [data-merchant-board]
  [data-transition]:not([data-next-status='CANCELLED']):hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-merchant-board] [data-transition]:disabled,
[data-view='bob'] [data-merchant-board] [data-removal-confirmation] button:disabled,
[data-view='bob'] [data-board-refresh]:disabled {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
  cursor: wait;
}

[data-view='bob'] [data-merchant-board] :focus-visible,
[data-view='bob'] [data-board-refresh]:focus-visible,
[data-view='bob'] [data-merchant-group] summary:focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 3px;
}

[data-view='bob'] [data-merchant-board] ::selection {
  background: var(--app-accent);
  color: var(--app-paper);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-board-lanes] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 960px) {
  [data-view='bob'] [data-board-terminal] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

[data-view='bob'] [data-category-manager] {
  margin-top: 24px;
  padding: 16px;
  background: var(--app-field);
  color: var(--app-ink);
  font-family: var(--app-font);
  line-height: 1.5;
}

[data-view='bob'] [data-category-manager],
[data-view='bob'] [data-category-manager] * {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-category-manager] h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  line-height: 1.25;
}

[data-view='bob'] [data-category-create],
[data-view='bob'] [data-category-id],
[data-view='bob'] [data-category-manager] label {
  display: grid;
  gap: 8px;
}

[data-view='bob'] [data-category-create][hidden],
[data-view='bob'] [data-category-id][hidden],
[data-view='bob'] [data-category-manager] label[hidden] {
  display: none;
}

[data-view='bob'] [data-category-create] {
  /* Generous editor measure keeps names readable even in a full-width workspace. */
  width: min(100%, 70ch);
  margin-bottom: 16px;
}

[data-view='bob'] [data-category-heading] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

[data-view='bob'] [data-category-heading][hidden] {
  display: none;
}

[data-view='bob'] [data-category-heading] h2 {
  margin: 0;
}

[data-view='bob'] [data-category-create-control] {
  position: relative;
}

[data-view='bob'] [data-category-tooltip] {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: 20ch;
  padding: 8px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  visibility: hidden;
}

[data-view='bob'] [data-category-create-control]:hover [data-category-tooltip],
[data-view='bob'] [data-category-create-control]:focus-within [data-category-tooltip] {
  visibility: visible;
}

[data-view='bob'] [data-category-edit] {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  grid-column: 1 / -1;
  /* Match the generous creation measure, not the viewport-wide category row. */
  width: min(100%, 70ch);
}

[data-view='bob'] [data-category-edit][hidden] {
  display: none;
}

[data-view='bob'] [data-category-edit] label {
  flex: 1 1 28ch;
}

[data-view='bob'] [data-category-title] {
  font-weight: 600;
}

[data-view='bob'] [data-category-id] > [data-removal-confirmation] {
  grid-column: 1 / -1;
}

[data-view='bob'] [data-category-manager] label {
  font-weight: 600;
}

[data-view='bob'] [data-categories] {
  display: grid;
  /* One readable 70ch content track keeps names beside actions; the workspace stays full width. */
  grid-template-columns: minmax(0, 70ch);
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-view='bob'] [data-categories][hidden] {
  display: none;
}

[data-view='bob'] [data-category-manager] [data-category-busy] {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--app-muted);
}

[data-view='bob'] [data-category-id] {
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
}

[data-view='bob'] [data-category-id]:focus-within {
  border-color: var(--app-accent);
  background: var(--app-selected);
}

[data-view='bob'] [data-removal-confirmation] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-removal-confirmation][hidden] {
  display: none;
}

[data-view='bob'] [data-removal-confirmation] p {
  flex-basis: 100%;
  margin: 0;
}

[data-view='bob'] [data-removal-confirmation] [data-removal-confirm] {
  border-color: var(--app-error);
  color: var(--app-error);
}

[data-view='bob'] [data-category-actions] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: end;
  align-items: center;
}

[data-view='bob'] [data-category-actions][hidden] {
  display: none;
}

[data-view='bob'] [data-category-manager] input,
[data-view='bob'] [data-category-manager] button {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font: inherit;
}

[data-view='bob'] [data-category-manager] input {
  width: 100%;
  caret-color: var(--app-accent);
}

[data-view='bob'] [data-category-manager] button {
  font-weight: 600;
  cursor: pointer;
}

[data-view='bob'] [data-category-manager] [data-category-create-toggle] {
  min-width: 44px;
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
  font-size: 1.5rem;
}

[data-view='bob'] [data-category-manager] [data-category-create-toggle]:hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-category-manager] [data-action='create'] {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-category-manager] [data-action='remove'] {
  border-color: var(--app-error);
  color: var(--app-error);
}

[data-view='bob'] [data-category-manager] button:hover:not(:disabled) {
  background: var(--app-field);
}

[data-view='bob'] [data-category-manager] [data-action='create']:hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-category-manager] button:disabled {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
  cursor: default;
}

[data-view='bob'] [data-category-manager] :focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 3px;
}

[data-view='bob'] [data-category-manager] ::selection {
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-category-manager] p {
  margin: 16px 0 0;
  max-width: 70ch;
  color: var(--app-muted);
}

[data-view='bob'] [data-category-manager] [data-error]:not([data-error='none']) {
  color: var(--app-error);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-category-create] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  [data-view='bob'] [data-category-id] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
  }
}

[data-view='bob'] [data-product-editor] {
  /* One 70ch content column plus its inset bounds the editor, not the full-width workspace. */
  width: min(100%, calc(70ch + 32px));
  margin-top: 24px;
  padding: 16px;
  background: var(--app-field);
  color: var(--app-ink);
  font-family: var(--app-font);
  line-height: 1.5;
}

[data-view='bob'] [data-product-editor],
[data-view='bob'] [data-product-editor] * {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-product-selection],
[data-view='bob'] [data-product-bench],
[data-view='bob'] [data-product-identity],
[data-view='bob'] [data-product-selection] label,
[data-view='bob'] [data-product-identity] label {
  display: grid;
  gap: 8px;
}

[data-view='bob'] [data-product-selection][hidden],
[data-view='bob'] [data-product-bench][hidden],
[data-view='bob'] [data-product-identity][hidden],
[data-view='bob'] [data-product-selection] label[hidden],
[data-view='bob'] [data-product-identity] label[hidden] {
  display: none;
}

[data-view='bob'] [data-product-selection] {
  margin-bottom: 24px;
}

[data-view='bob'] [data-product-bench] {
  gap: 24px;
}

[data-view='bob'] [data-product-identity] {
  gap: 16px;
}

[data-view='bob'] [data-product-selection] label,
[data-view='bob'] [data-product-identity] label {
  font-weight: 600;
}

[data-view='bob'] [data-product-selection] select,
[data-view='bob'] [data-product-selection] button,
[data-view='bob'] [data-product-identity] input,
[data-view='bob'] [data-product-identity] > [data-action='save'] {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font: inherit;
}

[data-view='bob'] [data-product-identity] input {
  caret-color: var(--app-accent);
}

[data-view='bob'] [data-product-selection] button,
[data-view='bob'] [data-product-identity] > [data-action='save'] {
  font-weight: 600;
  cursor: pointer;
}

[data-view='bob'] [data-product-identity] > [data-action='save'] {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-product-selection] button:hover:not(:disabled) {
  background: var(--app-field);
}

[data-view='bob'] [data-product-identity] > [data-action='save']:hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-product-selection] button:disabled,
[data-view='bob'] [data-product-identity] > [data-action='save']:disabled {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
  cursor: default;
}

[data-view='bob'] [data-product-selection] :focus-visible,
[data-view='bob'] [data-product-identity] :focus-visible,
[data-view='bob'] [data-product-identity] > [data-action='save']:focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 3px;
}

[data-view='bob'] [data-product-editor] ::selection {
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-product-editor] > p {
  margin: 16px 0 0;
  max-width: 70ch;
  color: var(--app-muted);
}

[data-view='bob'] [data-product-editor] > [data-error]:not([data-error='none']) {
  color: var(--app-error);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-product-editor] > * {
    max-width: 70ch;
  }

  [data-view='bob'] [data-product-selection] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
  }

  [data-view='bob'] [data-product-selection] button,
  [data-view='bob'] [data-product-identity] > [data-action='save'] {
    width: auto;
    justify-self: end;
  }
}

[data-view='bob'] [data-product-variants] h3,
[data-view='bob'] [data-product-images] h3 {
  margin: 0 0 16px;
  font-size: 1.125rem;
  line-height: 1.4;
}

[data-view='bob'] [data-variants],
[data-view='bob'] [data-images] {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

[data-view='bob'] [data-variant-index],
[data-view='bob'] [data-images] li {
  margin-bottom: 8px;
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
}

[data-view='bob'] [data-variant-index],
[data-view='bob'] [data-variant-fields],
[data-view='bob'] [data-variant-controls],
[data-view='bob'] [data-variant-fields] label {
  display: grid;
  gap: 8px;
}

[data-view='bob'] [data-variant-index][hidden],
[data-view='bob'] [data-variant-fields][hidden],
[data-view='bob'] [data-variant-controls][hidden],
[data-view='bob'] [data-variant-fields] label[hidden] {
  display: none;
}

[data-view='bob'] [data-variant-index] {
  gap: 16px;
}

[data-view='bob'] [data-variant-index]:focus-within {
  border-color: var(--app-accent);
  background: var(--app-selected);
}

[data-view='bob'] [data-variant-name],
[data-view='bob'] [data-variant-fields] label {
  font-weight: 600;
}

[data-view='bob'] [data-variant-availability],
[data-view='bob'] [data-variant-default] {
  padding: 2px 8px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-field);
  color: var(--app-ink);
  font-size: 0.875rem;
}

[data-view='bob'] [data-product-variants] input,
[data-view='bob'] [data-product-variants] button,
[data-view='bob'] [data-product-images] button {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font: inherit;
}

[data-view='bob'] [data-product-variants] input[data-field='variant-price'] {
  font-variant-numeric: tabular-nums;
}

[data-view='bob'] [data-product-variants] input {
  caret-color: var(--app-accent);
}

[data-view='bob'] [data-product-variants] button,
[data-view='bob'] [data-product-images] button {
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}

[data-view='bob'] [data-product-variants] [data-action='removeVariant'] {
  border-color: var(--app-error);
  color: var(--app-error);
}

[data-view='bob'] [data-product-variants] button:hover:not(:disabled),
[data-view='bob'] [data-product-images] button:hover:not(:disabled) {
  background: var(--app-field);
}

[data-view='bob'] [data-product-variants] button:disabled,
[data-view='bob'] [data-product-images] button:disabled {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
  cursor: default;
}

[data-view='bob'] [data-product-variants] :focus-visible,
[data-view='bob'] [data-product-images] :focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 3px;
}

[data-view='bob'] [data-empty-variants],
[data-view='bob'] [data-empty-images] {
  margin: 0 0 16px;
  color: var(--app-muted);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-variant-index] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  [data-view='bob'] [data-product-variants] > button,
  [data-view='bob'] [data-product-images] > button {
    width: auto;
  }
}

[data-view='bob'] [data-variant-heading],
[data-view='bob'] [data-variant-badges],
[data-view='bob'] [data-variant-actions] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

[data-view='bob'] [data-variant-heading][hidden],
[data-view='bob'] [data-variant-badges][hidden],
[data-view='bob'] [data-variant-actions][hidden] {
  display: none;
}

[data-view='bob'] [data-variant-heading] {
  gap: 8px;
  margin-bottom: 16px;
}

[data-view='bob'] [data-variant-heading] h3 {
  margin: 0;
}

[data-view='bob'] [data-variant-create-control] {
  position: relative;
}

[data-view='bob'] [data-variant-tooltip] {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  width: max-content;
  max-width: 20ch;
  padding: 8px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  visibility: hidden;
}

[data-view='bob'] [data-variant-create-control]:hover [data-variant-tooltip],
[data-view='bob'] [data-variant-create-control]:focus-within [data-variant-tooltip] {
  visibility: visible;
}

[data-view='bob'] [data-variant-create] {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-bottom: 16px;
}

[data-view='bob'] [data-variant-create][hidden] {
  display: none;
}

[data-view='bob'] [data-variant-create] label {
  flex: 1 1 28ch;
  font-weight: 600;
}

[data-view='bob'] [data-product-variants] [data-variant-create] button,
[data-view='bob'] [data-product-variants] [data-variant-actions] button {
  width: auto;
}

[data-view='bob'] [data-product-variants] [data-variant-create-toggle] {
  width: auto;
  min-width: 44px;
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
  font-size: 1.5rem;
}

[data-view='bob'] [data-product-variants] [data-variant-create-toggle]:hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-product-busy] {
  margin: 0;
  color: var(--app-muted);
}

[data-view='bob'] [data-variant-name-error] {
  flex-basis: 100%;
  margin: 0;
  color: var(--app-error);
}

[data-view='bob'] [data-variant-create] input[aria-invalid='true'] {
  border-color: var(--app-error);
}

[data-view='bob'] [data-variant-index] > [data-removal-confirmation] {
  grid-column: 1 / -1;
}

[data-view='bob'] [data-availability-toggle] {
  margin-top: 24px;
  padding: 16px;
  background: var(--app-field);
  color: var(--app-ink);
  font-family: var(--app-font);
  line-height: 1.5;
}

[data-view='bob'] [data-availability-toggle],
[data-view='bob'] [data-availability-toggle] * {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-availability-toggle] h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  line-height: 1.25;
}

[data-view='bob'] [data-availability-toggle] p {
  margin: 0 0 16px;
  max-width: 70ch;
  color: var(--app-muted);
}

[data-view='bob'] [data-availability-toggle] [data-available] {
  color: var(--app-ink);
  font-size: 1.125rem;
  font-weight: 600;
}

[data-view='bob'] [data-availability-toggle] [data-available='true'] {
  color: var(--app-accent);
}

[data-view='bob'] [data-availability-toggle] [data-error]:not([data-error='none']) {
  color: var(--app-error);
}

[data-view='bob'] [data-availability-toggle] button {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font: inherit;
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}

[data-view='bob'] [data-availability-toggle] button[aria-pressed='true'] {
  border-color: var(--app-accent);
  background: var(--app-selected);
  color: var(--app-accent);
}

[data-view='bob'] [data-availability-toggle] button:hover {
  background: var(--app-selected);
}

[data-view='bob'] [data-availability-toggle] button[data-pending='true'] {
  cursor: wait;
}

[data-view='bob'] [data-availability-toggle] :focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 3px;
}

[data-view='bob'] [data-availability-toggle] ::selection {
  background: var(--app-accent);
  color: var(--app-paper);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-availability-toggle] > * {
    max-width: 70ch;
  }
}

[data-view='bob'] [data-onboarding-admin] {
  margin-top: 24px;
  padding: 16px;
  background: var(--app-field);
  color: var(--app-ink);
  font-family: var(--app-font);
  line-height: 1.5;
}

[data-view='bob'] [data-onboarding-admin],
[data-view='bob'] [data-onboarding-admin] * {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-onboarding-admin] > section > h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  line-height: 1.25;
}

[data-view='bob'] [data-description-form],
[data-view='bob'] [data-profile-form],
[data-view='bob'] [data-description-form] label,
[data-view='bob'] [data-profile-form] label,
[data-view='bob'] [data-onboarding-actions] {
  display: grid;
  gap: 8px;
}

[data-view='bob'] [data-description-form][hidden],
[data-view='bob'] [data-profile-form][hidden],
[data-view='bob'] [data-description-form] label[hidden],
[data-view='bob'] [data-profile-form] label[hidden],
[data-view='bob'] [data-onboarding-actions][hidden] {
  display: none;
}

[data-view='bob'] [data-description-form],
[data-view='bob'] [data-profile-form] {
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
}

[data-view='bob'] [data-description-form] h3,
[data-view='bob'] [data-profile-form] h3 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
}

[data-view='bob'] [data-description-form] label,
[data-view='bob'] [data-profile-form] label {
  font-weight: 600;
}

[data-view='bob'] [data-description-form] textarea,
[data-view='bob'] [data-profile-form] input,
[data-view='bob'] [data-description-form] button,
[data-view='bob'] [data-profile-form] button,
[data-view='bob'] [data-onboarding-actions] button {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font: inherit;
}

[data-view='bob'] [data-description-form] textarea,
[data-view='bob'] [data-profile-form] input {
  caret-color: var(--app-accent);
}

[data-view='bob'] [data-description-form] textarea {
  min-height: 120px;
  resize: vertical;
}

[data-view='bob'] [data-description-form] textarea::placeholder {
  color: var(--app-muted);
  opacity: 1;
}

[data-view='bob'] [data-description-form] button,
[data-view='bob'] [data-profile-form] button,
[data-view='bob'] [data-onboarding-actions] button {
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}

[data-view='bob'] [data-description-form] [data-action='save-description'],
[data-view='bob'] [data-profile-form] [data-action='save-profile'] {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-description-form] button:hover:not(:disabled),
[data-view='bob'] [data-profile-form] button:hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-onboarding-actions] {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--app-edge);
}

[data-view='bob']
  [data-onboarding-actions]
  [data-action='enable-merchant']:not([data-blocked='true']) {
  border-color: var(--app-accent);
  color: var(--app-accent);
}

[data-view='bob'] [data-onboarding-actions] button:hover:not(:disabled) {
  background: var(--app-field);
}

[data-view='bob'] [data-onboarding-actions] [data-blocked='true'] {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
}

[data-view='bob'] [data-description-form] button:disabled,
[data-view='bob'] [data-profile-form] button:disabled,
[data-view='bob'] [data-onboarding-actions] button:disabled {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
  cursor: default;
}

[data-view='bob'] [data-onboarding-admin] :focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 3px;
}

[data-view='bob'] [data-onboarding-admin] ::selection {
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-onboarding-admin] > p,
[data-view='bob'] [data-onboarding-admin] [data-transition] {
  margin: 0 0 24px;
  max-width: 70ch;
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-muted);
}

[data-view='bob'] [data-onboarding-admin] [data-transition='ineligible'] {
  color: var(--app-ink);
}

[data-view='bob'] [data-onboarding-admin] [data-transition] p {
  margin: 0 0 8px;
}

[data-view='bob'] [data-onboarding-admin] [data-transition] ul {
  margin: 0;
  padding-left: 24px;
}

[data-view='bob'] [data-onboarding-admin] [data-error],
[data-view='bob'] [data-onboarding-admin] [data-transition='conflict'] {
  color: var(--app-error);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-onboarding-admin] > section > * {
    max-width: 70ch;
  }

  [data-view='bob'] [data-description-form] button,
  [data-view='bob'] [data-profile-form] button {
    width: auto;
    justify-self: end;
  }

  [data-view='bob'] [data-onboarding-actions] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

[data-view='bob'] [data-location-form],
[data-view='bob'] [data-hours],
[data-view='bob'] [data-pickup-form] {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
}

[data-view='bob'] [data-location-form] label,
[data-view='bob'] [data-hours] label,
[data-view='bob'] [data-pickup-form] label,
[data-view='bob'] [data-hours] ul,
[data-view='bob'] [data-hours] [data-day] {
  display: grid;
  gap: 8px;
}

[data-view='bob'] [data-location-form][hidden],
[data-view='bob'] [data-hours][hidden],
[data-view='bob'] [data-pickup-form][hidden],
[data-view='bob'] [data-location-form] label[hidden],
[data-view='bob'] [data-hours] label[hidden],
[data-view='bob'] [data-pickup-form] label[hidden],
[data-view='bob'] [data-hours] ul[hidden],
[data-view='bob'] [data-hours] [data-day][hidden] {
  display: none;
}

[data-view='bob'] [data-location-form] h3,
[data-view='bob'] [data-hours] h3,
[data-view='bob'] [data-pickup-form] h3 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
}

[data-view='bob'] [data-location-form] label,
[data-view='bob'] [data-hours] label,
[data-view='bob'] [data-pickup-form] label {
  font-weight: 600;
}

[data-view='bob'] [data-location-form] input,
[data-view='bob'] [data-hours] input,
[data-view='bob'] [data-hours] select,
[data-view='bob'] [data-pickup-form] textarea,
[data-view='bob'] [data-pickup-form] input,
[data-view='bob'] [data-location-form] button,
[data-view='bob'] [data-hours] button,
[data-view='bob'] [data-pickup-form] button {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font: inherit;
}

[data-view='bob'] [data-location-form] input,
[data-view='bob'] [data-hours] input,
[data-view='bob'] [data-pickup-form] textarea,
[data-view='bob'] [data-pickup-form] input {
  caret-color: var(--app-accent);
}

[data-view='bob'] [data-pickup-form] textarea {
  resize: vertical;
}

[data-view='bob'] [data-location-form] input[data-latitude],
[data-view='bob'] [data-location-form] input[data-longitude],
[data-view='bob'] [data-hours] input,
[data-view='bob'] [data-hours-numerals],
[data-view='bob'] [data-hours-day],
[data-view='bob'] [data-pickup-form] input[data-pickup-lead-time] {
  font-variant-numeric: tabular-nums;
}

[data-view='bob'] [data-onboarding-admin] [data-busy],
[data-view='bob'] [data-service-settings] [data-busy] {
  margin: 0;
  color: var(--app-muted);
}

[data-view='bob'] [data-location-help],
[data-view='bob'] [data-hours-help] {
  margin: 0;
  color: var(--app-muted);
}

[data-view='bob'] [data-hours] ul {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 16px;
}

[data-view='bob'] [data-hours] [data-day] {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--app-edge);
}

[data-view='bob'] [data-location-form] [data-action='save-location'],
[data-view='bob'] [data-hours] [data-action='save-hours'],
[data-view='bob'] [data-hours] [data-action='add-hours'],
[data-view='bob'] [data-pickup-form] [data-action='save-pickup'] {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}

[data-view='bob'] [data-location-form] button:hover:not(:disabled),
[data-view='bob'] [data-hours] button:hover:not(:disabled),
[data-view='bob'] [data-pickup-form] button:hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-location-form] button:disabled,
[data-view='bob'] [data-hours] button:disabled,
[data-view='bob'] [data-pickup-form] button:disabled {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
  cursor: default;
}

@media (min-width: 960px) {
  [data-view='bob'] [data-location-form] button,
  [data-view='bob'] [data-hours] button,
  [data-view='bob'] [data-pickup-form] button {
    width: auto;
    justify-self: end;
  }
}

[data-view='bob'] [data-service-settings] {
  margin-top: 24px;
  padding: 16px;
  background: var(--app-field);
  color: var(--app-ink);
  font-family: var(--app-font);
  line-height: 1.5;
}

[data-view='bob'] [data-service-settings],
[data-view='bob'] [data-service-settings] * {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-service-settings] h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  line-height: 1.25;
}

[data-view='bob'] [data-service-settings] h3 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
}

[data-view='bob'] [data-service-areas],
[data-view='bob'] [data-service-modes],
[data-view='bob'] [data-service-radius] {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--app-edge);
}

[data-view='bob'] [data-service-settings] label,
[data-view='bob'] [data-service-settings] ul,
[data-view='bob'] [data-service-settings] [data-new-area],
[data-view='bob'] [data-service-settings] [data-mode] {
  display: grid;
  gap: 8px;
}

[data-view='bob'] [data-service-areas][hidden],
[data-view='bob'] [data-service-modes][hidden],
[data-view='bob'] [data-service-radius][hidden],
[data-view='bob'] [data-service-settings] label[hidden],
[data-view='bob'] [data-service-settings] ul[hidden],
[data-view='bob'] [data-service-settings] [data-new-area][hidden],
[data-view='bob'] [data-service-settings] [data-mode][hidden] {
  display: none;
}

[data-view='bob'] [data-service-settings] label,
[data-view='bob'] [data-service-settings] [data-mode-name] {
  font-weight: 600;
}

[data-view='bob'] [data-service-settings] ul {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 16px;
}

[data-view='bob'] [data-service-settings] [data-area] {
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
}

[data-view='bob'] [data-service-settings] [data-area]:focus-within {
  border-color: var(--app-accent);
  background: var(--app-selected);
}

[data-view='bob'] [data-service-settings] [data-mode] {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--app-edge);
}

[data-view='bob'] [data-service-settings] p {
  margin: 0;
  max-width: 70ch;
  color: var(--app-muted);
}

[data-view='bob'] [data-service-settings] [data-mode-state],
[data-view='bob'] [data-service-settings] [data-radius-state] {
  color: var(--app-ink);
}

[data-view='bob'] [data-service-settings] input,
[data-view='bob'] [data-service-settings] button {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font: inherit;
}

[data-view='bob'] [data-service-settings] [data-delivery-provider] {
  display: grid;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--app-edge);
}

[data-view='bob'] [data-service-settings] [data-delivery-provider][hidden] {
  display: none;
}

[data-view='bob'] [data-service-settings] [data-delivery-provider] h2 {
  margin-bottom: 0;
}

[data-view='bob'] [data-service-settings] [data-delivery-provider] select {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font: inherit;
}

[data-view='bob'] [data-service-settings] [data-action='save-delivery-provider']:disabled,
[data-view='bob'] [data-service-settings] [data-delivery-provider] select:disabled {
  background: var(--app-field);
  color: var(--app-muted);
}

[data-view='bob'] [data-service-settings] [data-action='save-delivery-provider'] {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob']
  [data-service-settings]
  [data-action='save-delivery-provider']:hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-service-settings] [data-delivery-provider] [data-error] {
  color: var(--app-error);
}

[data-view='bob'] [data-service-settings] input {
  caret-color: var(--app-accent);
  font-variant-numeric: tabular-nums;
}

[data-view='bob'] [data-service-settings] [data-radius-state] {
  font-variant-numeric: tabular-nums;
}

[data-view='bob'] [data-service-settings] button {
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}

[data-view='bob'] [data-service-settings] [data-action='save-areas'],
[data-view='bob'] [data-service-settings] [data-action='save-radius'],
[data-view='bob'] [data-service-settings] [data-action='toggle-mode'] {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-service-settings] button:hover:not(:disabled) {
  background: var(--app-field);
}

[data-view='bob'] [data-service-settings] [data-action='save-areas']:hover:not(:disabled),
[data-view='bob'] [data-service-settings] [data-action='save-radius']:hover:not(:disabled),
[data-view='bob'] [data-service-settings] [data-action='toggle-mode']:hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-service-settings] button:disabled {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
  cursor: default;
}

[data-view='bob'] [data-service-settings] :focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 3px;
}

[data-view='bob'] [data-service-settings] ::selection {
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-service-settings] > p {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
}

[data-view='bob'] [data-service-settings] [data-error],
[data-view='bob'] [data-service-settings] [data-point-error] {
  color: var(--app-error);
}

[data-view='bob'] [data-service-settings] [data-point] {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

[data-view='bob'] [data-service-settings] [data-point][hidden] {
  display: none;
}

[data-view='bob'] [data-service-settings] [data-point] legend {
  padding: 0;
  margin-bottom: 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[data-view='bob'] [data-service-settings] input[aria-invalid='true'] {
  border-color: var(--app-error);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-service-settings] > section {
    max-width: 70ch;
  }

  [data-view='bob'] [data-service-settings] [data-point] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-view='bob'] [data-service-settings] button {
    width: auto;
    justify-self: end;
  }

  [data-view='bob'] [data-service-settings] [data-mode] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
  }
}

[data-view='bob'] [data-merchant-notifications] {
  margin-top: 24px;
  padding: 16px;
  background: var(--app-field);
  color: var(--app-ink);
  font-family: var(--app-font);
  line-height: 1.5;
}

[data-view='bob'] [data-merchant-notifications],
[data-view='bob'] [data-merchant-notifications] * {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-view='bob'] [data-merchant-notifications] h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  line-height: 1.25;
}

[data-view='bob'] [data-merchant-notifications] [data-merchant-notification-id] {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
}

[data-view='bob'] [data-merchant-notifications] [data-merchant-notification-id][hidden] {
  display: none;
}

[data-view='bob'] [data-merchant-notifications] [data-notification-order] {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.875rem;
}

[data-view='bob'] [data-merchant-notifications] time {
  color: var(--app-ink);
  font-variant-numeric: tabular-nums;
}

[data-view='bob'] [data-merchant-notifications] button {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-accent);
  color: var(--app-paper);
  font: inherit;
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}

[data-view='bob'] [data-merchant-notifications] button:hover:not(:disabled) {
  background: var(--app-hover);
}

[data-view='bob'] [data-merchant-notifications] button:disabled {
  border-color: var(--app-muted);
  background: var(--app-field);
  color: var(--app-muted);
  cursor: default;
}

[data-view='bob'] [data-merchant-notifications] :focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 3px;
}

[data-view='bob'] [data-merchant-notifications] ::selection {
  background: var(--app-accent);
  color: var(--app-paper);
}

[data-view='bob'] [data-merchant-notifications] > p {
  margin: 0 0 24px;
  max-width: 70ch;
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-muted);
}

[data-view='bob'] [data-merchant-notifications] [data-error] {
  color: var(--app-error);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-merchant-notifications] > section {
    max-width: 70ch;
  }

  [data-view='bob'] [data-merchant-notifications] [data-merchant-notification-id] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
  }

  [data-view='bob'] [data-merchant-notifications] button {
    width: auto;
  }
}

/* A placeholder-only region is a progress line, not an empty panel. */
[data-view='bob'] [data-merchant-group] > section:has(> p:only-child) {
  margin-top: 8px;
  padding: 0;
  background: transparent;
}

[data-view='bob'] [data-merchant-group] > section > p:only-child {
  margin: 0;
  padding: 8px 16px;
  border: 0;
  background: transparent;
}

[data-view='bob'] [data-loading] {
  margin: 0;
  padding: 8px 16px;
  border: 0;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  [data-view='bob'] [data-merchant-board] [data-transition],
  [data-view='bob'] [data-board-refresh] {
    transition: none;
  }
}

/* Merchant handoff — the customer-held code closes a merchant-owned delivery. */
[data-view='bob'] [data-delivery-handoff] {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-field);
}

[data-view='bob'] [data-delivery-handoff][hidden] {
  display: none;
}

[data-view='bob'] [data-delivery-handoff] label {
  color: var(--app-muted);
  font-size: 0.875rem;
}

[data-view='bob'] [data-delivery-code-input] {
  min-height: 44px;
  width: 100%;
  max-width: 12rem;
  padding: 8px 12px;
  border: 1px solid var(--app-edge);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  font: inherit;
  font-family: var(--app-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.25em;
}

[data-view='bob'] [data-delivery-confirm] {
  min-height: 44px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--app-accent);
  border-radius: 4px;
  background: var(--app-accent);
  color: var(--app-paper);
  font: inherit;
  font-family: var(--app-font);
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

[data-view='bob'] [data-delivery-confirm]:hover:not(:disabled) {
  border-color: var(--app-hover);
  background: var(--app-hover);
}

[data-view='bob'] [data-delivery-handoff] :disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

[data-view='bob'] [data-delivery-error] {
  margin: 0;
  color: var(--app-error);
}

@media (min-width: 960px) {
  [data-view='bob'] [data-delivery-handoff] {
    max-width: 24rem;
  }

  [data-view='bob'] [data-delivery-confirm] {
    width: auto;
  }
}