/* offline.html: files kept on this device (js/pwa.js, sw.js) */
button{font:inherit;color:inherit}

.hero{position:relative;background:var(--mint);padding:56px 0 110px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.crumbs{font-weight:700;font-size:.9rem;opacity:.85}
.hero h1{font-size:clamp(3rem,9vw,6rem);font-weight:800;margin:10px 0 12px}
.hero h1 em{font-style:normal;background:var(--sun);padding:0 .2em;border-radius:.3em;display:inline-block;transform:rotate(-3deg)}
.hero p{font-size:1.15rem;max-width:32em;font-weight:600}
.chips{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.chip{background:#fff;font-weight:800;padding:8px 18px;border-radius:999px;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-size:.92rem}
.box{max-width:240px;margin-inline:auto;width:100%;aspect-ratio:1;background:#fff;border:3px solid var(--ink);border-radius:36px;box-shadow:0 9px 0 var(--ink);display:grid;place-items:center;transform:rotate(-4deg);animation:float 5s ease-in-out infinite}
.box b{font-size:6rem}
@keyframes float{50%{transform:translateY(-12px) rotate(-1deg)}}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:70px}

.tools{margin-top:46px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.tools h2{font-size:2.2rem;font-weight:800}
.clear{font-weight:800;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.clear:hover{background:#ffe3e3}
.clear[hidden]{display:none}

.grp{margin-top:28px}
.grp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.grp-head h2{font-size:1.6rem;font-weight:800;display:flex;align-items:center;gap:10px}
.grp-head h2 i{font-style:normal;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--sun);border:3px solid var(--ink);font-size:1.2rem}
.gn{font-weight:800;color:var(--muted);font-size:.9rem}
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.file{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:14px 16px;box-shadow:0 5px 0 var(--ink);display:flex;flex-direction:column;gap:10px;min-width:0}
.file.aud{background:#f5f2ff}
.file.on{background:#fff0c4}
.ft h3{font-size:1.05rem;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.ft small{display:block;color:var(--muted);font-weight:700;font-size:.82rem;margin-top:2px}
.fa{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto}
.act{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.85rem;padding:6px 14px;border-radius:999px;border:2px solid var(--ink);background:var(--sun);box-shadow:0 3px 0 var(--ink);cursor:pointer;transition:.12s}
.act:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.act.rm{background:#fff;margin-left:auto}
.act.rm:hover{background:#ffe3e3}
.empty{text-align:center;padding:40px 16px;font-weight:700;color:var(--muted);font-size:1.1rem;line-height:1.7}
.empty a{color:var(--grape);text-decoration:underline}
.note{color:var(--muted);font-weight:600;margin:8px 0 16px;max-width:52em}
#recent-box[hidden]{display:none}
#recent-box .rows{margin-bottom:10px}

/* this week's booklet: a tag on its entry */
.now-tag{display:inline-block;align-self:flex-start;background:var(--mint);border:2px solid var(--ink);border-radius:999px;font-weight:800;font-size:.75rem;padding:2px 10px;margin-bottom:6px;white-space:nowrap}
.file.now{background:#fff6dc;box-shadow:0 5px 0 var(--ink),0 0 0 3px var(--sun)}

footer{background:var(--ink);color:#d9d4ff;padding:36px 0;text-align:center;font-size:.9rem;margin-top:70px}

@media(max-width:760px){
  .hero{padding:36px 0 90px}
  .hero .wrap{grid-template-columns:1fr}
  .box{display:none}
  .tools h2{font-size:1.7rem}
  .rows{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.box{animation:none}}