/* Life in Weeks - custom styles */

/* top toolbar */
.topbar{display:flex;justify-content:flex-end;margin-bottom:-6px}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:6px 10px;font-size:1.1rem;line-height:1}
.icon-btn:hover{filter:none;background:var(--bg)}

/* dark mode */
[data-theme="dark"]{
  --bg:#1c1a18; --surface:#262320; --ink:#ece5db; --soft:#9a9086; --line:#3a352f;
  --accent:#d99a6a; --accent-ink:#1c1a18; --shadow:0 6px 24px rgba(0,0,0,.4);
}
[data-theme="dark"] .stat{background:#1c1a18}
[data-theme="dark"] .progress{background:#1c1a18}
[data-theme="dark"] .wall .cell{background:#3a352f;border-color:#453f38}
[data-theme="dark"] .wall .cell.future{background:#3a352f;border-color:#453f38}
[data-theme="dark"] .wall .cell.now{box-shadow:0 0 0 2px #1c1a18,0 0 0 4px var(--accent)}
[data-theme="dark"] .wall .cell.now{animation:breatheDark 2.2s ease-in-out infinite}
@keyframes breatheDark{
  0%,100%{box-shadow:0 0 0 2px #1c1a18,0 0 0 4px var(--accent)}
  50%{box-shadow:0 0 0 2px #1c1a18,0 0 0 8px rgba(217,154,106,.5)}
}
[data-theme="dark"] .wall .cell.highlight::after{color:#f0d98a}
[data-theme="dark"] .modal-mask{background:rgba(0,0,0,.55)}
[data-theme="dark"] .sw.future{background:#3a352f;border-color:#453f38}

.stats-row{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;
  margin-bottom:16px;
}
.stat{flex:1;min-width:110px;text-align:center;padding:10px 6px;
  background:var(--bg);border-radius:12px;}
.stat .num{font-size:1.6rem;font-weight:800;color:var(--accent);line-height:1.1}
.stat .lbl{font-size:.8rem;color:var(--soft);margin-top:4px}

.progress{height:10px;background:var(--bg);border-radius:999px;overflow:hidden}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#e0a06a);
  border-radius:999px;transition:width .6s ease}

.legend{display:flex;gap:18px;justify-content:center;margin-bottom:14px;flex-wrap:wrap;
  font-size:.82rem;color:var(--soft)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend.stages{margin-bottom:16px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.sw.done{background:var(--accent)}
.sw.now{background:#e0a06a;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.sw.future{background:#efe7db;border:1px solid #e2d6c4}
/* stage colours */
.sw.st-child{background:#7fb8d8}
.sw.st-school{background:#8fc98a}
.sw.st-work{background:#e0a06a}
.sw.st-retire{background:#b9a3d8}
.sw.highlight{background:#f0c75e}

/* the wall: one row per year, 52 squares per row */
.wall{display:grid;grid-template-columns:repeat(52,1fr);gap:2px;margin-top:4px}
.wall .cell{aspect-ratio:1;border-radius:2px;background:#efe7db;border:1px solid #e6dac8;
  transition:transform .12s}
/* lived squares are coloured by stage */
.wall .cell.done.st-child{background:#7fb8d8;border-color:#7fb8d8}
.wall .cell.done.st-school{background:#8fc98a;border-color:#8fc98a}
.wall .cell.done.st-work{background:#e0a06a;border-color:#e0a06a}
.wall .cell.done.st-retire{background:#b9a3d8;border-color:#b9a3d8}
.wall .cell.now{background:#e0a06a;border-color:#d08a4e;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent);z-index:1}
.wall .cell:hover{transform:scale(1.35);z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* squares with a logged highlight */
.wall .cell.highlight{background:#f0c75e;border-color:#e6b23c}
.wall .cell.highlight.st-child{background:#f0c75e;border-color:#e6b23c}
.wall .cell.highlight.st-school{background:#f0c75e;border-color:#e6b23c}
.wall .cell.highlight.st-work{background:#f0c75e;border-color:#e6b23c}
.wall .cell.highlight.st-retire{background:#f0c75e;border-color:#e6b23c}
.wall .cell.highlight::after{content:'✦';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:9px;color:#8a6d1a}
.wall .cell{position:relative}

/* breathing animation on this week */
.wall .cell.now{animation:breathe 2.2s ease-in-out infinite}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
  50%{box-shadow:0 0 0 2px #fff,0 0 0 8px rgba(224,160,106,.55)}
}

/* highlight dialog */
.modal-mask{position:fixed;inset:0;background:rgba(40,30,20,.45);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal-mask[hidden]{display:none}
.modal{background:var(--surface);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);
  padding:22px;width:100%;max-width:420px}
.modal h3{margin-bottom:4px}
.modal textarea{resize:vertical;min-height:80px}

@media(max-width:600px){
  .wall{gap:1.5px}
  .wall .cell{border-radius:1.5px}
}