/* =====================================================================
   The Cork Board — Students for Stewardship
   Pure CSS. No external assets. Mobile-first.
   ===================================================================== */

:root{
  /* S4S brand */
  --cream:#f0f7ee;
  --green-deep:#1d4d2b;
  --green:#2d6a3e;
  --green-soft:#5b9b6c;
  --ink:#26302a;

  /* corkboard materials */
  --cork-base:#c8985a;
  --cork-dark:#a9763d;
  --cork-deep:#8a5e2e;
  --wood:#7a4f28;
  --wood-dark:#5c3a1c;
  --wood-light:#9a6a3a;

  /* paper notes */
  --paper:#fdf6c9;
  --paper-edge:#ecdf9a;
  --paper-line:#e6d77f;
  --postcard:#fffdf7;

  /* project index cards (blue-ish, lined) */
  --card:#eef4fb;
  --card-edge:#cfddee;
  --card-line:#d3e1f0;
  --card-rule:#d98f86;   /* the red margin rule on an index card */

  /* accents */
  --pin-red:#c2362f;
  --pin-red-hi:#e35a52;
  --pin-blue:#2f5fa6;
  --pin-blue-hi:#5a86c8;
  --tape:#e8e3cdcc;
  --solved:#2d8a4e;
  --wrapped:#2f5fa6;

  --shadow-note:0 8px 18px rgba(60,38,12,.32);
  --radius:10px;
  --maxw:1040px;

  --font-display:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  --font-serif:Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  min-height:100vh;
}

img{max-width:100%;display:block;}
a{color:var(--green-deep);}

.skip-link{
  position:absolute;left:-999px;top:0;
  background:var(--green-deep);color:#fff;padding:.6rem 1rem;z-index:100;
  border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

:focus-visible{
  outline:3px solid var(--green);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Brand bar (S4S serif identity) ---------- */
.brandbar{
  background:var(--green-deep);
  color:var(--cream);
  border-bottom:4px solid var(--green-soft);
}
.brandbar-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:.7rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--cream);
}
.brand-leaf{font-size:1.9rem;line-height:1;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-org{
  font-family:var(--font-serif);font-weight:700;font-size:1.15rem;
  letter-spacing:.02em;
}
.brand-sub{
  font-family:var(--font-serif);font-style:italic;
  font-size:.92rem;color:#bfe0c5;
}
.brandnav{display:flex;gap:.4rem;}
.brandnav a{
  color:var(--cream);text-decoration:none;
  font-size:.95rem;padding:.5rem .8rem;border-radius:999px;
  min-height:44px;display:inline-flex;align-items:center;
}
.brandnav a:hover,.brandnav a:focus-visible{background:rgba(255,255,255,.14);}

.adminbar{
  background:#7a2521;color:#ffe;text-align:center;
  font-size:.85rem;padding:.4rem 1rem;
}

/* ---------- Flash ---------- */
.flash-wrap{max-width:var(--maxw);margin:0 auto;padding:0 1rem;}
.flash{
  margin-top:1rem;padding:.8rem 1rem;border-radius:8px;
  font-weight:600;border:2px solid;
}
.flash-ok{background:#e3f3e7;border-color:var(--green-soft);color:var(--green-deep);}
.flash-err{background:#fbe6e4;border-color:#c2362f;color:#8a201b;}

/* ---------- Layout shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:1.2rem 1rem 3rem;}

.board-title{
  font-family:var(--font-serif);color:var(--green-deep);
  font-size:clamp(1.7rem,5vw,2.5rem);margin:.4rem 0 .3rem;letter-spacing:.01em;
}
.board-lead{max-width:60ch;margin:0 0 1rem;color:#45524a;}
.board-intro{margin-bottom:1.2rem;}

/* ---------- Pin-a-question CTA (big, sticky-note styled) ---------- */
.pin-cta{
  position:relative;display:inline-flex;flex-direction:column;
  gap:.15rem;text-decoration:none;
  background:linear-gradient(180deg,#fdf08a,#f6e25f);
  color:var(--green-deep);
  padding:1rem 1.6rem 1rem 1.4rem;border-radius:4px;
  box-shadow:var(--shadow-note);
  transform:rotate(-2deg);
  transition:transform .15s ease, box-shadow .15s ease;
  font-weight:700;
  border:1px solid #e7cf3f;
  min-height:44px;
}
.pin-cta:hover,.pin-cta:focus-visible{
  transform:rotate(-1deg) scale(1.03);
  box-shadow:0 12px 26px rgba(60,38,12,.4);
}
.pin-cta-tack{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--pin-red-hi),var(--pin-red) 70%);
  box-shadow:0 3px 4px rgba(0,0,0,.4);
}
.pin-cta-label{font-family:var(--font-display);font-size:1.35rem;}
.pin-cta-sub{font-weight:500;font-size:.8rem;color:#5a6b1f;}

/* ---------- Corkboard surface ---------- */
.corkframe{
  border:14px solid var(--wood);
  border-radius:12px;
  background:
    linear-gradient(125deg,var(--wood-light),var(--wood) 40%,var(--wood-dark));
  box-shadow:
    0 2px 0 #00000022 inset,
    0 18px 40px rgba(40,25,8,.35);
  padding:10px;
}
.cork{
  border-radius:6px;
  /* layered cork texture, fully CSS */
  background-color:var(--cork-base);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,72,28,.45) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(90,52,18,.40) 0 1.5px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(150,98,44,.40) 0 1px, transparent 1px),
    radial-gradient(circle at 85% 18%, rgba(80,46,16,.38) 0 1.5px, transparent 2px),
    radial-gradient(circle at 10% 70%, rgba(150,98,44,.35) 0 1px, transparent 1px),
    radial-gradient(circle at 55% 25%, rgba(110,66,26,.30) 0 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, var(--cork-base), var(--cork-dark) 75%, var(--cork-deep));
  background-size:13px 13px,17px 17px,11px 11px,19px 19px,23px 23px,7px 7px,100% 100%;
  padding:1.4rem 1.1rem;
  min-height:50vh;
}

/* ---------- Board areas (Questions / Ongoing projects) ---------- */
.area{margin:0 0 1.6rem;}
.area:last-child{margin-bottom:0;}
.area-h{
  font-family:var(--font-serif);font-size:1.2rem;color:#fff5e6;
  margin:.2rem 0 1.1rem;letter-spacing:.02em;
  display:flex;align-items:center;gap:.5rem;
  text-shadow:0 1px 2px rgba(40,22,4,.5);
  border-bottom:2px dashed rgba(255,255,255,.28);padding-bottom:.5rem;
}
.area-pin{font-size:1.15rem;}
.area-empty{
  color:#fdf3df;font-style:italic;font-size:.95rem;
  background:rgba(60,36,12,.28);border-radius:8px;padding:.7rem .9rem;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.area-empty a{color:#ffe9b0;}

.note-grid{
  display:grid;grid-template-columns:1fr;gap:1.8rem 1.4rem;
}
@media(min-width:560px){ .note-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:880px){ .note-grid{grid-template-columns:repeat(3,1fr);} }

/* ---------- Notes (shared) ---------- */
.note{
  position:relative;
  transform:rotate(var(--rot,0deg));
  transition:transform .16s ease, box-shadow .16s ease;
  box-shadow:var(--shadow-note);
  align-self:start;
}
.note:hover,.note:focus-within{
  transform:rotate(0deg) translateY(-3px) scale(1.02);
  z-index:5;
  box-shadow:0 14px 28px rgba(40,25,8,.42);
}
.note-link{display:block;text-decoration:none;color:inherit;}

/* paper sticky note */
.note--paper{
  background:
    repeating-linear-gradient(180deg,transparent 0 27px,var(--paper-line) 27px 28px),
    linear-gradient(180deg,var(--paper),var(--paper-edge));
  border:1px solid var(--paper-edge);
  border-radius:3px 3px 5px 5px;
  padding:1.5rem 1.1rem 1rem;
}
.note--paper::after{ /* curled corner */
  content:"";position:absolute;right:0;bottom:0;
  border-width:0 0 16px 16px;border-style:solid;
  border-color:transparent transparent #d9ca7f #efe2a0;
}

/* postcard (photo) */
.note--postcard{
  background:var(--postcard);
  border:1px solid #e7e2d4;border-radius:3px;
  padding:0 0 .2rem;
}
.note-photo{
  width:100%;height:170px;object-fit:cover;
  border-bottom:1px solid #ece7da;
}
.note-caption{padding:.7rem .9rem .2rem;}

.note-title{
  font-family:var(--font-display);
  font-weight:700;color:var(--green-deep);
  font-size:1.18rem;line-height:1.2;margin:0 0 .35rem;
}
.note-body{margin:0 0 .5rem;font-size:.92rem;color:#3c473e;}

.note-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem;
  font-size:.78rem;color:#5a6359;margin:.4rem .9rem .6rem;
  align-items:baseline;
}
.note--paper .note-foot,
.note--card .note-foot{margin:.4rem 0 0;}
.note--card .del-form{margin:.5rem 0 0;}
.note-author{font-style:italic;}
.note-meta{display:flex;gap:.6rem;}
.note-answers{font-weight:600;color:var(--green);}

.note--empty{
  background:linear-gradient(180deg,var(--paper),var(--paper-edge));
  border:1px dashed #cbb95f;border-radius:4px;
  padding:1.6rem 1.2rem 1.2rem;grid-column:1/-1;max-width:380px;
}

/* pushpin */
.tack{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;z-index:3;
  box-shadow:0 4px 5px rgba(0,0,0,.4);
}
.tack--red{
  background:radial-gradient(circle at 34% 28%,var(--pin-red-hi),var(--pin-red) 68%);
}
.tack::after{ /* pin highlight */
  content:"";position:absolute;top:4px;left:5px;width:6px;height:6px;
  border-radius:50%;background:rgba(255,255,255,.6);
}

/* tape (postcards) */
.tape{
  position:absolute;width:64px;height:24px;background:var(--tape);
  z-index:3;box-shadow:0 1px 2px rgba(0,0,0,.18);
  border-left:1px dashed rgba(0,0,0,.06);border-right:1px dashed rgba(0,0,0,.06);
}
.tape--tl{top:-10px;left:-8px;transform:rotate(-32deg);}
.tape--tr{top:-10px;right:-8px;transform:rotate(32deg);}
.tape--br{bottom:-8px;right:-6px;transform:rotate(-28deg);}

/* admin delete */
.del-form{margin:.5rem .9rem .7rem;}
.note--paper .del-form{margin:.5rem 0 0;}
.btn-del{
  background:#8a201b;color:#fff;border:0;border-radius:6px;
  padding:.45rem .8rem;font-size:.8rem;cursor:pointer;min-height:36px;
}
.btn-del--sm{padding:.3rem .6rem;font-size:.75rem;min-height:32px;}
.btn-del:hover{background:#a32a23;}

/* =====================================================================
   Single note page
   ===================================================================== */
.backlink{display:inline-block;margin-bottom:1rem;font-weight:600;text-decoration:none;}
.backlink:hover{text-decoration:underline;}

.bignote{
  position:relative;max-width:640px;margin:0 auto 2rem;
  transform:rotate(calc(var(--rot,0deg) * .4));
  box-shadow:var(--shadow-note);
}
.bignote--paper{
  background:linear-gradient(180deg,var(--paper),var(--paper-edge));
  border:1px solid var(--paper-edge);border-radius:4px;
  padding:1.8rem 1.5rem 1.3rem;
}
.bignote--postcard{
  background:var(--postcard);border:1px solid #e7e2d4;border-radius:4px;
  padding:0 0 1rem;
}
.bignote-photo{width:100%;max-height:460px;object-fit:cover;border-bottom:1px solid #ece7da;}
.bignote--postcard .bignote-body{padding:1.1rem 1.4rem 0;}
.bignote-title{
  font-family:var(--font-display);color:var(--green-deep);
  font-size:clamp(1.4rem,4vw,2rem);margin:.2rem 0 .6rem;line-height:1.15;
}
.bignote-text{white-space:normal;margin:0 0 1rem;color:#333c35;font-size:1.02rem;}
.bignote-foot{
  display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  font-size:.85rem;color:#5a6359;border-top:1px dashed #cbb95f;padding-top:.7rem;
}

/* SOLVED rubber stamp */
.stamp{
  position:absolute;top:18px;right:14px;z-index:6;
  font-family:var(--font-serif);font-weight:700;letter-spacing:.08em;
  color:var(--solved);border:4px double var(--solved);
  padding:.25rem .7rem;border-radius:6px;
  transform:rotate(-12deg);
  font-size:1.05rem;
  opacity:.82;
  background:rgba(255,255,255,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.is-resolved{filter:saturate(.9);}

/* answers */
.section-h{
  font-family:var(--font-serif);color:var(--green-deep);
  font-size:1.3rem;margin:1.6rem 0 .8rem;
  border-bottom:2px solid var(--green-soft);padding-bottom:.3rem;
}
.answers{max-width:640px;margin:0 auto;}
.answers-empty{color:#5a6359;font-style:italic;}
.answer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.answer{
  background:#fff;border:1px solid #e2e6dd;border-left:4px solid var(--green-soft);
  border-radius:8px;padding:.9rem 1rem;
}
.answer--solution{
  border-left-color:var(--solved);background:#f0f8f1;
  box-shadow:0 2px 8px rgba(45,138,78,.15);
}
.answer-badge{
  display:inline-block;background:var(--solved);color:#fff;
  font-size:.74rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;
  margin-bottom:.4rem;
}
.answer-text{margin:0 0 .5rem;}
.answer-foot{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:#5a6359;flex-wrap:wrap;}
.del-form--inline{margin:.5rem 0 0;}

/* =====================================================================
   Forms
   ===================================================================== */
.formcard{
  position:relative;max-width:560px;margin:0 auto;
  background:linear-gradient(180deg,var(--paper),var(--paper-edge));
  border:1px solid var(--paper-edge);border-radius:6px;
  padding:2rem 1.5rem 1.6rem;box-shadow:var(--shadow-note);
}
.form-title{font-family:var(--font-display);color:var(--green-deep);font-size:1.6rem;margin:.2rem 0 .3rem;}
.form-intro{margin:0 0 1.2rem;color:#45524a;font-size:.95rem;}

.field{margin-bottom:1.1rem;}
.field label{display:block;font-weight:600;color:var(--green-deep);margin-bottom:.35rem;}
.req{color:#a32a23;font-size:.78rem;font-weight:600;}
.opt{color:#7a8579;font-size:.78rem;font-weight:500;}
.hint{display:block;margin-top:.3rem;color:#6a7468;font-size:.8rem;}

input[type=text],input[type=search],textarea,select,input[type=file]{
  width:100%;font:inherit;color:var(--ink);
  padding:.7rem .8rem;border:2px solid #cdbf7f;border-radius:8px;
  background:#fffdf3;min-height:44px;
}
textarea{resize:vertical;min-height:96px;}
input:focus,textarea:focus,select:focus{border-color:var(--green);outline:none;}
input[type=file]{padding:.5rem;background:#fff;}

.form-actions{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:1.2rem;}

.btn-primary{
  position:relative;background:var(--green-deep);color:#fff;border:0;
  font:inherit;font-weight:700;padding:.8rem 1.4rem;border-radius:10px;
  cursor:pointer;min-height:44px;box-shadow:0 4px 10px rgba(29,77,43,.3);
  display:inline-flex;align-items:center;gap:.5rem;
}
.btn-primary:hover{background:var(--green);}
.btn-tack{
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--pin-red-hi),var(--pin-red) 70%);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.btn-ghost{
  background:transparent;border:2px solid var(--green);color:var(--green-deep);
  font:inherit;font-weight:600;padding:.65rem 1.1rem;border-radius:10px;
  cursor:pointer;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;
}
.btn-ghost:hover{background:rgba(45,106,62,.08);}

.btn-resolve{
  background:var(--solved);color:#fff;border:0;font:inherit;font-weight:700;
  padding:.8rem 1.4rem;border-radius:10px;cursor:pointer;min-height:44px;
  box-shadow:0 4px 10px rgba(45,138,78,.3);
}
.btn-resolve:hover{background:#247a42;}

.form-errors{
  background:#fbe6e4;border:2px solid #c2362f;border-radius:8px;
  padding:.8rem 1rem .8rem 1.4rem;margin-bottom:1.2rem;color:#8a201b;
}
.form-errors ul{margin:0;padding-left:1rem;}

.answer-form-wrap,.resolve-wrap{max-width:640px;margin:1.5rem auto 0;}
.answer-form,.resolve-form{
  background:#fff;border:1px solid #e2e6dd;border-radius:10px;padding:1.2rem;
}
.resolved-note{color:#45524a;font-style:italic;}

/* honeypot — visually and assistively hidden */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* =====================================================================
   Archive / Binder
   ===================================================================== */
.search{margin:1rem 0 .5rem;max-width:560px;}
.search-label{display:block;font-weight:600;color:var(--green-deep);margin-bottom:.35rem;}
.search-row{display:flex;gap:.6rem;}
.search-row input{flex:1;}
.search-clear{display:inline-block;margin-top:.5rem;font-size:.85rem;}

.shelf{
  margin-top:1.2rem;
  background:
    repeating-linear-gradient(90deg,#e9dfca 0 2px,transparent 2px 26px),
    linear-gradient(180deg,#efe7d6,#e4d8bf);
  border:1px solid #d4c5a3;border-radius:10px;
  padding:1rem;
  box-shadow:inset 0 2px 6px rgba(120,90,40,.12);
}
.shelf-empty{padding:1.5rem;text-align:center;color:#6a6048;font-style:italic;}
.shelf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}

.filecard{background:#fffdf7;border:1px solid #ddd3bd;border-radius:8px;
  border-left:5px solid var(--solved);box-shadow:0 2px 5px rgba(90,70,30,.12);}
.filecard-link{display:flex;gap:.9rem;padding:.8rem;text-decoration:none;color:inherit;align-items:flex-start;}
.filecard-thumb{
  width:84px;height:64px;object-fit:cover;border-radius:5px;flex:0 0 auto;
  border:1px solid #e0d8c5;
}
.filecard-thumb--blank{
  display:flex;align-items:center;justify-content:center;
  background:#eef4ec;font-size:1.8rem;
}
.filecard-body{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.filecard-stamp{
  align-self:flex-start;color:var(--solved);font-weight:700;font-size:.72rem;
  border:1px solid var(--solved);border-radius:4px;padding:0 .35rem;letter-spacing:.04em;
}
.filecard-title{font-family:var(--font-display);color:var(--green-deep);font-size:1.1rem;line-height:1.2;}
.filecard-snip{font-size:.88rem;color:#4a544c;}
.filecard-meta{font-size:.78rem;color:#6a7468;}
.binder-back{margin-top:1.4rem;}
.binder-intro .board-title{margin-top:.4rem;}

.notfound{font-size:1.1rem;}

/* =====================================================================
   Footer
   ===================================================================== */
.sitefoot{
  background:var(--green-deep);color:#cfe6d3;text-align:center;
  padding:1.4rem 1rem;margin-top:2rem;
}
.sitefoot p{margin:.2rem 0;font-size:.9rem;}
.foot-meta{color:#8fb89a;font-size:.8rem;}

/* =====================================================================
   Type system: index cards, blue pins, kind labels
   ===================================================================== */

/* "❓ Question" / "🛠 Project" tag on cards */
.note-kind{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  color:#5a6359;margin-bottom:.3rem;text-transform:uppercase;
}
.note--card .note-kind{color:#3a5a86;}
.note-kind--big{
  font-size:.8rem;display:inline-block;margin-bottom:.4rem;
  color:#5a6359;
}
.bignote--card .note-kind--big{color:#34568a;}

/* project = index card: lined, blue-ish, slightly larger, two pins */
.note--card{
  background:
    repeating-linear-gradient(180deg,transparent 0 25px,var(--card-line) 25px 26px),
    linear-gradient(180deg,#f6faff,var(--card));
  border:1px solid var(--card-edge);
  border-radius:3px;
  padding:1.5rem 1.1rem 1rem 1.5rem;
  /* the red margin rule down the left, like a real index card */
  box-shadow:inset 3px 0 0 var(--card-rule), var(--shadow-note);
}
.note--card .note-title{color:#23446e;}

/* blue pushpins for projects (one top-left, one top-right) */
.tack--blue{
  background:radial-gradient(circle at 34% 28%,var(--pin-blue-hi),var(--pin-blue) 68%);
}
.tack--left{left:24%;}
.tack--right{left:auto;right:24%;transform:translateX(0);}

/* big index card on the post page */
.bignote--card{
  background:
    repeating-linear-gradient(180deg,transparent 0 31px,var(--card-line) 31px 32px),
    linear-gradient(180deg,#f6faff,var(--card));
  border:1px solid var(--card-edge);border-radius:4px;
  padding:1.8rem 1.5rem 1.3rem;
  box-shadow:inset 4px 0 0 var(--card-rule), var(--shadow-note);
}
.bignote--card .bignote-title{color:#23446e;}
.bignote--card .bignote-foot{border-top-color:#bcd0e6;}

/* WRAPPED stamp variant */
.stamp--wrapped{
  color:var(--wrapped);border-color:var(--wrapped);
}

/* =====================================================================
   Type toggle on the New form
   ===================================================================== */
.typetoggle{
  border:0;padding:0;margin:0 0 1.3rem;display:grid;gap:.7rem;
}
.typetoggle legend{
  font-weight:600;color:var(--green-deep);margin-bottom:.4rem;padding:0;
}
@media(min-width:480px){ .typetoggle{grid-template-columns:1fr 1fr;} .typetoggle legend{grid-column:1/-1;} }
.typeopt{display:block;cursor:pointer;}
.typeopt input{position:absolute;opacity:0;width:0;height:0;}
.typeopt-card{
  display:flex;flex-direction:column;gap:.2rem;
  border:2px solid #cdbf7f;border-radius:10px;
  padding:.8rem .9rem;background:#fffdf3;min-height:44px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.typeopt-name{font-weight:700;color:var(--green-deep);}
.typeopt-desc{font-size:.82rem;color:#5a6359;}
.typeopt input:checked + .typeopt-card{
  border-color:var(--green);background:#eef6ef;
  box-shadow:0 0 0 3px rgba(45,106,62,.16);
}
.typeopt-card--project{}
.typeopt input:checked + .typeopt-card--project{
  border-color:var(--pin-blue);background:#eef3fb;
  box-shadow:0 0 0 3px rgba(47,95,166,.16);
}
.typeopt input:focus-visible + .typeopt-card{outline:3px solid var(--green);outline-offset:2px;}

/* =====================================================================
   Resolved question: green "solved" card pinned under the question
   ===================================================================== */
.solved-card{
  position:relative;max-width:640px;margin:-.6rem auto 1.4rem;
  background:linear-gradient(180deg,#e7f6ea,#d6efdc);
  border:2px solid var(--solved);border-radius:12px;
  padding:1.4rem 1.3rem 1.1rem;
  box-shadow:0 8px 18px rgba(45,138,78,.22);
}
.solved-card-tack{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#56c47e,var(--solved) 68%);
  box-shadow:0 4px 5px rgba(0,0,0,.35);
}
.solved-card-head{
  margin:0 0 .5rem;font-weight:800;color:var(--green-deep);
  font-size:1.05rem;letter-spacing:.01em;
}
.solved-card-text{margin:0 0 .7rem;color:#234b30;font-size:1.05rem;line-height:1.5;}
.solved-card-foot{margin:0;font-size:.85rem;color:#3f6b4b;font-style:italic;}
.solved-card .del-form{margin:.6rem 0 0;}

/* "see the discussion (N)" expander */
.discussion-expander{
  max-width:640px;margin:0 auto 1rem;
  border:1px solid #d9d2bf;border-radius:10px;background:#fffdf7;
  padding:0 1rem;
}
.discussion-expander > summary{
  cursor:pointer;font-weight:700;color:var(--green-deep);
  padding:.9rem .2rem;list-style:none;min-height:44px;display:flex;align-items:center;gap:.4rem;
}
.discussion-expander > summary::-webkit-details-marker{display:none;}
.discussion-expander > summary::before{content:"\25B8";display:inline-block;transition:transform .15s ease;}
.discussion-expander[open] > summary::before{transform:rotate(90deg);}
.discussion-expander .answer-list{margin:0 0 1rem;}

/* =====================================================================
   Resolve: radio pick list ("which answer solved it?")
   ===================================================================== */
.solved-pick{border:0;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.5rem;}
.solved-pick legend{font-weight:600;color:var(--green-deep);margin-bottom:.4rem;padding:0;}
.solved-pick-opt{
  display:flex;gap:.6rem;align-items:flex-start;
  border:1px solid #e2e6dd;border-radius:8px;padding:.6rem .7rem;
  cursor:pointer;min-height:44px;
}
.solved-pick-opt:hover{background:#f4f8f3;}
.solved-pick-opt input{margin-top:.25rem;width:20px;height:20px;flex:0 0 auto;}
.solved-pick-opt span{font-size:.92rem;color:#3c473e;}

/* =====================================================================
   Accessibility: reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
  .note,.pin-cta,.bignote{transform:none !important;}
  .note:hover,.note:focus-within{transform:none !important;}
  .stamp{transform:rotate(-12deg);}
  .tape--tl{transform:rotate(-32deg);}
  .tape--tr{transform:rotate(32deg);}
  .tape--br{transform:rotate(-28deg);}
  .tack--left,.tack--right{transform:none;}
}