/* The start chooser (src/ui/StartModal.js): upload, blank page, or continue.
   Shared by the editor (where it is the front door and fills the screen) and
   the landing page (where it opens over the page and can be dismissed).
   Uses only tokens.css values, which both pages load. */

.start-overlay {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--desk);
}

.start {
  width: min(420px, 100%);
  padding: 20px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--mark);
  border-radius: var(--radius);
}

.start-eyebrow {
  font-family: var(--font-label);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  font-variant-caps: all-small-caps;
}

.start-title {
  margin: 4px 0 16px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Upload: the big block. Fixed Federal Blue with white text in both themes */
.start-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  min-height: 136px;
  padding: 18px;
  font-family: inherit;
  text-align: left;
  color: #fff;
  background: #3d5588;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.start-upload:hover {
  background: #34497a;
}

.start-upload.drag-over {
  outline: 2px dashed #fff;
  outline-offset: -8px;
}

.start-upload-label {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.start-upload-hint {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Blank page: the smaller block, printed in ink (bone in dark mode) */
.start-blank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--surface);
  background: var(--text);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.start-blank:hover {
  opacity: 0.9;
}

/* The label keeps to one line; a long hint wraps on its own side */
.start-blank {
  gap: 12px;
}

.start-blank span {
  white-space: nowrap;
}

.start-blank small {
  text-align: right;
  font-family: var(--font-label);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.7;
  font-variant-caps: all-small-caps;
}

.start-error {
  min-height: 1.2em;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--danger);
}

.start-resume {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  padding: 4px 0;
  overflow: hidden;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--action);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}

.start.busy .start-upload,
.start.busy .start-blank,
.start.busy .start-resume {
  opacity: 0.6;
  cursor: progress;
}

/* Landing page: the page stays visible behind a dimmed backdrop */
.start-overlay.dismissible {
  background: rgba(36, 27, 22, 0.45);
}

:root[data-theme="dark"] .start-overlay.dismissible {
  background: rgba(10, 7, 5, 0.6);
}

.start-overlay.dismissible .start {
  position: relative;
}

.start-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-soft);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.start-close:hover {
  color: var(--text);
  background: var(--hover);
}

.start-resume-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.start-resume-row .start-resume {
  flex: 1;
  min-width: 0;
}

.start-forget {
  flex: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-soft);
  background: none;
  border: 0;
  cursor: pointer;
}

.start-forget:hover {
  color: var(--danger);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Arrives instead of appearing */
@keyframes start-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes start-fade {
  from {
    opacity: 0;
  }
}

.start-overlay.dismissible {
  animation: start-fade 160ms ease-out;
}

.start {
  animation: start-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .start,
  .start-overlay.dismissible {
    animation: none;
  }
}