/* APHCS client components: minimal styles for DOM that the /assets/*.js
   modules create or toggle. Scoped by id/class/attribute; colours are custom
   properties the server's own stylesheet can override. Optional to include. */

:root {
  --aphcs-toast-bg: #1f2937;
  --aphcs-toast-fg: #ffffff;
  --aphcs-error-bg: #b91c1c;
  --aphcs-ok: #15803d;
  --aphcs-warn: #b45309;
  --aphcs-urgent: #b91c1c;
  --aphcs-focus: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --aphcs-toast-bg: #e5e7eb;
    --aphcs-toast-fg: #111827;
    --aphcs-ok: #4ade80;
    --aphcs-warn: #fbbf24;
    --aphcs-urgent: #f87171;
    --aphcs-focus: #60a5fa;
  }
}

/* Elements the scripts show/hide with the hidden attribute. */
[data-install-app][hidden],
[data-push-subscribe][hidden],
[data-push-unsubscribe][hidden],
[data-push-unsupported][hidden],
[data-push-denied][hidden],
[data-control][hidden],
[data-link-retry][hidden],
[data-webauthn-error][hidden],
#capture-switch-camera[hidden] {
  display: none !important;
}

/* Toast (#toast, role=status) */
.toast,
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  max-width: min(90vw, 28rem);
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--aphcs-toast-bg);
  color: var(--aphcs-toast-fg);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
#toast.toast-visible {
  opacity: 1;
}
#toast.toast-error {
  background: var(--aphcs-error-bg);
  color: #ffffff;
}
#toast:empty {
  padding: 0;
}

/* Copy buttons and countdowns */
.copied[aria-pressed="true"] {
  outline: 2px solid var(--aphcs-ok);
  outline-offset: 1px;
}
[data-countdown].urgent {
  color: var(--aphcs-urgent);
  font-weight: 600;
}
[data-webauthn-error] {
  color: var(--aphcs-urgent);
}

/* Capture */
#capture {
  position: relative;
}
#capture-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
  object-fit: contain;
}
#capture-overlay {
  position: absolute;
  pointer-events: none;
}
#capture.capture-flash #capture-video {
  filter: brightness(1.8);
}
#capture-drop.dragover {
  outline: 3px dashed var(--aphcs-focus);
  outline-offset: 4px;
}
#capture-queue {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.capture-item {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  font-size: 0.875rem;
}
.capture-thumb {
  width: 100%;
  max-height: 10rem;
  object-fit: contain;
  border-radius: 0.25rem;
  background: rgba(127, 127, 127, 0.15);
}
.capture-thumb-file {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  font-weight: 600;
}
.capture-item[data-state="uploading"] .capture-thumb {
  opacity: 0.6;
}
.capture-item[data-state="done"] .capture-item-status {
  color: var(--aphcs-ok);
}
.capture-item[data-state="failed"] .capture-item-status {
  color: var(--aphcs-urgent);
}

/* Live view */
#live-view {
  position: relative;
}
#live-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  background: #111111;
}
#live-canvas.live-input {
  outline: 3px solid var(--aphcs-warn);
  outline-offset: -3px;
}
#live-canvas:focus-visible {
  outline: 3px solid var(--aphcs-focus);
  outline-offset: -3px;
}
.live-keyboard-input {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px; /* stops iOS zooming on focus */
}

@media (prefers-reduced-motion: reduce) {
  #toast {
    transition: none;
  }
}