/* Thank-you wall (design D) — /courses/thank-you. Markup: includes/sections/thanks-wall.php */
.tw-page{
  --tw-night:#0B1026; --tw-night-2:#131A48; --tw-moon:#E8ECFF; --tw-mist:#C3C9E6;
  --tw-star:#FFE9B8; --tw-lantern:#FF9E3D; --tw-gold:#FFC566;
  --tw-paper:#F3ECDF; --tw-card:#FFFDF8; --tw-sticky:#FFF6C9; --tw-ink:#241B12; --tw-ink-2:#5A4A3A; --tw-ink-3:#6B5B4A;
  --tw-clay:#B8380F; --tw-clay-2:#8A3A1C; --tw-green:#1F6B4A; --tw-rule:#D9CBB5;
  --tw-hand:'Caveat', 'Segoe Print', cursive;
  font-family:'Be Vietnam Pro', system-ui, sans-serif; color:var(--tw-ink); background:var(--tw-paper);
  padding-bottom:96px;
}
.tw-page *{box-sizing:border-box}
.tw-sr,.tw-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── sky ─────────────────────────────────────────────────────────── */
.tw-sky{position:relative;overflow:hidden;background:var(--tw-night);color:var(--tw-moon)}
#tw-canvas{display:block;width:100%;height:680px}
#tw-canvas.is-hot{cursor:pointer}
.tw-sky-copy{position:absolute;top:0;left:0;right:0;max-width:1180px;margin:0 auto;padding:64px 24px 0;
  display:flex;flex-direction:column;gap:14px;pointer-events:none;text-shadow:0 2px 18px rgba(11,16,38,.9)}
.tw-kicker{margin:0;font-family:var(--tw-hand);font-size:30px;color:var(--tw-gold)}
.tw-give .tw-kicker{color:var(--tw-clay-2)}
.tw-sky h1{margin:0;max-width:620px;font-size:52px;line-height:1.06;font-weight:800;letter-spacing:-.02em;color:#fff}
.tw-lede{margin:0;max-width:520px;font-size:18px;line-height:1.6;color:var(--tw-mist)}
.tw-counts{display:flex;flex-wrap:wrap;gap:22px;margin-top:6px;font-size:15px;color:var(--tw-mist)}
.tw-counts strong{color:#fff}
.tw-ghost{pointer-events:auto;align-self:flex-start;margin-top:6px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid rgba(255,214,140,.55);background:rgba(11,16,38,.55);color:#FFE0A6;font:600 14px 'Be Vietnam Pro',sans-serif;cursor:pointer}
.tw-ghost:hover{background:rgba(255,214,140,.12)}
.tw-tip{position:absolute;pointer-events:none;padding:8px 12px;border-radius:10px;background:rgba(11,16,38,.9);
  border:1px solid rgba(255,214,140,.4);max-width:240px;z-index:3}
.tw-tip strong{display:block;font-size:13px;color:#fff}
.tw-tip span{font-size:12px;color:var(--tw-mist)}

.tw-note{position:absolute;left:50%;top:56%;width:min(440px,calc(100% - 40px));max-height:calc(100% - 40px);overflow:auto;
  padding:34px 28px 20px;background:var(--tw-sticky);color:var(--tw-ink);z-index:4;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.65);transform:translate(-50%,-50%) rotate(-1.5deg);
  animation:tw-note .45s cubic-bezier(.2,.9,.3,1.25) both}
.tw-note.is-lantern{background:#FFE9C7}
@keyframes tw-note{from{opacity:0;transform:translate(-50%,-46%) rotate(-6deg) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) rotate(-1.5deg) scale(1)}}
.tw-note-x{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;color:var(--tw-ink-3);font-size:18px}
.tw-note-amount{font-family:var(--tw-hand);font-size:44px;line-height:1;color:var(--tw-green);margin-bottom:6px}
.tw-note-amount:empty{display:none}
.tw-note-img{display:block;max-width:100%;max-height:340px;margin:0 auto 12px;border:1px solid var(--tw-rule)}
.tw-note-body{margin:0;font-family:var(--tw-hand);font-size:29px;line-height:1.25;white-space:pre-line;overflow-wrap:anywhere}
.tw-note-body:empty{display:none}
.tw-note-who{display:block;margin-top:14px;font-size:15px}

/* ── shared bits ─────────────────────────────────────────────────── */
.tw-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:44px}
.tw-tape{position:absolute;top:-13px;left:42%;width:110px;height:28px;background:#9CC9B4;opacity:.9;transform:rotate(3deg)}
.tw-meta{margin-top:12px;padding-top:10px;border-top:1px dashed var(--tw-rule);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--tw-ink-3)}
.tw-meta span:empty{display:none}
.tw-meta-src{margin-left:auto}
.tw-hint{font-weight:400;color:var(--tw-ink-3);font-size:13px}
.tw-btn{min-height:48px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;
  background:var(--tw-ink);color:var(--tw-sticky);font:700 16px 'Be Vietnam Pro',sans-serif;cursor:pointer;text-decoration:none}
.tw-btn:hover{background:#3A2C1E}
.tw-btn[disabled]{opacity:.6;cursor:wait}
.tw-btn-alt{background:transparent;color:var(--tw-ink);border:1.5px solid var(--tw-ink)}
.tw-btn-alt:hover{background:rgba(36,27,18,.06)}
.tw-btn-sm{min-height:40px;padding:0 14px;font-size:14px}
.tw-status{margin:0;font-size:14px;min-height:1em}
.tw-status.is-err{color:#A3260B}
.tw-status.is-ok{color:var(--tw-green)}

/* ── post form (a sticky note) ───────────────────────────────────── */
.tw-form{margin-top:-28px;position:relative;z-index:2;background:var(--tw-sticky);padding:32px 32px 24px;transform:rotate(-.6deg);
  box-shadow:0 18px 34px -20px rgba(60,40,20,.6);display:flex;flex-wrap:wrap;gap:28px 32px}
.tw-form-intro{flex:1 1 260px}
.tw-form h2{margin:0 0 10px;font-family:var(--tw-hand);font-size:42px;line-height:1;color:var(--tw-clay-2)}
.tw-form-intro p{margin:0;font-size:15px;line-height:1.6;color:var(--tw-ink-2)}
#tw-post{flex:2 1 460px;display:flex;flex-direction:column;gap:14px}
.tw-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.tw-field input,.tw-field textarea,.tw-drop-grid input,.tw-drop-grid select{width:100%;min-height:46px;padding:10px 12px;border:1.5px solid #CDBFAA;border-radius:10px;
  background:#fff;font:400 16px 'Be Vietnam Pro',sans-serif;color:var(--tw-ink)}
.tw-field textarea{resize:vertical}
.tw-field :focus,.tw-drop-grid :focus{outline:2px solid var(--tw-clay);outline-offset:1px;border-color:var(--tw-clay)}
.tw-as{margin:0;display:flex;align-items:center;gap:12px;font-size:15px}
.tw-avatar{width:40px;height:40px;border-radius:50%;background:var(--tw-clay);color:#fff;display:grid;place-items:center;font-weight:700}
.tw-form-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.tw-checks{display:flex;flex-direction:column;gap:8px}
.tw-where{margin:0;font-size:14px;color:var(--tw-ink-2)}
.tw-where i{color:var(--tw-clay)}
.tw-check{display:flex;align-items:center;gap:8px;font-size:14px}
.tw-check input{width:18px;height:18px;accent-color:var(--tw-clay)}

/* ── admin ───────────────────────────────────────────────────────── */
.tw-admin{border:2px dashed var(--tw-clay);border-radius:18px;padding:24px;background:rgba(255,253,248,.7);display:flex;flex-direction:column;gap:18px}
.tw-admin h2{margin:0;font-size:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.tw-admin h2 small{font-size:14px;font-weight:500;color:var(--tw-ink-3)}
.tw-compose{display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:14px;background:var(--tw-card)}
.tw-modes{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border-radius:999px;border:1.5px solid var(--tw-ink)}
.tw-mode{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--tw-ink);font:600 15px 'Be Vietnam Pro',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tw-mode[aria-pressed="true"]{background:var(--tw-ink);color:var(--tw-sticky)}
.tw-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:200px;padding:28px 20px;text-align:center;
  border:2px dashed #CDBFAA;border-radius:16px;background:repeating-linear-gradient(-45deg,#FFFDF8 0 14px,#FBF6EC 14px 28px);
  cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.tw-zone i{font-size:44px;color:var(--tw-clay);transition:transform .25s}
.tw-zone strong{font-size:19px;color:var(--tw-ink)}
.tw-zone span{font-size:14px;color:var(--tw-ink-2);max-width:520px}
.tw-zone .tw-zone-hint{font-size:13px;color:var(--tw-clay-2)}
.tw-zone:hover,.tw-zone:focus-within{border-color:var(--tw-clay)}
.tw-compose.is-over .tw-zone{border-color:var(--tw-clay);background:#FFF3DE;transform:scale(1.01)}
.tw-compose.is-over .tw-zone i{transform:translateY(-6px) scale(1.1)}
#tw-files:focus-visible + .tw-thumbs,.tw-zone:focus-visible{outline:2px solid var(--tw-clay);outline-offset:2px}
.tw-thumbs{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-wrap:wrap;gap:22px 18px}
.tw-thumbs:empty{display:none}
.tw-thumbs li{position:relative;width:132px;padding:12px 10px 8px;background:#FFFDF8;box-shadow:0 10px 20px -12px rgba(60,40,20,.55);
  transform:rotate(var(--r,-2deg));animation:tw-drop .45s cubic-bezier(.2,.8,.2,1.1) both}
.tw-thumbs li:nth-child(2n){--r:2deg}
.tw-thumbs li:nth-child(3n){--r:-1deg}
.tw-thumbs li .tw-tape{width:60px;height:18px;top:-9px;left:34%}
.tw-thumbs img{display:block;width:100%;height:110px;object-fit:cover;object-position:top;border:1px solid var(--tw-rule)}
.tw-thumbs span{display:block;margin-top:6px;font-size:11px;color:var(--tw-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-thumbs button{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;border:0;background:var(--tw-ink);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:13px}
.tw-thumbs li.is-bad{outline:2px solid #A3260B}
.tw-sticky-input{position:relative;display:block;padding:26px 22px 18px;background:var(--tw-sticky);box-shadow:0 12px 24px -16px rgba(60,40,20,.55);transform:rotate(-.6deg)}
.tw-sticky-input textarea{width:100%;min-height:150px;border:0;background:repeating-linear-gradient(transparent 0 35px,rgba(138,58,28,.18) 35px 36px);
  font:500 28px/36px var(--tw-hand);color:var(--tw-ink);resize:vertical;outline:none}
.tw-sticky-input:focus-within{box-shadow:0 0 0 2px var(--tw-clay),0 12px 24px -16px rgba(60,40,20,.55)}
.tw-drop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tw-drop-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--tw-ink)}
.tw-span-all{grid-column:1/-1}
.tw-compose-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px}
.tw-compose-foot .tw-status{flex:1 1 240px}
.tw-queue{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tw-queue li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:14px;border-radius:12px;background:var(--tw-card);border:1px solid var(--tw-rule)}
.tw-queue p{margin:6px 0 0;font-size:15px;line-height:1.5}
.tw-queue-act{display:flex;gap:8px;align-items:center}

/* ── wall ────────────────────────────────────────────────────────── */
.tw-wall-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.tw-wall-head h2{margin:0;font-family:var(--tw-hand);font-size:40px;color:var(--tw-clay-2)}
.tw-chips{display:flex;flex-wrap:wrap;gap:10px}
.tw-chip{min-height:44px;padding:0 18px;border-radius:999px;font:600 15px 'Be Vietnam Pro',sans-serif;cursor:pointer;border:1.5px solid var(--tw-ink);background:transparent;color:var(--tw-ink)}
.tw-chip[aria-pressed="true"]{background:var(--tw-ink);color:var(--tw-card)}
.tw-empty{margin:0;font-family:var(--tw-hand);font-size:28px;color:var(--tw-ink-2)}
/* A grid, not CSS columns: columns balance by height and, with a few tall
   screenshots, left the third column empty. Without JS this is a plain grid;
   thanks-wall.js adds .is-masonry and gives each card a row span from its
   measured height, so the columns pack tightly. */
.tw-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:32px;align-items:start}
.tw-wall.is-masonry{grid-auto-rows:4px}
.tw-card{--r:-1.6deg;position:relative;display:block;width:100%;margin:0 0 36px;padding:26px 22px 16px;background:var(--tw-card);
  box-shadow:0 12px 26px -16px rgba(60,40,20,.55);transform:rotate(var(--r));
  transition:transform .45s cubic-bezier(.2,.8,.2,1.2),box-shadow .45s;
  animation:tw-drop .7s cubic-bezier(.2,.8,.2,1.1) both;animation-delay:calc(min(var(--i),12) * 80ms)}
.tw-card:nth-child(4n+2){--r:2.2deg}
.tw-card:nth-child(4n+3){--r:1deg}
.tw-card:nth-child(4n){--r:-2.4deg}
.tw-card:nth-child(4n+2) .tw-tape{left:22%;background:#F2C94C;transform:rotate(-4deg)}
.tw-card:nth-child(4n+3) .tw-tape{left:58%;background:#F4A8A0;transform:rotate(5deg)}
.tw-card:nth-child(4n) .tw-tape{left:30%;background:#B9C7F2;transform:rotate(-2deg)}
.tw-card:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 22px 40px -18px rgba(60,40,20,.45)}
.tw-card.is-hidden{display:none}
.tw-card.is-lantern{text-align:center}
.tw-card.is-lantern .tw-meta{text-align:left}
.tw-card:not(.is-lantern):not(.is-shot){background:#FFFBEA}
@keyframes tw-drop{from{opacity:0;transform:translateY(-40px) rotate(calc(var(--r) * 3))}to{opacity:1;transform:rotate(var(--r))}}
.tw-card img{display:block;width:100%;height:auto;border:1px solid var(--tw-rule)}
.tw-cup{font-size:44px;color:var(--tw-ink)}
.tw-amount{font-family:var(--tw-hand);font-size:38px;line-height:1.1;color:var(--tw-green)}
.tw-hand{margin:0 0 10px;font-family:var(--tw-hand);font-size:28px;line-height:1.25;overflow-wrap:anywhere}
.tw-caption{margin:12px 0 6px;font-family:var(--tw-hand);font-size:22px;line-height:1.3;color:var(--tw-clay-2)}
.tw-who{display:block;font-size:15px}
.tw-pending{display:inline-block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tw-clay-2);background:#FBE3C8;border-radius:6px;padding:4px 8px}

/* ── give ────────────────────────────────────────────────────────── */
.tw-give{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:36px;border-radius:24px;background:var(--tw-card);box-shadow:0 12px 26px -18px rgba(60,40,20,.5)}
.tw-give > div:first-child{flex:1 1 380px}
.tw-give h2{margin:4px 0 8px;font-size:28px;line-height:1.25}
.tw-give p{margin:0;color:var(--tw-ink-2);line-height:1.6}
.tw-give-tiles{display:flex;flex-wrap:wrap;gap:16px}
.tw-give-tile{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--tw-ink);font-weight:700;font-size:14px}
.tw-give-tile img{display:block;border:2px solid var(--tw-ink);background:#fff}

@media (max-width:900px){.tw-drop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  #tw-canvas{height:560px}
  .tw-sky h1{font-size:36px}
  .tw-sky-copy{padding-top:40px}
  .tw-form{padding:28px 20px 20px}
  .tw-drop-grid{grid-template-columns:minmax(0,1fr)}
  .tw-zone{min-height:160px}
}
@media (prefers-reduced-motion:reduce){.tw-card,.tw-note{animation:none}}