/* slicer — minimal functional CSS (family convention: no glass, gradients, shadows) */

* {
  box-sizing: border-box;
}

html {
  font-size: 18px; /* 18px base, family a11y convention */
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #ffffff;
  color: #1a1a1a;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #111111;
    color: #eeeeee;
  }
}

button {
  font-size: 1rem;
  min-height: 48px; /* 48px touch targets */
  padding: 0.5rem 1rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

button:hover {
  background: rgba(128, 128, 128, 0.15);
}

input {
  font-size: 1rem;
  min-height: 48px;
  padding: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  width: 100%;
  margin-bottom: 1rem;
}

.app-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.account {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
}

.panel {
  margin-top: 2rem;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 4px;
  padding: 1.5rem;
}

.login-page {
  display: flex;
  justify-content: center;
  padding-top: 10vh;
}

.login-content {
  width: 100%;
  max-width: 420px;
}

/* Crop UI */

.crop-ui {
  margin-top: 1.5rem;
}

.crop-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.crop-controls button.active {
  background: rgba(128, 128, 128, 0.35);
}

.crop-controls label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.crop-controls select {
  font-size: 1rem;
  min-height: 48px;
  padding: 0.4rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
}

.crop-canvas-container {
  position: relative;
  width: 100%;
  max-width: 860px;
}

.crop-canvas-container canvas {
  width: 100%;
  height: auto;
  max-height: 70vh;
  display: block;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 4px;
  touch-action: none; /* pointer events own the gestures */
  cursor: grab;
}

.crop-canvas-container canvas:active {
  cursor: grabbing;
}

.crop-hint {
  font-size: 0.85rem;
  color: rgba(128, 128, 128, 0.9);
  margin-top: 0.5rem;
}

.crop-error {
  color: #cc2222;
  font-weight: 600;
}

.crop-warning {
  color: #b06000;
}

/* Carousel simulator (plan Step 5) */

.carousel {
  margin-top: 1.5rem;
}

.carousel-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.carousel-toolbar [role="group"] {
  display: inline-flex;
  gap: 0.5rem;
}

.carousel-hint {
  font-size: 0.85rem;
  color: rgba(128, 128, 128, 0.9);
  margin: 0;
}

.carousel-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5; /* fixed frame: never resizes between slides */
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 4px;
  touch-action: pan-y; /* horizontal swipes are ours; vertical scroll passes through */
  cursor: grab;
  outline-offset: 2px;
}

.carousel-frame:active {
  cursor: grabbing;
}

.carousel-track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.carousel-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.carousel-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-size: 0.85rem;
  z-index: 2;
  pointer-events: none;
}

.stitch-strip {
  display: flex;
  overflow-x: auto;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 4px;
  background: #222222;
}

.stitch-strip img {
  flex: 0 0 auto;
  height: 40vh;
  display: block;
}

/* Alt text panel (plan Step 6) */

.alt-panel {
  max-width: 860px;
}

.alt-note {
  font-size: 0.9rem;
  color: rgba(128, 128, 128, 0.9);
}

.alt-field {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.alt-field input {
  margin-top: 0.25rem;
}

.alt-overrides {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.alt-overrides summary {
  cursor: pointer;
  margin-bottom: 0.5rem;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.alt-preview p {
  font-size: 0.85rem;
  margin: 0.25rem 0;
  word-break: break-word;
}

.publish-button {
  margin-top: 1rem;
  background: #1a1a1a;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .publish-button {
    background: #eeeeee;
    color: #111111;
  }
}

.publish-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Content labels (red-team PLAN-08) */

.alt-labels {
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.alt-label-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-size: 0.95rem;
}

.alt-label-option input {
  width: auto;
  min-height: auto;
  margin: 0;
}

.publish-result {
  margin-top: 1rem;
  border: 1px solid rgba(0, 128, 0, 0.5);
  border-radius: 4px;
  padding: 1rem;
}

/* Footer version + repo link */
.footer-version {
  font-size: 0.85rem;
  opacity: 0.7;
}
.footer-version a {
  color: inherit;
}