/* everything hums — design language in homage to play_music_theory by tala:
   one mono typeface, warm neutrals, hairlines instead of shadows, circles
   and stadiums, procedural paper grain, one green accent. */

:root {
  color-scheme: light;
  --paper: #faf9f7;
  --ink: #1a1916;
  --muted: #8a877e;
  --hair: #cfcabd;
  --raised: #fffefb;
  --accent: #178a58;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.5 var(--mono);
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* paper grain: two dot fields at incommensurate tile periods read as random */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background-image:
    radial-gradient(circle, rgba(107, 94, 72, 0.06) 0.6px, transparent 0.9px),
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0.5px, transparent 0.8px);
  background-size: 7px 9px, 11px 13px;
  background-position: 0 0, 3px 5px;
}

main {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  margin: 0 auto;
  min-height: 100dvh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center; /* don't clip the top when content overflows */
  gap: 13px;
}

/* wordmark — plain lowercase mono; the stretched m's are texture, mark only */
header { text-align: center; }
.wordmark {
  margin: 0;
  font: 400 16px/1.4 var(--mono);
  letter-spacing: 0.02em;
}
.wordmark i { font-style: normal; }
.wordmark .m2 { opacity: 0.5; }
.wordmark .m3 { opacity: 0.22; }
.desc {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* the stage — the photo is the interface */
.stage-wrap {
  position: relative;
  aspect-ratio: var(--ar);
  width: min(100%, calc(62dvh * var(--ar)));
  border-radius: 10px;
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--hair);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 760px) {
  /* desktop: fixed caps so window-height changes don't reshape the card */
  main { width: min(760px, 100%); }
  .stage-wrap { width: min(100%, calc(680px * var(--ar))); }
}
.stage-wrap:not(.has-photo) { border-style: dashed; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}
.hint svg { color: var(--accent); }
.linklike {
  background: none;
  border: 0;
  padding: 2px 4px;
  font: 400 12px var(--mono);
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  pointer-events: auto;
}
.hint[hidden], .chip.float[hidden] { display: none; }

.status {
  margin: 0;
  min-height: 20px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
}

/* one slim control row */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
}
#lensOpts { display: contents; }
.controls .group { display: flex; gap: 7px; align-items: center; } /* wraps as a clean unit on narrow screens */

.chip, .round {
  appearance: none;
  -webkit-appearance: none;
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--hair);
  font: 400 13px var(--mono);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.chip {
  border-radius: 20px;
  padding: 0 14px;
  height: 36px;
  text-align: center;
}
.round {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chip:active, .round:active { transform: scale(0.94); }
.chip:focus-visible, .round:focus-visible, .linklike:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
@media (hover: hover) {
  .chip:not(:disabled):hover, .round:not(:disabled):hover { border-color: rgba(26, 25, 22, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .chip, .round { transition: none; }
  .chip:active, .round:active { transform: none; }
}
.chip:disabled, .round:disabled { opacity: 0.3; cursor: default; transform: none; }
.round[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.chip.save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.chip.save .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.chip.float {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  background: rgba(255, 254, 251, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

input[type="file"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

footer {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
footer p { margin: 2px 0; }
footer a { color: var(--ink); }

@media (min-width: 760px) {
  .chip { height: 40px; }
  .round { width: 40px; height: 40px; }
  .chip.float { top: 12px; right: 12px; }
}