/* Post-it note: read view, title, link dot and link form */
.ptnote [hidden]{display:none !important}

.ptview{
  flex:1 1 auto;display:block;width:100%;overflow:hidden;
  padding:0 calc(7px*var(--pt-scale,1));
  color:var(--gray);font-family:var(--pt-font,inherit);font-size:var(--pt-fontsize,16px);
  line-height:1.55;min-height:calc(94px*var(--pt-scale,1));
  white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;
}
.ptview:focus{outline:none}
.ptview:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.ptview.islink{cursor:pointer}
.ptview.islink:hover .pttitle{color:var(--accent)}
.pttitle{display:block;font-weight:700;font-size:calc(1em + 1pt);transition:color .15s}
.ptempty{color:var(--muted)}

.ptlink{
  position:absolute;top:8px;left:8px;
  flex:none;width:20px;height:20px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--well);color:var(--muted);
  border:2px solid color-mix(in srgb, var(--pt) 55%, var(--border));
  font-size:var(--fs-10);line-height:1;cursor:pointer;transition:transform .12s, color .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.ptlink svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ptlink:hover{transform:scale(1.15);color:var(--accent)}
.ptlink.on{background:color-mix(in srgb, var(--pt) 30%, var(--card))}

.ptlinkform{
  flex:1 1 auto;display:flex;flex-direction:column;gap:8px;
  padding:0 calc(7px*var(--pt-scale,1));
}
.ptlinkform input{
  width:100%;min-height:36px;padding:6px 10px;border-radius:10px;
  background:var(--well);border:1px solid var(--border);color:var(--gray);
  font:inherit;font-size:var(--fs-13);
}
.ptlinkform input:focus{outline:none;border-color:var(--accent)}
.ptlinkform input[aria-invalid="true"]{border-color:var(--coral)}
.ptlinkbtns{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.ptlinkbtn{
  min-height:32px;padding:0 12px;border-radius:999px;
  background:transparent;border:1px solid var(--border);color:var(--muted);
  font:inherit;font-size:var(--fs-13);font-weight:600;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.ptlinkbtn:hover{border-color:var(--accent);color:var(--gray)}
.ptlinkbtn.go{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.ptlinkbtn.go:hover{filter:brightness(1.12);color:var(--navy)}

.ptdel.ptedit:hover{color:var(--accent)}

/* A Post-it board drawn on another page */
.ptboard{display:grid;grid-template-columns:repeat(auto-fill, minmax(205px, 1fr));gap:14px}
.ptboard .empty{grid-column:1 / -1;color:var(--muted);font-size:var(--fs-14);text-align:center;padding:12px 0}
.ptboard .ptnote{
  --pt:var(--gold);
  position:relative;border-radius:14px;
  padding:30px 7px 10px;
  display:flex;flex-direction:column;gap:8px;min-height:168px;
  background:color-mix(in srgb, var(--pt) 16%, var(--card));
  border:1px solid color-mix(in srgb, var(--pt) 38%, var(--border));
  transition:background .15s, border-color .15s;
}
.ptboard .ptnote[data-color="coral"]{--pt:var(--coral)}
.ptboard .ptnote[data-color="mint"]{--pt:var(--mint)}
.ptboard .ptnote[data-color="teal"]{--pt:var(--teal)}
.ptboard .ptnote[data-color="sunset"]{--pt:var(--sunset)}
.ptboard .ptnote[data-color="cyan"]{--pt:var(--cyan)}
.ptboard .ptnote[data-color="olive"]{--pt:var(--olive)}
.ptboard .ptcolor{
  position:absolute;top:8px;right:8px;
  flex:none;width:20px;height:20px;padding:0;border-radius:50%;
  background:var(--pt);
  border:2px solid color-mix(in srgb, var(--navy) 30%, transparent);
  cursor:pointer;transition:transform .12s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.ptboard .ptcolor:hover{transform:scale(1.15)}
.ptboard .pttext{
  flex:1 1 auto;display:block;resize:none;width:100%;
  background:transparent;border:0;margin:0;padding:0 7px;
  color:var(--gray);font-family:var(--pt-font,inherit);font-size:var(--pt-fontsize,16px);
  line-height:1.55;min-height:94px;
}
.ptboard .pttext:focus{outline:none}
.ptboard .pttext::placeholder{color:var(--muted)}
.ptboard .ptfoot{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none;padding:0 7px}
.ptboard .ptdel{
  flex:none;width:24px;height:24px;padding:0;background:none;border:0;
  display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:color .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.ptboard .ptdel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ptboard .ptdel:hover{color:var(--coral)}
.ptboard .ptdel.ptedit:hover{color:var(--accent)}
@media(max-width:420px){
  .ptboard{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}
}