/* Colours follow the Delight brand (delightcharity.org.uk theme settings):
   white pages, pink for actions, yellow and blue as accents.
   Light only - the brand is white-led, so there is no dark mode. */
:root{
  color-scheme:light;

  /* brand */
  --yellow:#feea00;
  --pink:#e5007d;
  --blue:#3babe2;

  /* tints and helpers built from the brand colours */
  --pink-tint:#fdeaf4;
  --pink-ink:#b00060;    /* brand pink is too light for small text on yellow */
  --blue-tint:#eef8fd;
  --blue-rule:#bfe3f5;
  --note-bg:#fffde8;     /* pale yellow for notes and comments */
  --note-rule:#ece3a0;

  /* neutrals */
  --paper:#ffffff;
  --card:#ffffff;
  --wash:#f5f5f4;        /* subtle grey fill for read-only boxes on white */
  --panel:var(--blue-tint);
  --panel-rule:var(--blue-rule);
  --ink:#262626;
  --muted:#5f5f5f;
  --rule:#dedede;
  --focus:#1a7fb5;       /* darker brand blue - the brand blue is too pale for a focus ring on white */
  --danger:#a3123f;

  --radius:6px;
  --display:"Montserrat","Segoe UI",system-ui,sans-serif;
  --body:"Montserrat","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;padding-bottom:96px;
  border-top:8px solid var(--yellow);   /* echoes the yellow header on the main site */
}
a{color:var(--pink)}

/* ---------- page shells ---------- */
.wrap{max-width:880px;margin:0 auto;padding:40px 20px 0}

.layout{
  max-width:1240px;margin:0 auto;padding:40px 24px 0;
  display:grid;grid-template-columns:minmax(0,1fr) 310px;
  gap:40px;align-items:start;
}
.layout .main{min-width:0}
.layout .main .wrap{max-width:none;margin:0;padding:0}

header h1{font-family:var(--display);font-weight:400;font-size:2rem;margin:0 0 6px;letter-spacing:-.01em}
header p{margin:0 0 32px;color:var(--muted);max-width:62ch}
.back{display:inline-block;margin-bottom:20px;font-size:.9rem;text-decoration:none}
.back:hover{text-decoration:underline}

label{display:block;font-size:.88rem;color:var(--muted);margin-bottom:5px}
input[type=text],textarea{
  width:100%;font-family:var(--body);font-size:1rem;
  color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:var(--radius);
  padding:10px 12px;line-height:1.5;
}
input[type=text]::placeholder,textarea::placeholder{color:#767676;opacity:1}
textarea{resize:vertical;min-height:110px}
input[type=text]:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;
}
.programme-name{margin-bottom:36px}
.programme-name input{font-family:var(--display);font-size:1.4rem;padding:14px 16px}

/* ---------- lessons and parts ---------- */
.lesson{margin:0 0 28px}
.lesson-head{display:flex;align-items:center;gap:14px;border-top:2px solid var(--pink);padding-top:14px}
.lesson-num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;
  font-family:var(--display);display:grid;place-items:center;font-size:1rem}
.lesson-head input{font-family:var(--display);font-size:1.15rem;border-color:transparent;
  background:transparent;padding-left:4px}
.lesson-head input:hover,.lesson-head input:focus{border-color:var(--rule);background:var(--card)}

.activities{margin:16px 0 0 47px;border-left:1px solid var(--rule);padding-left:24px}
.activity{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px}
.activity-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.activity-head .field{flex:1}
.field+.field{margin-top:14px}

.btnrow{display:flex;gap:4px;flex:none}
.icon{background:none;border:1px solid transparent;border-radius:4px;color:var(--muted);
  cursor:pointer;font-size:1rem;line-height:1;padding:6px 8px;font-family:var(--body)}
.icon:hover{border-color:var(--rule);color:var(--ink)}
.icon.del:hover{color:var(--danger);border-color:var(--danger)}
.icon[disabled]{opacity:.3;cursor:default}
.icon[disabled]:hover{border-color:transparent;color:var(--muted)}

.add{font-family:var(--body);font-size:.95rem;cursor:pointer;background:none;
  border:1px dashed var(--rule);border-radius:var(--radius);color:var(--muted);
  padding:10px 14px;width:100%;text-align:left}
.add:hover{border-color:var(--pink);color:var(--pink)}
.add-lesson{border-style:solid;border-width:2px;text-align:center;font-size:1rem;
  padding:14px;margin:8px 0 40px;color:var(--ink)}

.drop{border:1px dashed var(--rule);border-radius:var(--radius);padding:14px;text-align:center;
  color:var(--muted);font-size:.92rem;cursor:pointer;background:var(--wash)}
.drop:hover,.drop.over{border-color:var(--pink);color:var(--pink);background:var(--pink-tint)}
.files{list-style:none;margin:10px 0 0;padding:0}
.files li{display:flex;align-items:center;gap:10px;font-size:.92rem;padding:7px 10px;
  background:var(--pink-tint);border-radius:4px;margin-bottom:6px}
.files .nm{flex:1;word-break:break-all}
.files .nm a{color:var(--ink);text-decoration:none}
.files .nm a:hover{text-decoration:underline}
.files .sz{color:var(--muted);font-size:.82rem;flex:none}
.empty{color:var(--muted);font-style:italic;padding:6px 0 14px}

.notes textarea{background:var(--note-bg);border-color:var(--note-rule);border-left:4px solid var(--yellow)}

/* ---------- structure preview ---------- */
.preview{
  position:sticky;top:24px;
  background:var(--panel);border:1px solid var(--panel-rule);
  border-radius:var(--radius);padding:18px 18px 22px;
  max-height:calc(100vh - 130px);overflow:auto;
  font-size:.92rem;
}
.preview h2{font-family:var(--display);font-weight:400;font-size:1rem;margin:0 0 4px}
.preview .sub{color:var(--muted);font-size:.76rem;margin:0 0 16px;line-height:1.4}
.preview .pname{font-family:var(--display);font-size:.95rem;padding-bottom:11px;
  margin-bottom:12px;border-bottom:2px solid var(--pink);overflow-wrap:anywhere}
.preview ol{list-style:none;margin:0;padding:0}
.preview .pl{margin-bottom:13px}
.preview .plh{display:flex;gap:8px;align-items:baseline;line-height:1.35}
.preview .pn{flex:none;width:18px;height:18px;border-radius:50%;background:var(--pink);color:#fff;
  font-size:.66rem;display:grid;place-items:center;font-family:var(--display);transform:translateY(2px)}
.preview .pt{font-size:.86rem;font-weight:600;overflow-wrap:anywhere;min-width:0;cursor:pointer}
.preview .pt:hover{color:var(--pink)}
.preview .pp{list-style:none;margin:6px 0 0 26px;padding:0}
.preview .pp li{font-size:.8rem;color:var(--muted);padding:3px 0 3px 10px;
  border-left:1px solid var(--panel-rule);overflow-wrap:anywhere;cursor:pointer}
.preview .pp li:hover{color:var(--pink);border-color:var(--pink)}
.preview .pp li .meta{font-size:.7rem;opacity:.85}
.preview .ghost{color:var(--muted);font-style:italic;font-weight:400}
.preview .none{color:var(--muted);font-style:italic;font-size:.8rem;margin:0}

/* ---------- bottom bar ---------- */
/* yellow, like the main site's footer */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--yellow);padding:12px 20px}
.bar .inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.status{color:var(--muted);font-size:.88rem}
.status.saving{color:var(--pink)}
.status.error{color:var(--danger);font-weight:600}
.bar .status{color:var(--ink)}
.bar .status.saving{color:var(--pink-ink)}
.bar .status.error{color:var(--danger)}

/* pill buttons, matching the main site */
.btn{background:var(--pink);color:#fff;border:1px solid transparent;border-radius:100px;
  font-family:var(--body);font-size:.95rem;font-weight:700;padding:12px 26px;
  cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(.92)}
.btn[disabled]{opacity:.45;cursor:default;filter:none}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--pink);color:var(--pink);filter:none}
/* every button on the yellow bar is solid pink, as on the site footer */
.bar .btn.ghost{background:var(--pink);color:#fff;border-color:transparent}
.bar .btn.ghost:hover{color:#fff;filter:brightness(.92)}

/* ---------- programme list ---------- */
.plist{list-style:none;padding:0;margin:0 0 30px}
.plist li{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.plist .t{flex:1;min-width:200px}
.plist .t strong{font-family:var(--display);font-weight:600;font-size:1.1rem;display:block}
.plist .t span{color:var(--muted);font-size:.88rem}

details.help{margin:0 0 34px;border:1px solid var(--blue-rule);border-radius:var(--radius);background:var(--blue-tint)}
details.help summary{cursor:pointer;padding:12px 16px;font-weight:600}
details.help div{padding:0 16px 14px;color:var(--muted)}
details.help li{margin-bottom:6px}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  .preview{position:static;max-height:none;margin-bottom:28px;order:-1}
  .activities{margin-left:0;padding-left:14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- collapsible parts ---------- */
.toolbar{display:flex;gap:8px;align-items:center;margin:0 0 18px}
.toolbar button{font-family:var(--body);font-size:.82rem;cursor:pointer;background:none;
  border:1px solid var(--rule);border-radius:4px;color:var(--muted);padding:5px 11px}
.toolbar button:hover{border-color:var(--pink);color:var(--pink)}

.activity{padding:0;overflow:hidden}
.activity-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
  background:var(--card);border-radius:var(--radius)}
.activity-bar:hover{background:var(--pink-tint)}
.activity.open .activity-bar{border-bottom:1px solid var(--rule);border-radius:var(--radius) var(--radius) 0 0}
.chev{flex:none;width:16px;color:var(--muted);font-size:.72rem;transition:transform .15s ease;
  display:grid;place-items:center}
.activity.open .chev{transform:rotate(90deg)}
.activity-bar .bt{flex:1;min-width:0;font-weight:600;font-size:.95rem;overflow-wrap:anywhere}
.activity-bar .bt.ghost{color:var(--muted);font-style:italic;font-weight:400}
.activity-bar .bmeta{flex:none;font-size:.76rem;color:var(--muted)}
.activity-body{padding:16px 18px 18px}
.activity.collapsed .activity-body{display:none}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}

/* ---------- copy box formatting buttons ---------- */
.copytools{display:flex;gap:6px;margin:0 0 6px}
.copytools button{font-family:var(--body);font-size:.8rem;line-height:1;cursor:pointer;
  background:none;border:1px solid var(--rule);border-radius:4px;color:var(--muted);padding:6px 10px}
.copytools button:hover{border-color:var(--pink);color:var(--pink)}
.copytools button.b{font-weight:700;min-width:32px}

/* ---------- review mode (client screen) ---------- */
.rv-section{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:-.005em;
  border-top:2px solid var(--pink);padding-top:14px;margin:36px 0 14px}
.rv-section:first-child{margin-top:0}
.activity.rv-lesson{margin-bottom:10px}
.activity-bar .bmeta.has-changes{color:var(--pink);font-weight:600}

.frag{padding:14px 0 16px;border-top:1px solid var(--rule);
  border-left:3px solid transparent;padding-left:12px;margin-left:-15px}
.frag:first-child{border-top:none;padding-top:0}
.frag.changed{border-left-color:var(--pink);background:linear-gradient(90deg,var(--pink-tint),transparent 60%)}
.frag.commented{border-left-color:var(--yellow)}
.frag-head{display:flex;align-items:center;gap:10px;margin:0 0 6px;min-height:22px}
.frag-type{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.frag-badge{font-size:.72rem;font-weight:700;border-radius:10px;padding:2px 9px;background:var(--pink);color:#fff}
.frag.commented .frag-badge{background:var(--yellow);color:var(--ink)}
.frag-head .spacer{flex:1}
.frag-reset{font-family:var(--body);font-size:.8rem;cursor:pointer;background:none;
  border:1px solid var(--rule);border-radius:4px;color:var(--muted);padding:3px 9px}
.frag-reset:hover{border-color:var(--pink);color:var(--pink)}
.frag textarea{min-height:44px;overflow:hidden}
.frag .field+.field{margin-top:10px}
.rv-orig{margin:8px 0 0;font-size:.86rem;color:var(--muted)}
.rv-orig summary{cursor:pointer}
.rv-orig div{margin-top:4px;padding:8px 10px;background:var(--wash);border-radius:4px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.rv-comment{margin-top:10px}
.rv-comment label{font-size:.82rem}
.rv-comment textarea{min-height:40px;background:var(--note-bg);border-color:var(--note-rule);
  border-left:4px solid var(--yellow);font-size:.94rem}
.frag-hint{font-size:.82rem;color:var(--muted);margin:0 0 6px}
.frag-badge[hidden],.frag-reset[hidden],.rv-orig[hidden]{display:none}

/* lesson text + read-only assets panel */
.frag.lesson-text textarea{min-height:120px;line-height:1.55}
.rv-assets{margin:16px 0 0;padding:12px 14px;background:var(--panel);border:1px dashed var(--panel-rule);border-radius:var(--radius)}
.rv-assets h3{margin:0 0 2px;font-size:.95rem}
.rv-assets-note{margin:0 0 8px;font-size:.82rem;color:var(--muted)}
.rv-assets ol{margin:0;padding:0;list-style:none;counter-reset:asset}
.rv-asset{counter-increment:asset;display:grid;grid-template-columns:2em 6.5em minmax(0,1fr);
  column-gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--panel-rule);font-size:.9rem}
.rv-asset:first-child{border-top:none}
.rv-asset::before{content:counter(asset) ".";color:var(--muted)}
.rv-asset-kind{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-top:2px}
.rv-asset-body{min-width:0;overflow-wrap:anywhere}
.rv-asset-body img{display:block;max-width:300px;width:auto;height:auto;margin:2px 0 8px;
  border:1px solid var(--rule);border-radius:4px;background:#fff}
.rv-asset-name{word-break:break-all}
.rv-asset-sub{margin-top:2px;color:var(--muted);font-size:.84rem}

/* export (Murph's page) */
.ex-lesson{margin:0 0 28px}
.ex-lesson h2{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0 0 4px}
.ex-sub{color:var(--muted);font-size:.84rem;margin:0 0 10px}
.ex-stale{border:2px solid var(--pink);background:var(--pink-tint);border-radius:var(--radius);padding:10px 12px;margin:0 0 12px;font-size:.92rem}
.ex-hunk{border:1px solid var(--rule);border-radius:var(--radius);margin:0 0 12px;overflow:hidden;background:var(--card)}
.ex-near{font-size:.76rem;color:var(--muted);padding:4px 10px;background:var(--wash);border-bottom:1px solid var(--rule)}
.ex-line{font-family:ui-monospace,Menlo,monospace;font-size:.84rem;white-space:pre-wrap;overflow-wrap:anywhere;padding:2px 10px 2px 26px;position:relative;min-height:1.4em}
.ex-line::before{position:absolute;left:10px;content:" "}
.ex-line.add{background:rgba(60,170,60,.18)}.ex-line.add::before{content:"+"}
.ex-line.del{background:rgba(220,60,60,.16)}.ex-line.del::before{content:"\2212"}
.ex-line.ctx{color:var(--muted)}
.ex-blank{font-style:italic;opacity:.7}
.ex-comment{margin:8px 0 0;padding:8px 10px;border-left:4px solid var(--yellow);background:var(--note-bg);font-size:.92rem;white-space:pre-wrap}
@media print{body{border-top:none}.bar,.ex-noprint{display:none}.ex-hunk{break-inside:avoid}}