/* s.l.i.m — global shell styles. All screen-level styling lives inline in app.js,
   mirroring the design spec 1:1. */

html, body { margin:0; padding:0; background:var(--slim-bg); }
* { box-sizing:border-box; }
input, textarea, button { font-family:inherit; }
input:focus, textarea:focus { outline:none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:2px solid var(--slim-sage);
  outline-offset:3px;
}
::selection { background:#5d6f4f; color:#faf5ed; }
::-webkit-scrollbar { width:0px; height:0px; }

:root {
  --slim-bg:#ece3d2;
  --slim-surface:#faf5ed;
  --slim-surface-2:#f3ebdd;
  --slim-card:#ffffff;
  --slim-ink:#2b342a;
  --slim-muted:#5a6358;
  --slim-line:rgba(43,52,42,0.14);
  --slim-accent:#2b342a;
  --slim-accent-ink:#faf5ed;
  --slim-sage:#5d6f4f;
  --slim-brass:#a98f5a;
  --slim-danger:#9a4b3f;
  --slim-success:#5d6f4f;
  --slim-radius:6px;
}

@keyframes slimBreath { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-2px) scale(1.04); } }
@keyframes slimBlink { 0%, 90%, 100% { transform:scaleY(1); } 94% { transform:scaleY(0.12); } }
@keyframes slimSteam { 0%,100% { opacity:0.2; } 50% { opacity:0.6; } }
@keyframes slimGlow { 0%,100% { opacity:0.28; transform:scale(1.25); } 50% { opacity:0.5; transform:scale(1.5); } }
@keyframes slimFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes slimFade { from { opacity:0; } to { opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:0.001ms !important;
  }
}

body {
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Inter',sans-serif;
}

/* The app fills the phone screen; on larger screens it sits centered like a device. */
#app {
  width:100%;
  max-width:430px;
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--slim-surface);
  color:var(--slim-ink);
  position:relative;
  overflow:hidden;
}

#app.slim-theme-standard {
  --slim-bg:#ece3d2;
  --slim-surface:#faf5ed;
  --slim-surface-2:#f3ebdd;
  --slim-card:#ffffff;
  --slim-ink:#2b342a;
  --slim-muted:#5a6358;
  --slim-line:rgba(43,52,42,0.14);
  --slim-accent:#2b342a;
  --slim-accent-ink:#faf5ed;
  --slim-sage:#5d6f4f;
  --slim-brass:#a98f5a;
}

#app.slim-theme-dark {
  --slim-bg:#0f1411;
  --slim-surface:#121713;
  --slim-surface-2:#1b231d;
  --slim-card:#202a23;
  --slim-ink:#f5eedc;
  --slim-muted:#b7bea9;
  --slim-line:rgba(245,238,220,0.14);
  --slim-accent:#d1b16d;
  --slim-accent-ink:#101410;
  --slim-sage:#8f9a86;
  --slim-brass:#d1b16d;
  background:var(--slim-surface);
  color:var(--slim-ink);
}
#app.slim-theme-dark [style*="background:#faf5ed"],
#app.slim-theme-dark [style*="background: #faf5ed"] {
  background:#121713 !important;
}
#app.slim-theme-dark [style*="background:#f3ebdd"],
#app.slim-theme-dark [style*="background: #f3ebdd"] {
  background:#1b231d !important;
}
#app.slim-theme-dark [style*="background:#ffffff"],
#app.slim-theme-dark [style*="background: #ffffff"] {
  background:#202a23 !important;
}
#app.slim-theme-dark [style*="background:#d9e2d0"],
#app.slim-theme-dark [style*="background: #d9e2d0"] {
  background:#263223 !important;
}
#app.slim-theme-dark [style*="background:#e8d4ca"],
#app.slim-theme-dark [style*="background: #e8d4ca"] {
  background:#322724 !important;
}
#app.slim-theme-dark [style*="background:#2b342a"],
#app.slim-theme-dark [style*="background: #2b342a"] {
  background:#d1b16d !important;
}
#app.slim-theme-dark [style*="background:#5d6f4f"],
#app.slim-theme-dark [style*="background: #5d6f4f"] {
  background:#6f875f !important;
}
#app.slim-theme-dark [style*="color:#2b342a"],
#app.slim-theme-dark [style*="color: #2b342a"] {
  color:#f5eedc !important;
}
#app.slim-theme-dark [style*="color:#5a6358"],
#app.slim-theme-dark [style*="color: #5a6358"] {
  color:#b7bea9 !important;
}
#app.slim-theme-dark [style*="color:#a9b89c"],
#app.slim-theme-dark [style*="color: #a9b89c"] {
  color:#8f9a86 !important;
}
#app.slim-theme-dark [style*="background:#2b342a"][style*="color:#faf5ed"],
#app.slim-theme-dark [style*="background: #2b342a"][style*="color: #faf5ed"] {
  color:#101410 !important;
}
#app.slim-theme-dark input,
#app.slim-theme-dark textarea,
#app.slim-theme-dark select {
  color:#f5eedc !important;
}
#app.slim-theme-dark input::placeholder,
#app.slim-theme-dark textarea::placeholder {
  color:#8f9a86;
}
#app.slim-theme-dark [style*="border:1px solid rgba(43,52,42"],
#app.slim-theme-dark [style*="border-top:1px solid rgba(43,52,42"],
#app.slim-theme-dark [style*="border-bottom:1px solid rgba(43,52,42"] {
  border-color:rgba(245,238,220,0.14) !important;
}

@media (min-width: 480px) and (min-height: 720px) {
  #app {
    height:min(932px, calc(100dvh - 48px));
    border-radius:28px;
    border:1px solid rgba(43,52,42,0.14);
    box-shadow:0 30px 80px -30px rgba(43,52,42,0.35);
  }
}