/* Little Reminders — plain temporary design (her Figma look comes later) */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: Georgia, "Times New Roman", serif;
  background: #efe9dd; color: #3a332b;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: #e7dfcf; border-bottom: 1px solid #d5c9b2;
  position: sticky; top: 0; z-index: 20;
}
.topbar .brand { font-size: 18px; letter-spacing: .5px; color: #5a4f3f; }
.topbar .right { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #7a6f5c; }
.savestate { min-width: 70px; text-align: right; }
main { flex: 1; padding: 16px; max-width: 900px; margin: 0 auto; width: 100%; }
h1 { font-size: 22px; font-weight: normal; margin: 6px 0 14px; color: #4a4133; }
h2 { font-size: 17px; font-weight: normal; margin: 18px 0 8px; color: #5a4f3f; }
button, .btn {
  font-family: inherit; font-size: 15px; cursor: pointer;
  background: #f7f2e7; color: #4a4133; border: 1px solid #c9bda3; border-radius: 8px;
  padding: 9px 14px;
}
button:hover { background: #fffdf6; }
button.small { font-size: 13px; padding: 5px 9px; }
button.quiet { border-color: transparent; background: transparent; color: #7a6f5c; }
button.primary { background: #8a7a5c; color: #f9f5ea; border-color: #6f6146; }
button.danger { color: #8c3b2e; }
input, textarea, select {
  font-family: inherit; font-size: 15px; color: #3a332b;
  background: #fdfaf2; border: 1px solid #c9bda3; border-radius: 6px; padding: 8px 10px;
}
textarea { resize: vertical; line-height: 1.5; }
label { font-size: 13px; color: #7a6f5c; display: block; margin: 10px 0 4px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.decktile, .cardthumb {
  background: #f9f4e9; border: 1px solid #d5c9b2; border-radius: 10px;
  padding: 14px; cursor: pointer; min-height: 90px;
}
.decktile:hover, .cardthumb:hover { background: #fffdf6; }
.decktile .n { font-size: 17px; }
.decktile .c { font-size: 13px; color: #8a7f6a; margin-top: 6px; }
.cardthumb { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cardthumb .face { padding: 12px; font-size: 14px; flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.cardthumb .cap { font-size: 11px; color: #8a7f6a; padding: 5px 8px; border-top: 1px solid #e6ddc8; display: flex; justify-content: space-between; }
.empty { color: #8a7f6a; font-size: 14px; padding: 18px 0; }
.center { text-align: center; }

/* auth */
.authbox { max-width: 340px; margin: 8vh auto 0; background: #f9f4e9; border: 1px solid #d5c9b2; border-radius: 12px; padding: 24px; }
.authbox h1 { margin-top: 0; }
.err { color: #8c3b2e; font-size: 14px; min-height: 18px; margin: 8px 0; }

/* card viewer — the heart of it */
.cardstage { position: relative; margin: 10px auto; width: 100%; max-width: 640px; }
.bigcard {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid #d0c4aa; background: #fdf9ee;
  box-shadow: 0 4px 18px rgba(60, 50, 30, .12);
  aspect-ratio: 4 / 5; max-height: 72vh; margin: 0 auto;
  display: flex; width: 100%;
}
.bigcard .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bigcard .face {
  position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column;
  justify-content: center; padding: 26px; text-align: center; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bigcard .face .ttl { font-size: 15px; opacity: .75; margin-bottom: 14px; }
.bigcard .face .body { white-space: pre-wrap; line-height: 1.55; }
.cardnav { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.favbtn.on { color: #b3892f; }
.hint { font-size: 12px; color: #9a8f7a; text-align: center; margin-top: 8px; }

/* slideshow */
.slidemeta { display: flex; justify-content: center; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.progress { height: 3px; background: #d5c9b2; border-radius: 2px; margin-top: 12px; overflow: hidden; }
.progress i { display: block; height: 100%; background: #8a7a5c; width: 0; transition: width .3s linear; }
.bigcard.full { max-height: none; aspect-ratio: auto; position: fixed; inset: 0; z-index: 60; border-radius: 0; border: 0; }
.bigcard.full .face { padding: 34px; }
.fsbar { position: fixed; z-index: 61; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }

/* editor */
.editor { max-width: 640px; margin: 0 auto; }
.editor .fields { background: #f9f4e9; border: 1px solid #d5c9b2; border-radius: 12px; padding: 16px; }
.editor input[type=text], .editor textarea { width: 100%; }
.prevwrap { max-width: 300px; margin: 0 auto; }
.prevwrap .bigcard { aspect-ratio: 4/5; }
.listrow { display: flex; gap: 6px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #e6ddc8; }
.listrow .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 620px) {
  main { padding: 10px; }
  .bigcard { max-height: 64vh; }
  .topbar .brand { font-size: 16px; }
}