/* The Unit Plan Book as live fields (lesson pages and /units/). Uses the
   colour variables both site.css and app.css define. */
section.worksheet { background:#fff; border:1px solid var(--rule); border-radius:24px; padding:26px 28px 22px; margin:28px 0 10px; }
.wtop { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.worksheet h2 { font:600 24px/1.2 var(--sans); margin:2px 0 0; }
.wsub { color:var(--muted); font-size:15.5px; margin:6px 0 10px; }
.wu { font:500 14.5px var(--sans); color:var(--muted); display:flex; gap:12px; align-items:center; }
.wu select { font:500 14.5px var(--sans); padding:5px 8px; border-radius:8px; border:1px solid var(--rule); }
.wun { font-weight:600; color:var(--ink); }
.wf { padding:16px 0; border-top:1px solid var(--rule); }
.wl { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
.wl label { font:600 16px/1.3 var(--sans); color:var(--ink); }
.vis { font:500 12px var(--sans); padding:2px 9px; border-radius:99px; white-space:nowrap; }
.vis.priv { background:#f1ede4; color:#6b6457; }
.vis.shared { background:var(--teal-t); color:var(--teal-d); }
.wh { color:var(--muted); font-size:14.5px; margin:4px 0 8px; }
.wi textarea, .wi input, .wstart input { width:100%; border:1px solid var(--rule); border-radius:12px; padding:11px 13px;
  font:16px/1.55 var(--serif); background:#fffdf9; resize:vertical; }
.wi textarea:focus, .wi input:focus, .wstart input:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:transparent; background:#fff; }
.wi textarea:disabled, .wi input:disabled { background:#f6f3ec; color:var(--muted); }
.wn { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.wn b { width:26px; aspect-ratio:1/.866; clip-path:var(--hex); background:var(--gold); color:#3b2a00; display:grid; place-items:center; font:700 12px var(--sans); flex:none; }
.w2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sub { display:block; font:600 13px var(--sans); color:var(--muted); margin-bottom:5px; }
.wc { display:grid; grid-template-columns:150px 80px 1fr; gap:10px; align-items:center; margin-bottom:8px; }
.wc select { padding:9px; border-radius:10px; border:1px solid var(--rule); font:15px var(--sans); }
.wrep .wcard { border:1px solid var(--rule); border-radius:16px; padding:4px 16px 4px; margin:12px 0; background:#fffdf9; }
.wct { font:700 13px var(--sans); letter-spacing:1.2px; text-transform:uppercase; color:var(--gold-d, #8a6300); padding:12px 0 2px; }
.wrep .wcard .wf:first-of-type { border-top:0; }
.more, .share { background:none; border:1px dashed var(--rule); border-radius:12px; padding:9px 14px; font:600 14px var(--sans);
  color:var(--teal-d); cursor:pointer; margin-top:6px; }
.share { border-style:solid; margin-top:10px; }
.wst { display:block; font:500 13px var(--sans); color:var(--muted); margin-top:12px; min-height:1em; }
.wfb { background:var(--teal-t); border-radius:12px; padding:10px 14px; margin-top:10px; font-size:15px; }
.wfb .on { font:600 12px var(--sans); letter-spacing:1px; text-transform:uppercase; color:var(--teal-d); margin-bottom:4px; }
.wfb .linkish { background:none; border:0; padding:0; margin-top:6px; font:500 13.5px var(--sans); color:var(--teal-d); cursor:pointer; text-decoration:underline; }
.wlock { background:var(--gold-t); border-radius:12px; padding:10px 14px; font:500 15px var(--sans); }
.wlock.ok { background:var(--teal-t); color:var(--teal-d); }
.wstart { display:flex; flex-direction:column; gap:12px; font:600 14px var(--sans); max-width:34rem; }
.wstart label { display:flex; flex-direction:column; gap:6px; }
.wstart button, .wsubmit button { align-self:flex-start; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:11px 22px; font:600 15px var(--sans); cursor:pointer; }
.wstart p { font:400 16px var(--serif); color:var(--muted); }
.wprog { font:500 15px var(--sans); color:var(--muted); margin:6px 0 18px; }
.wprog b { color:var(--ink); }
.wsec details { background:#fff; border:1px solid var(--rule); border-radius:18px; margin:12px 0; }
.wsec summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; padding:15px 20px; font:600 17px var(--sans); }
.wsec summary::-webkit-details-marker { display:none; }
.wsec summary em { font:500 13.5px var(--sans); color:var(--muted); font-style:normal; }
.wsec .wbody { padding:0 20px 10px; }
.wsubmit { background:#fff; border:1px solid var(--rule); border-radius:20px; padding:22px 24px; margin:26px 0; }
.wsubmit h3 { font:600 20px var(--sans); margin-bottom:6px; } .wsubmit p { color:var(--muted); margin-bottom:14px; }
.ucard { display:block; background:#fff; border:1px solid var(--rule); border-radius:18px; padding:18px 20px 18px 70px; margin-bottom:12px;
  position:relative; text-decoration:none; color:var(--ink); font-family:var(--sans); }
.ucard .badge { position:absolute; left:20px; top:20px; width:34px; aspect-ratio:1/.866; clip-path:var(--hex); background:var(--gold); }
.ucard .hx-certified { background:var(--teal); } .ucard .hx-submitted { background:var(--pink, #f28ba2); }
.ucard b { display:block; font-size:18px; } .ucard span { display:block; color:var(--muted); font-size:14.5px; }
.ucard .ust { color:var(--teal-d); font-weight:600; margin-top:4px; }
@media (max-width:640px) { section.worksheet { padding:20px 16px; } .w2 { grid-template-columns:1fr; } .wc { grid-template-columns:1fr 70px; } .wc input { grid-column:1/-1; } }