/* Shared motion + LINE Mini App visual polish. */
:root{
  --michi-line-green:#06c755;
  --michi-line-green-pressed:#05b74e;
  --michi-line-green-soft:#e8faef;
}

@keyframes michi-page-in{
  from{opacity:0}
  to{opacity:1}
}

body{animation:michi-page-in 150ms ease-out both}
html.michi-page-leaving body{opacity:0;transition:opacity 120ms ease-in}

/* Primary actions: LINE green with white text. */
.btn.primary,
.action.primary,
.auth-submit,
.plan-action:not(:disabled),
.plan-start-actions .primary,
.settings-create,
.empty-create,
.route-action.primary,
.quick-action.photo-action,
.privacy-blur-use,
.detail-save,
.completion-continue,
#finishBtn{
  background:var(--michi-line-green)!important;
  border-color:var(--michi-line-green)!important;
  color:#fff!important;
}

.btn.primary:active,
.action.primary:active,
.auth-submit:active,
.plan-action:not(:disabled):active,
.plan-start-actions .primary:active,
.settings-create:active,
.empty-create:active,
.route-action.primary:active,
.quick-action.photo-action:active,
.privacy-blur-use:active,
.detail-save:active,
.completion-continue:active,
#finishBtn:active{
  background:var(--michi-line-green-pressed)!important;
  color:#fff!important;
}

/* Keep explicit LINE share/send actions visually brand-like. */
.completion-action.line{
  background:var(--michi-line-green)!important;
  color:#fff!important;
}
.completion-action.line:active{
  background:var(--michi-line-green-pressed)!important;
  color:#fff!important;
}

/* Secondary navigation can borrow a light LINE tint. */
.link-button,
.plans-back{
  background:var(--michi-line-green-soft);
}

/* Older Android Chrome/WebView may not support dynamic viewport units.
   In that case styles.css's height:100dvh is ignored, leaving the viewer grid
   without a definite height and collapsing both map and photo panels. */
@supports not (height:100dvh){
  .viewer-app{height:100vh}
}

/* Guide step photo changes: very short, almost imperceptible fade. */
.photo-panel{transition:opacity 90ms ease}
.photo-panel.michi-step-prep{opacity:.28}

/* Completion should feel celebratory without enlarging the screen. */
.completion-mark{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

@media (prefers-reduced-motion:reduce){
  body{animation:none!important}
  html.michi-page-leaving body{transition:none!important}
  .photo-panel{transition:none!important}
}