/* styles/layout.css */

/* -------- App chrome -------- */
:root{
  --maxw: 960px;
  --border: rgba(255,255,255,.14);
  --muted: #a6b4cf;
  --ink: #e9f0ff;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(14px) saturate(130%);
  background:linear-gradient(to bottom, rgba(10,14,24,.75), rgba(10,14,24,.30));
  border-bottom:1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

/* -------- Header row (desktop/tablet) -------- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:16px 0;
}

/* left / center / right slots */
.nav .left{ display:flex; align-items:center; min-width:0; }
#session-timer{
  flex:1;
  text-align:center;
  font-weight:600;
}
.nav .right{ display:flex; align-items:center; gap:.5rem; min-width:0; }

.right{ display:flex; align-items:center; gap:12px; }
header h1{ margin:0; font-weight:800; letter-spacing:.01em; font-size:clamp(22px,3vw,30px); }
.whoami{ color:#cfe3ff; font-size:.9rem; }
.clock{ color:var(--muted); font-variant-numeric:tabular-nums; }
.back{
  border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:var(--ink); border-radius:999px; padding:8px 14px; cursor:pointer;
}

/* status bar */
.status-bar{
  display:block; width:100%; padding:10px 24px;
  background:rgba(255,255,255,.06);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  color:#cfe3ff; font-size:.95rem;
}

/* -------- Pages & transitions -------- */
main{ padding:12px 0 40px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.page{ display:none; }
.page[hidden]{ display:none !important; }
.page.active{ display:block; }
.page.enter-forward{ animation:slideInLeft .18s ease both; }
.page.leave-forward{ animation:slideOutLeft .18s ease both; }
.page.enter-back{ animation:slideInRight .18s ease both; }
.page.leave-back{ animation:slideOutRight .18s ease both; }

/* animations */
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
@keyframes slideInLeft{ from{opacity:0; transform:translateX(12px)} to{opacity:1; transform:translateX(0)} }
@keyframes slideOutLeft{ from{opacity:1; transform:translateX(0)} to{opacity:0; transform:translateX(-12px)} }
@keyframes slideInRight{ from{opacity:0; transform:translateX(-12px)} to{opacity:1; transform:translateX(0)} }
@keyframes slideOutRight{ from{opacity:1; transform:translateX(0)} to{opacity:0; transform:translateX(12px)} }

/* -------- Responsive -------- */
@media (max-width:980px){
  .tiles{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width:680px){
  header h1{ font-size:20px; }
  .tile{ min-height:136px; }
  .title{ font-size:clamp(15px,3.8vw,18px); }
  .gallery-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .todo-form .composer{ grid-template-columns:1fr; }
}

/* --- Mobile-first header fix (iPhone widths) --- */
@media (max-width:540px){
  /* Switch header to grid: back | clock | right  + full-width timer row */
  .nav{
    display:grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "back clock right"
      "timer timer timer";
    row-gap:8px;
    padding:12px 0;
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  #back-btn{ grid-area: back; }
  .nav .left{ grid-area: clock; }
  .nav .right{ grid-area: right; justify-content:flex-end; }
  #session-timer{ grid-area: timer; }

  .clock{ font-size:.85rem; }
  .whoami{
    max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:.8rem;
  }
}

/* ensure any fixed bottom UI has safe-area space (if you add one) */
.footer-safe { padding-bottom: env(safe-area-inset-bottom); }