:root{
  --bg:#faf7f4; --card:#ffffff; --ink:#241d19; --muted:#8a7d74;
  --accent:#b8825a; --accent-soft:#f3e7dc; --line:#ece3da; --hook:#7a5a3c;
  --done:#3f8a4f; --done-soft:#eef7f0; --done-line:#c8e6cf;
  --shadow:0 1px 3px rgba(60,40,25,.06),0 8px 28px rgba(60,40,25,.05);
  --shadow-card:0 4px 14px rgba(60,40,25,.12);
  --labelcol:104px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.62; font-size:16px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px; margin:0 auto; padding:32px 16px 72px}
@media(min-width:700px){ .wrap{padding:44px 20px 90px} }
header.top{margin-bottom:22px}
.eyebrow{letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--accent); font-weight:700; margin:0 0 10px}
h1{font-size:30px; line-height:1.2; margin:0 0 12px; font-weight:750; letter-spacing:-.01em}
.lede{color:var(--muted); margin:0; max-width:64ch}
.lede b{color:var(--ink)}

/* ===================== START-HERE PATHS — the primary focus ===================== */
.paths{display:grid; gap:14px; margin:26px 0 0}
@media(min-width:640px){ .paths{grid-template-columns:1fr 1fr; gap:16px} }
/* whole card is a big, obvious tappable link */
a.path{
  display:flex; flex-direction:column; margin:0; padding:24px 22px; background:#fff;
  border:2px solid var(--line); border-radius:18px; text-decoration:none; color:inherit;
  cursor:pointer; box-shadow:var(--shadow-card); transition:.15s; min-height:100%;
}
a.path:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 30px rgba(60,40,25,.14)}
a.path:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.path .tag{
  display:inline-block; align-self:flex-start; font-size:12px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--hook);
  background:var(--accent-soft); padding:5px 12px; border-radius:999px; margin:0 0 12px;
}
.path p{margin:0 0 16px; font-size:16px; line-height:1.5; color:#5c5049}
.path-go{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto;
  font-size:16px; font-weight:800; letter-spacing:.01em; color:var(--accent);
}
a.path:hover .path-go{text-decoration:underline}

/* Browse all weeks — secondary link (quieter than the two paths) */
.browse-all{
  display:block; text-align:center; margin:16px 0 0; padding:13px 20px;
  background:#fff; color:var(--accent); font-size:15px; font-weight:700; letter-spacing:.01em;
  border:1px solid var(--line); border-radius:12px; text-decoration:none; box-shadow:var(--shadow); transition:.15s;
}
.browse-all:hover{background:var(--accent-soft); border-color:var(--accent)}
.browse-all:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Collapsible info toggles — Instructions / Theme of the Week */
details.info{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  margin:12px 0 0; box-shadow:var(--shadow); overflow:hidden;
}
details.info > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hook);
}
details.info > summary::-webkit-details-marker{display:none}
details.info > summary::before{
  content:'▶'; flex:none; font-size:11px; color:var(--accent); transition:transform .2s;
}
details.info[open] > summary::before{transform:rotate(90deg)}
details.info > summary:hover{background:#fbf7f2}
details.info > p{margin:0; padding:2px 16px 16px; font-size:14px; line-height:1.55; color:#5c5049}
details.info > p b{color:var(--ink)}
details.info > p mark.ph{}

/* Drop-level guardrail note — collapsed by default so a long note can't bury the content */
details.note{
  background:#fdf8f1; border:1px solid #ecdfc9; border-radius:10px;
  margin:0 0 14px; overflow:hidden;
}
details.note > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:8px; padding:10px 13px;
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8a6a3b;
}
details.note > summary::-webkit-details-marker{display:none}
details.note > summary::after{
  content:'▶'; margin-left:auto; flex:none; font-size:10px; color:#b9935c; transition:transform .2s;
}
details.note[open] > summary::after{transform:rotate(90deg)}
details.note > summary:hover{background:#faf1e2}
details.note > p{
  margin:0; padding:0 13px 13px; font-size:13.5px; line-height:1.55; color:#6b5a49;
}
details.note > p strong{color:var(--ink)}

/* Content Plan — section divider between the reference toggles and the drops */
.section-head{
  font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent);
  font-weight:800; margin:28px 0 0; padding-bottom:10px; border-bottom:2px solid var(--line);
}

.weekswitch{display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 4px}
.wbtn{
  font-size:14px; font-weight:650; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:11px 16px; cursor:pointer; transition:.15s
}
.wbtn:hover{background:var(--accent-soft)}
.wbtn.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.theme{margin:14px 2px 4px; color:var(--muted); font-size:13px}
.theme b{color:var(--hook)}

.cheat{
  background:#fbf4ec; border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0; padding:16px 18px; margin:16px 0 6px;
}
.cheat h3{font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin:0 0 4px; color:var(--hook)}
.cheat .sub{font-size:13.5px; color:var(--muted); margin:0 0 12px}
.cheat .row{margin:0 0 10px; font-size:14.5px; color:#5c5049}
.cheat .row:last-child{margin-bottom:0}
.cheat .row b{color:var(--ink)}
.cheat .row .line{display:block; color:var(--hook); font-style:italic; margin-top:2px}
.cheat .guide{margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--line); font-size:14px; color:#5c5049}

.controls{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 6px; align-items:center}
.controls input[type=text]{
  flex:1 1 220px; padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  font-size:15px; background:#fff; color:var(--ink)
}
.controls input[type=text]:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.btn{
  font-size:13px; font-weight:600; color:var(--accent); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; cursor:pointer; transition:.15s
}
.btn:hover{background:var(--accent-soft)}
.barwrap{display:flex; align-items:center; gap:12px; margin:14px 2px 4px}
.bar{flex:1; height:8px; background:#eee4da; border-radius:999px; overflow:hidden}
.bar > span{display:block; height:100%; width:0; background:var(--done); border-radius:999px; transition:width .35s}
.barlabel{font-size:13px; color:var(--muted); white-space:nowrap}
.count{color:var(--muted); font-size:13px; margin:6px 2px 0}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  margin:12px 0; box-shadow:var(--shadow); overflow:hidden; transition:border-color .15s;
}
.card.posted{border-color:var(--done-line); background:linear-gradient(0deg,var(--done-soft),#fff 60%)}
.summary{display:flex; align-items:center; gap:12px; padding:16px 18px; cursor:pointer; user-select:none}
.summary:hover{background:#fbf7f2}
.card.posted .summary:hover{background:#eaf5ec}
.chev{flex:none; width:16px; color:var(--muted); transition:transform .2s; font-size:13px}
.card.open .chev{transform:rotate(90deg)}
.num{
  flex:none; width:28px; height:28px; border-radius:8px; background:var(--accent);
  color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;
}
.card.posted .num{background:var(--done)}
.stitle{flex:1; font-size:13.5px; font-weight:650; line-height:1.3; letter-spacing:-.01em; min-width:0}
@media(min-width:700px){ .stitle{font-size:14.5px} }
.card.posted .stitle{color:#3c6b46}
.rec{flex:none; display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600}
.rec input{width:17px; height:17px; accent-color:var(--done); cursor:pointer}
.rec label{cursor:pointer}

.body{max-height:0; overflow:hidden; transition:max-height .3s ease}
.body-inner{padding:2px 14px 20px 14px}
@media(min-width:700px){ .body-inner{padding:2px 20px 22px 20px} }

.fmttoggle{display:flex; gap:6px; flex-wrap:nowrap; margin:12px 0 4px}
.fbtn{
  flex:1 1 0; min-width:0; text-align:center; white-space:nowrap;
  font-size:12.5px; font-weight:600; color:var(--hook); background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:10px 6px; cursor:pointer; transition:.15s
}
@media(min-width:700px){ .fbtn{padding:8px 6px} }
.fbtn:hover{background:var(--accent-soft)}
.fbtn.active{background:var(--hook); color:#fff; border-color:var(--hook)}
.fmt-block{display:none; margin-top:8px}
.fmt-block.show{display:block}

.goal{font-size:13px; line-height:1.5; color:var(--muted); font-style:italic; margin:6px 0 4px}
/* ONE label style — every band/section label in all three format views */
.label{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--hook); font-weight:700; margin:14px 0 6px}
.hook{
  font-size:15.5px; font-weight:600; color:var(--hook); background:#fbf4ec;
  border-left:3px solid var(--accent); padding:10px 14px; border-radius:0 8px 8px 0; margin:2px 0 0
}
.hooksub{font-size:14px; color:#5c5049; margin:6px 0 0}
.hooksub b{color:var(--ink)}

ol.frames{margin:2px 0 0; padding-left:0; list-style:none; counter-reset:fr}
ol.frames li{position:relative; padding:9px 0 9px 40px; border-bottom:1px solid var(--line); counter-increment:fr}
ol.frames li:last-child{border-bottom:none}
ol.frames li::before{
  content:counter(fr); position:absolute; left:0; top:9px; width:24px; height:24px;
  background:var(--accent-soft); color:var(--hook); border-radius:7px; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.vis{display:block; font-size:12.5px; color:var(--accent); font-weight:600; margin-bottom:2px}
.copytxt{display:block; color:var(--ink)}

ol.slides{margin:2px 0 0; padding-left:0; list-style:none}
ol.slides li{padding:11px 0; border-bottom:1px solid var(--line)}
ol.slides li:last-child{border-bottom:none}
.slabel{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--accent); padding:2px 9px; border-radius:6px; margin-bottom:6px}
.slide-img{font-size:14px; color:#5c5049; margin:0 0 4px}
.slide-txt{font-size:14.5px; color:var(--ink); margin:0}
.slide-img b, .slide-txt b{color:var(--ink)}

.scene{padding:9px 0; border-bottom:1px solid var(--line)}
.scene:last-child{border-bottom:none}
.scene .sd{font-size:13px; color:var(--accent); font-weight:600; margin-bottom:2px}
.scene .vo{color:var(--ink); margin:0 0 3px}
.scene .ov{font-size:13px; color:var(--muted); margin:0}
.scene .ov b{color:var(--hook)}

/* ===================== REEL — swipe strip (matches story/carousel) ===================== */
.reelseq{
  display:flex; gap:12px; align-items:stretch; overflow-x:auto; overflow-y:hidden;
  padding:10px 2px 14px; margin:4px 0 0; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.reelseq::-webkit-scrollbar{height:8px}
.reelseq::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px}
.rframe{
  position:relative; flex:0 0 auto; width:204px; min-height:320px; scroll-snap-align:start;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
}
/* badge / tag / copy pill — same placement as story & carousel mock-ups */
.rframe .n-badge{position:absolute; top:9px; left:9px; z-index:2}
.rframe .tagpill{position:absolute; top:9px; left:42px; z-index:2}
.rframe .mini-copy{position:absolute; top:8px; right:8px; z-index:3}
/* hook = card #1, visually marked but part of the same grid */
.rframe.hook{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft),var(--shadow-card)}
.rframe.hook .n-badge{background:var(--accent)}
/* the three bands stack vertically inside each card */
.rframe-bands{display:flex; flex-direction:column; flex:1}
.rband{padding:9px 11px 10px; display:flex; flex-direction:column; gap:2px; min-width:0}
.rband + .rband{border-top:1px solid var(--line)}
/* clear the absolute badge (+tagpill on the hook) in the first band */
.rframe-bands .rband:first-child{padding-top:38px}
.rframe.hook .rframe-bands .rband:first-child{padding-top:38px}
.rband-k{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--hook)}
.rband-v{font-size:12.5px; line-height:1.42; min-width:0; word-break:break-word}
.rband-empty{opacity:.5}
/* band — FILM: warm camera/footage tint; grows to fill the card like the
   story photo area, so cards in a row stay equal-height */
.rband.film{flex:1; color:#fff; background:linear-gradient(158deg,#5a3f2c 0%,#8a6240 55%,#b5854f 100%)}
.rband.film .rband-k{color:#ffe6c9}
.rband.film .rband-v{color:rgba(255,255,255,.95); text-shadow:0 1px 2px rgba(0,0,0,.3)}
/* band — SAY */
.rband.say{background:#fdfbf9; color:var(--ink)}
.rband.say .rband-v{color:#4a4038; font-style:italic}
.rframe.hook .rband.say{flex:1}
/* band — ON SCREEN */
.rband.screen{background:#f4ece2; color:var(--ink)}
.rband.screen .rband-v{font-weight:600; color:var(--hook)}
.rband mark.ph{background:#fdeecf; color:#7a5a1c}
.rband.film mark.ph{background:rgba(255,255,255,.92); color:#7a5a1c}

/* ---- PART 2 — secondary sub-toggle (visually lighter than .fbtn) ---- */
.subtoggle{display:flex; gap:6px; flex-wrap:nowrap; margin:6px 0 0}
.sbtn{
  flex:1 1 0; min-width:0; text-align:center; white-space:nowrap;
  font-size:12px; font-weight:600; color:var(--muted); background:var(--bg);
  border:1px solid var(--line); border-radius:8px; padding:10px 4px; cursor:pointer; transition:.15s;
}
@media(min-width:700px){ .sbtn{padding:7px 6px} }
.sbtn:hover{background:var(--accent-soft); color:var(--hook)}
.sbtn.active{background:#fff; color:var(--hook); border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent)}
.rview-block{display:none; margin-top:12px}
.rview-block.show{display:block}
/* sub-view header row: label left, copy button top-right — no scrolling to copy */
.rview-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0 6px}
.rview-head .label{margin:0}

/* sub-view: Shooting list */
ol.shootlist{margin:10px 0 0; padding-left:0; list-style:none; counter-reset:sh}
ol.shootlist li{
  position:relative; padding:8px 0 8px 34px; border-bottom:1px solid var(--line);
  counter-increment:sh; font-size:13.5px; line-height:1.45; color:var(--ink);
}
ol.shootlist li:last-child{border-bottom:none}
ol.shootlist li::before{
  content:counter(sh); position:absolute; left:0; top:8px; width:22px; height:22px;
  background:var(--accent-soft); color:var(--hook); border-radius:7px; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.shoot-cue{display:block; margin-top:3px; font-size:13px; color:var(--hook)}

/* sub-view: Voice-over script */
.voscript{
  background:#fdfbf9; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:14px; line-height:1.55; color:var(--ink);
}
.voscript p{margin:0 0 8px}
.voscript p:first-child{font-weight:600; color:var(--hook)}
.voscript p:last-child{margin-bottom:0}

/* POST DETAILS footer */
.postdetails{margin-top:16px; padding-top:6px; border-top:1px dashed var(--line)}
.pd-head{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  font-weight:700; margin:14px 0 8px;
}
/* mobile-first: label on its own line, value full-width beneath */
.pd-block{
  background:#fdfbf9; border:1px solid var(--line); border-radius:10px;
  padding:11px 14px 12px; margin:0 0 8px;
}
.pd-block:last-child{margin-bottom:0}
.pd-k{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--hook); margin:0 0 4px;
}
.pd-v{color:var(--ink); font-size:13.5px; line-height:1.5; word-break:break-word; min-width:0}
@media(min-width:700px){
  .pd-block{display:grid; grid-template-columns:var(--labelcol) 1fr; column-gap:10px; padding:10px 13px}
  .pd-k{margin:0; padding-top:3px}
}
.pd-v.cap p{margin:0 0 6px}
.pd-v.cap p:last-child{margin-bottom:0}
.pd-v .htags{display:block; margin:0}

.cap{white-space:normal; margin:2px 0 0; font-size:13.5px; line-height:1.45}
.cap p{margin:0 0 6px}
.cap p:last-child{margin-bottom:0}
.plain{margin:2px 0 0}
.htags{font-size:13px; line-height:1.5; color:#5c5049; background:#f6f1ec; border:1px dashed var(--line); padding:9px 12px; border-radius:10px; margin:6px 0 0; word-break:break-word}
.vari{border:1px solid var(--line); border-radius:12px; padding:4px 12px 12px; margin:12px 0 0; background:#fdfbf9}
@media(min-width:700px){ .vari{padding:4px 15px 15px} }
.varihead{font-size:12.5px; font-weight:700; color:var(--hook); margin:12px 0 0; letter-spacing:.02em}

/* ===================== SHARED mock-up components =====================
   ONE number badge, ONE tag pill, ONE copy pill — used by story frames,
   carousel slides and reel shots alike. */
.n-badge{
  flex:none; width:22px; height:22px; border-radius:7px;
  background:rgba(0,0,0,.45); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.story .n-badge,.slide .n-badge{position:absolute; top:9px; left:9px; z-index:2}
.tagpill{
  flex:none; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--hook);
  border:1px solid var(--line); box-shadow:0 2px 6px rgba(0,0,0,.14); white-space:nowrap;
}
.story .tagpill,.slide .tagpill{position:absolute; top:9px; left:39px; z-index:2}
.mini-copy{
  flex:none; font-size:10.5px; font-weight:700; line-height:1; letter-spacing:.02em;
  padding:5px 10px; border-radius:999px; cursor:pointer; transition:.15s;
  background:rgba(255,255,255,.94); color:var(--hook);
  border:1px solid var(--line); box-shadow:0 2px 6px rgba(0,0,0,.14); white-space:nowrap;
}
.mini-copy:hover{background:#fff}
.story .mini-copy,.slide .mini-copy{position:absolute; top:8px; right:8px; z-index:3}
.mini-copy.done{background:var(--done-soft); color:var(--done); border-color:var(--done-line); box-shadow:none}

/* swipe strips — story + carousel only (they mimic the real media) */
.storystrip,.carostrip{
  display:flex; gap:12px; align-items:stretch; overflow-x:auto; overflow-y:hidden;
  padding:10px 2px 14px; margin:4px 0 0; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.storystrip::-webkit-scrollbar,.carostrip::-webkit-scrollbar{height:8px}
.storystrip::-webkit-scrollbar-thumb,.carostrip::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px}

/* ===================== STORYTELLING mock-ups ===================== */
.story{
  position:relative; flex:0 0 auto; width:172px; height:320px; scroll-snap-align:start;
  border-radius:14px; overflow:hidden; color:#fff; padding:12px 12px 14px;
  display:flex; flex-direction:column; border:1px solid var(--line);
  background:linear-gradient(158deg,#5a3f2c 0%,#8a6240 42%,#c79a63 78%,#e6c98f 100%);
  box-shadow:var(--shadow-card);
}
.story-shoot{
  margin-top:26px; font-size:10.5px; font-style:italic; line-height:1.35;
  color:rgba(255,255,255,.86); text-shadow:0 1px 2px rgba(0,0,0,.32);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.story .tagpill ~ .story-shoot{margin-top:26px}
.story-overlay{
  margin-top:auto; font-size:12.5px; line-height:1.4; text-align:center; font-weight:600;
  background:rgba(0,0,0,.34); border-radius:12px; padding:9px 10px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  text-shadow:0 1px 3px rgba(0,0,0,.32);
}
.story-overlay mark.ph{background:rgba(255,255,255,.92); color:#7a5a1c}

/* ===================== CAROUSEL mock-ups ===================== */
.slide{
  position:relative; flex:0 0 auto; width:204px; height:330px; scroll-snap-align:start;
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-card); display:flex; flex-direction:column;
}
.slide-photo{
  height:104px; flex:none; padding:10px 12px; display:flex; align-items:flex-end; overflow:hidden;
  background:linear-gradient(155deg,#efe0cf 0%,#e4c79b 55%,#d9ad72 100%);
}
.slide-shoot{font-size:10.5px; font-style:italic; line-height:1.32; color:#6b4d33;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.slide .tagpill ~ .slide-photo .slide-shoot{-webkit-line-clamp:2}
.slide-body{padding:11px 13px 14px; font-size:12.5px; line-height:1.42; color:var(--ink); flex:1; overflow-y:auto}
.slide.cover .slide-body{font-size:13.5px; font-weight:700; color:var(--hook)}
.slide.cta{box-shadow:0 0 0 2px var(--accent-soft),var(--shadow-card)}
.slide.cta .slide-photo{background:linear-gradient(155deg,#c79a63 0%,#b8825a 60%,#9c6a42 100%)}
.slide.cta .slide-shoot{color:#fbf1e4}
.slide.cta .slide-body strong{color:var(--accent)}

mark.ph{background:#fdeecf; color:#7a5a1c; padding:0 3px; border-radius:3px; font-weight:600}
.copybtn{
  flex:none; font-size:11px; font-weight:700; line-height:1; letter-spacing:.02em; color:var(--hook); background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer; transition:.15s;
}
.copybtn:hover{background:var(--accent-soft)}
.copybtn.done{color:var(--done); border-color:var(--done-line); background:var(--done-soft)}

footer{margin-top:34px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13.5px}
a{color:var(--accent)}
.hidden{display:none !important}
@media(min-width:620px){ h1{font-size:34px} }
@media(max-width:520px){
  /* keep number + title on the SAME line; title wraps its own text, Posted stays right */
  .summary{flex-wrap:nowrap; gap:9px; padding:14px 13px}
  .stitle{flex:1 1 auto; min-width:0; font-size:12.5px; line-height:1.28}
  .rec{flex:none; gap:5px; font-size:11.5px}
  .rec input{width:16px; height:16px}
  .chev{width:13px}
  .num{width:25px; height:25px}
}

/* ===================== DIRECTORY PAGE ADDITIONS ===================== */
/* Email — slim secondary bar below the paths (quieter than the path cards) */
.emailbar{margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line)}
/* prominent variant — pinned near the top so students notice save/recover */
.emailbar.top{
  margin:18px 0 4px; padding:16px 18px; border-top:none;
  background:var(--accent-soft); border:1px solid var(--line); border-radius:14px;
}
.emailbar.top .emailhint{color:#5c5049}
.emailbar.top .emailhint.recover{color:var(--hook); font-weight:600}
.emailrow{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0;
}
.emailrow input[type=email]{
  flex:1 1 240px; padding:10px 13px; border:1px solid var(--line); border-radius:10px;
  font-size:15px; background:#fff; color:var(--ink)
}
.emailrow input[type=email]:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.emailrow .btn{padding:10px 18px; font-size:14px}
.emailrow .synced{flex:1 1 240px; font-size:14px; color:var(--done); font-weight:650; display:flex; align-items:center; gap:8px}
.emailrow .synced .chg{color:var(--accent); font-weight:600; cursor:pointer; text-decoration:underline}
.emailhint{font-size:12.5px; color:var(--muted); margin:8px 2px 0}
.emailhint.recover{margin-top:4px}
.emailhint.err{color:#b4462f}

/* Overall progress — small/subtle line, not a big card */
.overallstat{
  margin:20px 2px 0; font-size:13.5px; line-height:1.5; color:var(--muted);
}
.overallstat b{color:var(--hook)}
.overallstat .big{font-size:18px; font-weight:750; color:var(--done); letter-spacing:-.01em}

.phase{margin:28px 0 0}
.phase h2{
  font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent);
  font-weight:700; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line)
}

.weekcard{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; margin:10px 0; box-shadow:var(--shadow); transition:.15s;
}
a.weekcard:hover{border-color:var(--accent); transform:translateY(-1px)}
.weekcard.complete{border-color:var(--done-line); background:linear-gradient(0deg,var(--done-soft),#fff 70%)}
.weekcard.current{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}
.weekcard.locked{opacity:.55; cursor:default; pointer-events:none; background:#f7f2ec}
.wc-main{flex:1; min-width:0}
.wc-label{font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0 0 3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.wc-theme{font-size:13.5px; color:var(--muted); margin:0}
.wc-badge{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--hook);
}
.wc-badge.current{background:var(--accent); color:#fff}
.wc-badge.soon{background:#eee4da; color:var(--muted)}
.wc-progress{flex:none; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.wc-count{font-size:14px; font-weight:700; color:var(--hook); white-space:nowrap}
.weekcard.complete .wc-count{color:var(--done)}
.wc-check{font-size:16px; color:var(--done)}
.wc-arrow{flex:none; color:var(--accent); font-size:18px}
.weekcard.locked .wc-arrow{color:var(--muted)}

.catchup-card{margin-top:6px}
.catchup-card .wc-badge{background:var(--hook); color:#fff}

@media(max-width:520px){
  .weekcard{gap:10px; padding:14px}
  .wc-arrow{display:none}
}