/* LDM-09C: obvious guest QR, calmer Apple Home, automatic push-mode status.
 * The legacy design files remain untouched and Original keeps its old layout. */

html[data-ui="simple"] .ovgrid > div:first-child,
html[data-ui="apple"] .ovgrid > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

html[data-ui="simple"] #storageWarning,
html[data-ui="apple"] #storageWarning {
  display: flex;
  min-width: 0;
  margin: 16px auto 0;
  padding: 14px 16px;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid rgba(215, 112, 0, .28);
  border-radius: 16px;
  color: #6b3b00;
  background: #fff5df;
  box-shadow: 0 8px 24px rgba(120, 72, 0, .07);
}

html[data-ui="simple"] #storageWarning[hidden],
html[data-ui="apple"] #storageWarning[hidden] { display: none; }

html[data-ui="simple"] #storageWarning > span,
html[data-ui="apple"] #storageWarning > span { flex: 0 0 auto; font-size: 18px; line-height: 1.25; }

html[data-ui="simple"] #storageWarning strong,
html[data-ui="apple"] #storageWarning strong { display: block; color: #4d2a00; font-size: 13px; }

html[data-ui="simple"] #storageWarning p,
html[data-ui="apple"] #storageWarning p { margin: 2px 0 0; color: #75511e; font-size: 12px; line-height: 1.45; }

.photo-ambiguity-note {
  margin: 8px 0 2px;
  padding: 9px 10px;
  border: 1px solid rgba(198, 112, 0, .22);
  border-radius: 11px;
  color: #704200;
  background: rgba(255, 184, 77, .13);
  font-size: 11px;
  line-height: 1.4;
}

.photo-ambiguity-note b,
.photo-ambiguity-note span { display: block; }

.photo-ambiguity-note b { color: #5b3500; font-weight: 750; }
.photo-ambiguity-note span { margin-top: 2px; }

html[data-ui="simple"] #countersCard,
html[data-ui="apple"] #countersCard { order: -3; }

html[data-ui="simple"] #uploadCard,
html[data-ui="apple"] #uploadCard { order: -2; }

html[data-ui="simple"] #processingCard,
html[data-ui="apple"] #processingCard { order: -1; }

html[data-ui="simple"] #guestAccessDetails > summary,
html[data-ui="apple"] #guestAccessDetails > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--ink, #1d1d1f);
  cursor: pointer;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.015em;
}

html[data-ui="simple"] #guestAccessDetails > summary .hintline,
html[data-ui="apple"] #guestAccessDetails > summary .hintline {
  display: inline;
  margin: 0;
  color: var(--ink-soft, #6e6e73);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

html[data-ui="simple"] #guestAccessDetails[open] > summary,
html[data-ui="apple"] #guestAccessDetails[open] > summary { margin-bottom: 14px; }

html[data-ui="simple"] #counters,
html[data-ui="apple"] #counters {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  overflow: visible;
}

html[data-ui="simple"] .guest-selfie,
html[data-ui="apple"] .guest-selfie {
  display: grid;
  min-width: 0;
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-areas:
    "qr copy"
    "qr count"
    "qr actions";
  align-items: center;
  gap: 10px 22px;
  padding: 22px;
  text-align: left;
  border: 1px solid rgba(0, 113, 227, .2);
  border-radius: 20px;
  background: linear-gradient(140deg, rgba(0, 113, 227, .075), rgba(255, 255, 255, .96) 62%);
  box-shadow: none;
}

html[data-ui="simple"] .guest-selfie canvas,
html[data-ui="apple"] .guest-selfie canvas {
  grid-area: qr;
  width: 154px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 7px #fff, 0 0 0 8px rgba(0, 113, 227, .16);
}

html[data-ui="simple"] .guest-selfie .access-copy,
html[data-ui="apple"] .guest-selfie .access-copy { grid-area: copy; min-width: 0; }

html[data-ui="simple"] .guest-selfie h4,
html[data-ui="apple"] .guest-selfie h4 {
  margin: 4px 0 6px;
  color: var(--ink, #1d1d1f);
  font: 750 23px/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.03em;
}

html[data-ui="simple"] .access-kicker,
html[data-ui="apple"] .access-kicker {
  color: #0071e3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

html[data-ui="simple"] .guest-selfie p,
html[data-ui="apple"] .guest-selfie p {
  max-width: 590px;
  margin: 0;
  color: var(--ink-soft, #6e6e73);
  font-size: 13px;
  line-height: 1.5;
}

html[data-ui="simple"] .guest-selfie .cnt,
html[data-ui="apple"] .guest-selfie .cnt {
  grid-area: count;
  color: var(--ink-soft, #6e6e73);
  font-size: 12px;
  text-align: left;
}

html[data-ui="simple"] .access-actions,
html[data-ui="apple"] .access-actions {
  display: flex;
  grid-area: actions;
  min-width: 0;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

html[data-ui="simple"] .access-actions .mini,
html[data-ui="apple"] .access-actions .mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
}

html[data-ui="simple"] .guest-selfie .access-actions a,
html[data-ui="apple"] .guest-selfie .access-actions a {
  border-color: #0071e3;
  color: #fff;
  background: #0071e3;
}

html[data-ui="simple"] .assisted-access,
html[data-ui="apple"] .assisted-access {
  min-width: 0;
  border-top: 1px solid var(--line, rgba(60, 60, 67, .14));
}

html[data-ui="simple"] .assisted-access > summary,
html[data-ui="apple"] .assisted-access > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  color: var(--ink, #1d1d1f);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

html[data-ui="simple"] .assisted-access > summary span,
html[data-ui="apple"] .assisted-access > summary span {
  color: var(--ink-soft, #6e6e73);
  font-size: 11px;
  font-weight: 500;
}

html[data-ui="simple"] .assisted-grid,
html[data-ui="apple"] .assisted-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 2px;
}

html[data-ui="simple"] .assisted-counter,
html[data-ui="apple"] .assisted-counter {
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  box-shadow: none;
}

html[data-ui="simple"] .assisted-counter canvas,
html[data-ui="apple"] .assisted-counter canvas { width: min(118px, calc(100% - 18px)); }

/* Apple Home is intentionally calm: one compact status card, no AWS cost
 * table, and no manual finish action in normal push delivery. */
html[data-ui="apple"] #processingCard > h3,
html[data-ui="apple"] #processingCard > .qrow { display: none; }

html[data-ui="apple"] #batchPanel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

html[data-ui="apple"] .simple-processing { display: grid; gap: 13px; }
html[data-ui="apple"] .simple-processing h3 { margin: 7px 0 3px; color: #1d1d1f; font-size: 19px; letter-spacing: -.025em; }
html[data-ui="apple"] .simple-processing p { margin: 0; color: #6e6e73; font-size: 12px; line-height: 1.5; }

html[data-ui="apple"] .simple-state {
  display: inline-flex;
  min-height: 27px;
  padding: 0 9px;
  align-items: center;
  border-radius: 999px;
  color: #075ec8;
  background: #e8f2ff;
  font-size: 10px;
  font-weight: 750;
}

html[data-ui="apple"] .simple-state.ready { color: #167233; background: #e8f7ec; }
html[data-ui="apple"] .simple-state.needs-attention { color: #b42318; background: #ffebe9; }

html[data-ui="apple"] .simple-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e5ea;
}

html[data-ui="apple"] .simple-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0071e3;
  transition: width .2s ease;
}

html[data-ui="apple"] .simple-finish {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border-radius: 13px;
  background: #f2f2f7;
}

html[data-ui="apple"] .simple-advanced { border-top: 1px solid rgba(60, 60, 67, .12); }
html[data-ui="apple"] .simple-advanced summary { display: flex; min-height: 44px; align-items: center; color: #6e6e73; cursor: pointer; font-size: 11px; font-weight: 650; }
html[data-ui="apple"] .simple-advanced-body { padding-bottom: 3px; }
html[data-ui="apple"] #costPanel { display: none; }

html[data-ui="apple"] #app .card {
  border: 1px solid rgba(60, 60, 67, .1);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .035);
}

html[data-ui="apple"] #drop { min-height: 145px; }

@media (min-width: 769px) {
  html[data-ui="apple"] .statrow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  html[data-ui="apple"] .stat { min-height: 88px; padding: 14px 16px; border-radius: 18px; }
  html[data-ui="apple"] .stat .lbl { min-height: 0; font-size: 9px; }
  html[data-ui="apple"] .stat .val { margin-top: 5px; font-size: 26px; }
}

@media (max-width: 720px) {
  html[data-ui="simple"] #workspaceTabs .tab::before,
  html[data-ui="simple"] #workspaceTabs .tab::after,
  html[data-ui="apple"] #workspaceTabs .tab::before,
  html[data-ui="apple"] #workspaceTabs .tab::after { display: none; }

  html[data-ui="apple"] #workspaceTabs .tab > span:first-child {
    font-size: 17px;
    line-height: 1;
  }

  html[data-ui="apple"] #workspaceTabs .tab > span:last-child {
    font-size: 9px;
    font-weight: 650;
    line-height: 1;
  }

  html[data-ui="simple"] #guestAccessDetails > summary,
  html[data-ui="apple"] #guestAccessDetails > summary { align-items: flex-start; flex-direction: column; gap: 1px; }

  html[data-ui="simple"] .guest-selfie,
  html[data-ui="apple"] .guest-selfie {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "qr" "count" "actions";
    padding: 18px;
    text-align: center;
  }

  html[data-ui="simple"] .guest-selfie canvas,
  html[data-ui="apple"] .guest-selfie canvas { width: min(168px, calc(100% - 20px)); }

  html[data-ui="simple"] .guest-selfie .cnt,
  html[data-ui="apple"] .guest-selfie .cnt { text-align: center; }

  html[data-ui="simple"] .access-actions,
  html[data-ui="apple"] .access-actions { justify-content: center; }

  /* On narrow screens the guest-QR action buttons become tidy, equal,
     full-width rows instead of a staggered centered wrap. */
  html[data-ui="simple"] .guest-selfie .access-actions,
  html[data-ui="apple"] .guest-selfie .access-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  html[data-ui="simple"] .guest-selfie .access-actions .mini,
  html[data-ui="apple"] .guest-selfie .access-actions .mini {
    width: 100%;
    font-size: 14px;
  }

  html[data-ui="simple"] .assisted-access > summary,
  html[data-ui="apple"] .assisted-access > summary { align-items: flex-start; flex-direction: column; justify-content: center; gap: 1px; }

  html[data-ui="simple"] .assisted-grid,
  html[data-ui="apple"] .assisted-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui="apple"] .simple-progress-track span { transition: none; }
}