/* Scholar’s Map – PhD Edition (Phase 1, Branded) */
:root {
  --navy:#0D1B2A;
  --emerald:#046865;
  --gold:#D4A017;
  --ivory:#FAF7F0;
  --ink:#1f2937;
  --muted:#6b7280;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--ivory);
}

/* Splash */
.splash{background:linear-gradient(180deg, var(--navy) 0%, #0b2740 60%, #0b2740 100%); color:#e6efff; display:flex; min-height:100vh}
.splash-wrap{margin:auto; max-width:900px; padding:2rem; width:100%}
.splash-header{text-align:center; margin-bottom:1rem}
.brand{margin:0; font-size:2.2rem; letter-spacing:0.3px}
.edition{font-weight:500}
.tagline{margin:0.25rem 0 0.75rem; color:#cfe2ff}
.splash-card{
  background:#0F2740; border:1px solid rgba(255,255,255,0.15); border-radius:16px; padding:1.2rem 1.2rem 1.4rem; box-shadow:0 6px 26px rgba(0,0,0,0.35);
}
.splash-card p{line-height:1.55}
.bullets{margin:0.75rem 0 1rem 1.1rem}
.launch{
  display:inline-block; background:var(--emerald); color:white; padding:0.7rem 1rem; border-radius:12px; text-decoration:none; font-weight:700;
  border:2px solid transparent;
}
.launch:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,0.25)}
.created-by{margin-top:0.6rem; color:#f8e7c2}

.splash-footer{margin-top:1rem; text-align:center; color:#bcd3ff}

/* App */
header{
  background:var(--navy);
  color:white;
  padding:1rem 1rem 0.5rem;
  position:sticky;
  top:0; z-index:10;
}
header h1{margin:0; font-weight:800; letter-spacing:0.2px}
header .edition{font-weight:500}
header .tagline{margin:0.25rem 0 0.75rem; color: #cfe2ff;}

nav{display:flex; flex-wrap:wrap; gap:0.5rem}
.nav-btn{
  border:1px solid rgba(255,255,255,0.4);
  background:transparent;
  color:white;
  padding:0.5rem 0.75rem;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
}
.nav-btn.active, .nav-btn:hover{background:white; color:var(--navy)}

main{padding:1rem; max-width:1100px; margin:0 auto}
.view{display:none}
.view.active{display:block}

.card{
  background:var(--card);
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:1rem;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  margin-bottom:1rem;
}
.grid.two{display:grid; grid-template-columns:1fr; gap:1rem}
@media(min-width:860px){.grid.two{grid-template-columns:1fr 1fr}}

.toolbar{display:flex; gap:0.5rem; margin:0.5rem 0}
input[type="search"], textarea{
  width:100%; padding:0.7rem 0.9rem; border:1px solid #d1d5db; border-radius:10px;
}
button{
  background:var(--emerald); color:white; border:none; border-radius:10px; padding:0.6rem 0.9rem; cursor:pointer;
}
button.secondary{background:#e5e7eb; color:#111827}
.actions{display:flex; align-items:center; gap:0.75rem; margin-top:0.5rem}

.list{list-style:none; padding:0; margin:0}
.list .item{
  padding:0.8rem 0.6rem; border-bottom:1px solid #eee; cursor:pointer;
}
.list .item:hover{background:#f8fafc}

.detail{background:var(--card); border:1px solid #e5e7eb; border-radius:12px; padding:1rem; margin-top:0.75rem}
.hidden{display:none}

.tag{display:inline-block; font-size:12px; background:#fff5db; color:#7a5a00; padding:2px 8px; border-radius:999px; margin-right:6px}

.stage{margin-bottom:1rem}
.stage h3{margin:0 0 0.25rem}
.task{display:flex; align-items:flex-start; gap:0.6rem; padding:0.5rem 0; border-bottom:1px dashed #eee}
.task input{margin-top:0.2rem}

.timeline{display:grid; gap:1rem}
.milestone{
  background:var(--card); border:1px solid #e5e7eb; border-radius:12px; padding:1rem;
}
.progress{
  height:10px; background:#e5e7eb; border-radius:8px; overflow:hidden; margin-top:0.5rem;
}
.progress > span{display:block; height:100%; background:var(--emerald); width:0%}

footer{
  text-align:center; padding:1rem; color:var(--muted);
}
.muted{color:var(--muted); font-size:0.9rem}