/* Grandma's dealt notes on her fridge (the notes step of a dialogue, templates/components/talk.html) and a person's project page
   (templates/pages/project.html). The home page's language: a grey fridge door, sticky notes in three colours with a red or blue
   magnet (the magnet rule is in core/notes.css), 3px ink borders, tilts of at most 2 degrees. */

/* the notes, on the fridge */
.hand-form { display: grid; gap: 1.5rem; margin-top: 2.75rem; }
.hand-form .oops { justify-self: start; max-width: 100%; }
.hand {
  position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 2.25rem 1.5rem;
  margin: 0; padding: 2.5rem 2.75rem 2rem 1.5rem; list-style: none; background: #d9d9d9; border: var(--line) solid var(--ink);
}
.hand::after { content: ""; position: absolute; right: 10px; top: 14%; width: 14px; height: 30%; background: #bdbdbd; border: 3px solid var(--ink); }   /* the handle, as on the home page's fridge */

.dnote { position: relative; display: flex; }
.dnote:nth-child(4n+1) { rotate: -1.2deg; }
.dnote:nth-child(4n+2) { rotate: 0.9deg; }
.dnote:nth-child(4n+3) { rotate: -0.5deg; }
.dnote:nth-child(4n+4) { rotate: 1.4deg; }
.dnote:nth-child(even)::before { background: var(--ribbon); }

.dnote-body {
  flex: 1; display: grid; align-content: start; gap: 0.45rem; padding: 1.3rem 1rem 0.9rem;
  background: var(--paper); border: 3px solid var(--ink); font-size: 1.05rem; line-height: 1.25;
}
.dnote:nth-child(3n+2) .dnote-body { background: var(--note-pink); }
.dnote:nth-child(3n) .dnote-body { background: var(--note-blue); }
label.dnote-body { cursor: url("../../assets/cursor-spoon.png") 4 4, pointer; }
.dnote:has(input:checked) .dnote-body { box-shadow: 5px 5px 0 var(--ink); }
.dnote:has(input:focus-visible) .dnote-body { outline: 4px dashed var(--ribbon); outline-offset: 4px; }

.dnote-name { font-family: var(--display); font-size: 1.7rem; font-weight: 400; line-height: 1; overflow-wrap: anywhere; }
.dnote-tier { font-size: 0.9rem; font-style: italic; }
.dnote-tier em { font-style: normal; font-weight: 700; }
.dnote-line { font-size: 1rem; }
.dnote-rule { font-weight: 700; }
.dnote-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; }
.dnote-mood { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 8rem; min-width: 0; }
.dnote-mood img { flex: none; width: 3.6rem; height: auto; }
.dnote-mood small { font-size: 0.85rem; font-style: italic; line-height: 1.15; }
.dnote-keep { display: flex; align-items: center; gap: 0.4rem; font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.dnote-keep input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--ribbon); }

@media (max-width: 800px) { .hand { padding-right: 1.5rem; } .hand::after { display: none; } }

/* the confirmation page: Grandma asks "sure?" (no notes here, only her bubble and two buttons) */
.talk-actions .btn--plain { text-decoration: none; }

/* the project page */
.project-head h1 { font-size: clamp(2.6rem, 8vw, 4.8rem); overflow-wrap: anywhere; }
.project-head .lede { max-width: 32rem; font-size: clamp(1.3rem, 2.8vw, 1.8rem); line-height: 1.25; overflow-wrap: anywhere; }
.project-fig { width: min(100%, 15rem); justify-self: center; }
.project-where { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 0.6rem; font-weight: 700; }
.project-status { padding: 0.05em 0.7em; font-family: var(--display); font-size: 1.5rem; font-weight: 400; background: var(--paper); border: 3px solid var(--ink); rotate: -1.5deg; }
.project-status[data-status="approved"] { background: var(--note-blue); }
.project-status[data-status="rejected"], .project-status[data-status="abandoned"] { background: var(--note-pink); }

.project-body h2 { margin-top: 0; }
.project-sub { margin: 0 0 1.75rem; font-size: 1.15rem; }
.project-later { max-width: 40rem; margin: 2.5rem 0 0; font-size: 1.15rem; }
.project-body .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; margin-top: 2rem; }

/* "Share this project" (the share macro in templates/macros/ui.html), on the maker's page and the public one: a blue sticky note, the address in a hand-drawn box, a Copy link button */
.share-note { position: relative; display: grid; gap: 0.5rem; justify-self: start; width: min(100%, 38rem); padding: 1.5rem clamp(0.9rem, 3vw, 1.4rem) 1.1rem; background: var(--note-blue); border: 3px solid var(--ink); rotate: -0.5deg; }
.project-body .share-note { margin-top: 2.5rem; }
.share-title { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.share-input { flex: 1 1 14rem; width: auto; min-width: 0; font-size: 1.05rem; text-overflow: ellipsis; user-select: all; }   /* some browsers then select the whole address on a click even without script; the script does it for the rest */
.share-copy { flex: none; min-height: 44px; font-size: 1.3rem; }

/* My other projects section */
.project-others-section { border-top: var(--line) solid var(--ink); padding-block: 2.5rem 3.5rem; }
.project-others-section h2 { margin-top: 0; }
.other-projects-list { display: grid; gap: 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.other-project-card { padding: 1.2rem 1.4rem; background: var(--canvas); border: 3px solid var(--ink); }
.other-project-card:nth-child(4n+1) { rotate: -0.8deg; }
.other-project-card:nth-child(4n+2) { rotate: 0.6deg; }
.other-project-card:nth-child(4n+3) { rotate: -0.4deg; }
.other-project-card:nth-child(4n+4) { rotate: 0.9deg; }
.other-project-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.other-project-name { margin: 0; font-family: var(--display); font-size: 1.8rem; font-weight: 400; line-height: 1.1; overflow-wrap: anywhere; }
.other-project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin-top: 1rem; }
.other-project-actions form { margin: 0; }