/* =========================================
   40-Day Path — Calm "Apostolic" Light Theme
   Palette (soft, historical):
   - Parchment:  #F8F3E7 (bg) / #FFF9ED (cards)
   - Ink:        #2F2A1E (text)
   - Lapis:      #2F5D90 (primary)
   - Wine:       #7A2E1A (accent)
   - Gold/Ochre: #C6A15B (lines/details)
   - Olive:      #6E7F4F (success/accents)
   ========================================= */

:root{
  --bg:        #F8F3E7;
  --paper:     #FFF9ED;
  --ink:       #2F2A1E;
  --muted:     #6b655b;
  --line:      #e6dcc8;

  --primary:   #2F5D90; /* lapis */
  --primary-10:#e9f0f7;
  --primary-20:#d6e2f0;
  --primary-80:#214467;

  --accent:    #7A2E1A; /* wine */
  --gold:      #C6A15B; /* ochre/gold */
  --olive:     #6E7F4F;

  --success:   #3c7d4f;
  --danger:    #9b2d2d;

  --radius:    16px;
  --shadow:    0 6px 24px rgba(47,42,30,.08), 0 2px 8px rgba(47,42,30,.06);
  --ring:      0 0 0 3px rgba(47,93,144,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23f8f3e7'/%3E%3Cpath d='M0 200 C200 180 200 220 400 200 M0 0 C180 20 220 -20 400 0 M0 400 C180 380 220 420 400 400' stroke='%23e4d9c5' stroke-width='2' fill='none' opacity='0.25'/%3E%3C/svg%3E"),
    radial-gradient(1000px 500px at 10% -10%, #ffffffcc, transparent 60%),
    radial-gradient(800px 400px at 110% 10%, #ffffffaa, transparent 55%),
    var(--bg);
  background-repeat: repeat;
  background-size: 400px 400px, auto, auto, auto;
  line-height:1.55;
}

/* -------- Layout -------- */
.app{
  max-width: 1000px;
  margin: clamp(16px, 4vw, 40px) auto;
  padding: 0 16px;
}

.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 28px);
  margin-bottom: 20px;
}

header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(198,161,91,.6); /* gold dotted line */
  margin-bottom: 18px;
}

h1{
  margin:0;
  font-family: Georgia, "Times New Roman", Times, serif;
  letter-spacing:.2px;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 30px);
  color: var(--primary-80);
}
.sub{
  margin-top:6px;
  color: var(--muted);
  font-size: .98rem;
}

/* -------- Auth Forms -------- */
.field{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin: 12px 0;
}
label{
  font-weight:600;
  color:#4a433a;
}
input[type="email"],
input[type="password"],
input[type="number"]{
  width:100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:#fffdf7;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .2s ease;
}
input:focus{
  border-color: var(--primary);
  box-shadow: var(--ring);
  background: #ffffff;
}

.field-password .pw-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.pw-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(#fff, #fffaf1);
  cursor:pointer;
  transition: transform .06s ease, box-shadow .15s ease;
}
.pw-toggle:hover{ box-shadow: 0 0 0 2px rgba(198,161,91,.35) inset; }
.pw-toggle:active{ transform: scale(.98); }
.pw-toggle svg{ width:20px; height:20px; color:#6a5b4a; }

.checkbox{
  display:flex; align-items:center; gap:10px;
  margin: 8px 0;
  user-select:none;
}

.actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top: 16px;
}
button{
  appearance:none;
  border: 1px solid var(--line);
  background: linear-gradient(#fff, #fff7e9);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease, background .2s ease;
}
button:hover{
  border-color: #d8c8a7;
  box-shadow: 0 3px 14px rgba(47,42,30,.08);
}
button:active{ transform: translateY(1px); }

button.primary{
  background:
    linear-gradient(180deg, #fefefe 0%, #e9f0f7 40%, #dfeaf4 100%);
  border-color: #cfdae7;
  color: var(--primary-80);
  font-weight: 700;
}
button.primary:hover{
  border-color: #b7c9e0;
  box-shadow: 0 4px 16px rgba(47,93,144,.18);
}

/* -------- App Header Bits -------- */
.right{
  display:flex; align-items:center; gap:10px;
}
.pill{
  display:inline-block;
  font-weight:700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e7d9ba;
  background:
    linear-gradient(180deg, #fff 0%, #fff9ec 100%);
  color:#6a5b3f;
}

/* Bottoni header (Restart / −1 / Today) con lo stesso stile di Log out */
.header-btn,
#logoutBtn{
  background: linear-gradient(180deg, #fff 0%, #fff3ef 100%);
  color: var(--accent);
  border-color: #efc9bd;
  font-weight:600;
}
.header-btn:hover,
#logoutBtn:hover{
  box-shadow: 0 3px 14px rgba(122,46,26,.18);
}

/* -------- Progress Bar -------- */
.progress{
  width:100%;
  height: 10px;
  border-radius: 999px;
  background: #efe7d6;
  border: 1px solid #e2d4b8;
  position: relative;
  overflow: hidden;
  margin: 18px 0 8px;
}
.progress > span#bar{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #c4ad79, #b79952 35%, #2F5D90 100%);
  box-shadow: inset 0 0 6px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.08);
  transition: width .35s ease;
}

/* -------- Content Blocks -------- */
.content{ display:grid; gap:14px; margin: 14px 0 8px; }
.content-block{
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffef9;
}
.content-block h3{
  margin:0 0 6px 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight:700;
  color:#584b3c;
}
.content-block p{ margin:0; white-space:pre-wrap; }

/* -------- Alerts -------- */
.alert{
  border: 1px solid #e6d6b8;
  background: linear-gradient(#fff, #fff7e9);
  color:#5b4a33;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight:600;
}

/* -------- Utility -------- */
.hidden{ display:none !important; }

/* -------- SumDay Widget -------- */
.sumday{
  position: fixed;
  bottom: 16px; right: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  display:flex; align-items:center; gap:8px;
}
.sumday input{
  width: 80px;
}

/* -------- Accessibility -------- */
a{ color: var(--primary-80); text-decoration: none; }
a:hover{ text-decoration: underline; }

button:focus,
a:focus,
input:focus{
  outline: none;
  box-shadow: var(--ring);
}

/* -------- Logo / Sigillo -------- */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.logo svg {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
  border-radius: 50%;
}

/* -------- Responsive -------- */
@media (max-width: 700px){
  header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .right{
    width:100%;
    justify-content:flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .right .pill{
    order: 0;
  }
  .right .header-btn{
    order: 1;
    padding: 10px 12px;
    flex: 0 1 auto;
  }
  .right #logoutBtn{
    order: 2;
  }
}

/* -------- Animations (gentle) -------- */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* Quando la pagina è pronta, animiamo i blocchi principali */
html.ready .card {
  animation: riseIn .55s ease both;
}
html.ready #authCard { animation-delay: .05s }
html.ready #appCard  { animation-delay: .05s }

/* Progress bar già ha transition sulla width.
   Aggiungiamo un piccolo fade-in iniziale per la track */
html.ready .progress { animation: fadeIn .6s ease both .15s }

/* Contenuti del giorno: piccola salita con scalettatura */
html.ready .content-block { animation: riseIn .45s ease both }
html.ready .content-block:nth-child(1) { animation-delay: .02s }
html.ready .content-block:nth-child(2) { animation-delay: .06s }
html.ready .content-block:nth-child(3) { animation-delay: .10s }
html.ready .content-block:nth-child(4) { animation-delay: .14s }
html.ready .content-block:nth-child(5) { animation-delay: .18s }

/* Pulsanti: micro “press” al mount */
html.ready button {
  animation: fadeIn .35s ease both .1s;
}

/* Banner finale: entra con maggiore enfasi ma sempre soft */
#endBanner {
  transform: translateY(0);
  opacity: 1;
}
html.ready #endBanner:not(.hidden) {
  animation: riseIn .5s ease both .05s;
}

/* Rispetto dell’accessibilità */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  html.ready .card,
  html.ready .content-block,
  html.ready .progress,
  html.ready button,
  html.ready #endBanner {
    animation: none !important;
  }
}